Add Category Tiles or Lists to Your Website

  • Updated

Encourage your customers to explore products on your website with engaging Category Tiles or straightforward Category Lists.

Here's how to add Product Categories to your website using image tiles or lists:

  1. While logged into your DistributorCentral account, open the website editor. Learn How
  2. In the left-hand panel, under blocks, click the plus icon to the right of the row you'd like to add your Category Tiles or Lists to

    file-Zdw1jgrTQg.png

  3. In the Select Block Type section, choose Product Category List

    file-DEW3Vq6f0E.png

  4. After clicking Product Category List, the Select Block Type section will close and the Product Category list shows in left hand panel and in the visual edit preview to the right

    file-SyNtv6qWu3.png

  5. To the right of the Product Category List in the left hand panel, click the pencil icon to the right of the block

    file-TtlvW47WFd.png

  6. The Product Category List editor window will appear:

    file-7HHM1rPseK.png

  7. Within the Product Category List editor, select the Product Collection to pull categories from under Select a collection to display
    *Note: If you select a specific catalog that only has a few categories, your list will only show those certain categories.*

    file-nhFdzAj0O2.png

  8. Next, choose the category display type under Which type of category list would you like to show?:
    1. Master shows a list of master categories for the selected Product Collection
    2. Full shows a list of all subcategories for the selected Product Collection
    3. Masonry shows image tiles for the selected Product Collection

      file-K2OFYAZosr.png

  9. If you've chosen Master or Full as the category display type, adjust the Number of Columns as needed

    file-dkxS1AtlVQ.png

    1. If you've selected Masonry, you can ignore the Number of Columns section as it does not affect this category display type

      file-lNt54SCNMA.png

  10. Click Done in the bottom right corner

    file-MzLR1QdCZE.png

  11. Save your changes before previewing the website or closing the website editor

    .file-6eNrLZfenq.png

NOTE: The Masonry images cannot be changed

 

Was this article helpful?

0 out of 0 found this helpful

Have more questions? Submit a request