Editing the default Product Categories Widget in the Decorated Products and Products pages

The default Decorated Products page and the Products (previously Create) page each display a product categories list on your website that visitors can use to filter the decorated/blank products they want to view. You can modify the appearance and content of the product categories list by editing the Decorated/Blank Product Categories Widget Settings.

In this article, you will learn how...

• To edit the properties of the default Product Categories Widgets
• To configure the Design Settings of the default Product Categories Widgets

To edit the properties of the default Categories Widget:

1. Click on the PAGES button in the Website Editor Toolbar.
2. Click on the Decorated Products/Products page tab.
   
3. Mouse over the Product Categories Widget in the Decorated Products/Products page.

   The widget's controls will be displayed.

4. Click on the down arrow beside the Product Categories Widget icon.
5. Choose the Product Categories Settings item from the drop-down menu.
   

   The Product Categories popup will be displayed.

   
6. Configure the Properties for the Product Categories Widget.
   • Panel title: lets you specify the title that will appear in the header area for the product listing.
   • Category: lets you choose the category of products to be displayed. All categories will be displayed if nothing is selected.
7. Configure the Design settings for the Product Categories Widget. Click here for instructions.
8. Click OK to apply the changes.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

To configure the Design settings for the default Product Categories Widget:

1. Mouse over the Product Categories Widget in the Decorated Products/Products page.

   The widget's controls will be displayed.

2. Click on the down arrow beside the Product Categories Widget icon.
3. Choose the Product Categories Settings item from the drop-down menu.
   

   The Product Categories popup will be displayed.

4. Click on the Design tab.
   
5. Select from one of the pre-configured Categories Layout options.
   • Hierarchy: category names are arranged in a hierarchical tree structure. Each category item can be expanded/collapsed to show/hide sub-category items.
   • Dropdown: category names are arranged in a list that appears when a graphical box control is clicked, allowing the user to select a category from the list. The category will be displayed in the box after it has been selected.
   • List: category names are displayed in a consecutive list that can be set in a vertical or horizontal orientation.
6. Configure the design options of the selected layout.

   The settings will vary depending on the layout selected.

   Settings available for all Layouts

   • Render in Collapsed Mode: lets you set how the category list is rendered.

     Tick the Render in Collapsed Mode checkbox to display the category list in collapsed mode.

     

     Example of the category list in collapsed mode

     Leave the Render in Collapsed Mode checkbox un-ticked to display the category list in expanded mode.

     

     Example of the category list in expanded mode

   • Show Dividers: (Blank Product Categories Widget only). Tick this checkbox if you want a horizontal line to be displayed between categories.
   • Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the Product Categories panel.
     • Click on the font name to configure the font style using the Font popup. Click here for instructions.
     • Click on the color spot to choose a text color using the Color popup. Click here for instructions.

   Settings available for the Hierarchy and Dropdown Layouts

   • Show 'View All': (Blank Product Categories Widget only). Tick this checkbox if you want the 'View All' link to be displayed. The 'View All' link will display all categories when clicked.

   Settings available for the Hierarchy Layout

   • Hierarchy Categories Display: lets you choose the state (expanded/collapsed) of the category tree.
     • Don't Always Show Category Tree Expanded: will display the category tree in the collapsed state until expanded by the user.
     • Always Show Category Tree Expanded: will always display the category tree in the expanded state.

   Settings available for Hierarchy and List Layouts

   • Categories: lets you specify font and the color used for the category names. Click on the font name to choose a font. Click on the color spot to choose a color.

   Settings available for the Dropdown Layout

   • Dropdown Categories Display: lets you choose a drop-down display type.
     • Single: displays a single drop-down list box for choosing categories.
     • Dynamic: displays a new dynamic dropdown list box containing the sub-categories whenever a category has been selected from the parent category drop-down.

   Settings available for the List Layout

   • Orientation: lets you choose the orientation in which the categories will be displayed.
     • Vertical: displays the category names stacked one below another in a column.
     • Horizontal: displays the category names consecutively in a row.
   • List Categories Display: lets you choose the state (expanded/collapsed) of the category tree.
     • Children Categories of the Selected Category: displays only sub-categories of the selected category in the category list.
     • Sibling Categories of the Selected Category: displays only categories that are on the same level as the selected category in the category list.
     • Parent Categories of the Selected Category: displays the parent categories of the selected category in the category tree.
7. Click OK once you have finished configuring the settings.
8. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.