Editing the default Design Categories Widget in the Designs page

The default Designs page displays a design categories list on your website that visitors can use to filter the designs they want to view. You can modify the appearance and content of the design categories list by editing the Design Categories Widget Settings.

In this article, you will learn how...

• To edit the properties of the default Design Categories Widget
• To configure the Design Settings of the default Design Categories Widget

To edit the properties of the default Design Categories Widget:

1. Click on the PAGES button in the Website Editor Toolbar.
2. Click on the Designs page tab.
   
3. Mouse over the Design Categories Widget in the Designs page.

   The widget's controls will be displayed.

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

   The Design Categories popup will be displayed.

   
6. Configure the Properties for the Design Categories Widget.
   • Show Designs: lets you choose what designs to display:
     • Show Store Designs: displays only a store designs listing. (Store designs are those uploaded at the store level).
     • Show Stock Designs: displays only a stock designs listing. (Stock designs are those uploaded at the Fulfillment Center level).
     • Show both Store and Stock Designs: displays both a store designs listing and a stock designs listing.
   • Store Designs Panel Title: lets you specify the title that will appear in the header area for the Store Designs listing.
     • Store Designs Category: lets you choose the category of store designs to be displayed. All categories will be displayed if nothing is selected.
   • Stock Designs Panel Title: lets you specify the title that will appear in the header area for the Stock Designs listing.
     • Stock Designs Category: lets you choose the category of stock designs to be displayed. All categories will be displayed if nothing is selected.
7. Configure the Design settings for the Design 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 Design Categories Widget:

1. Mouse over the Design Categories Widget in the Designs page.

   The widget's controls will be displayed.

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

   The Design 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

   • Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the category listing 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 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 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 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 category level to display:
     • Children Categories of Selected Category: displays the sub-categories of the category selected in the Properties tab.
     • Sibling Categories of Selected Category: displays the categories on the same level as the category selected in the Properties tab.
     • Parent Categories of Selected Category: displays the parent categories of the category selected in the Properties tab.
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.