Blank Product Filter Widget

The Blank Product Filter Widget is a customizable widget available in the Website Editor that lets you add a faceted search feature to your website’s System Blank Product page. Faceted search improves your customers’ browsing experience by allowing them to narrow down product results using specific filters. With the Blank Product Filter Widget, you can enhance product discoverability by enabling visitors to filter blank products by parameters such as category, size, color, manufacturer, decoration process, and price — all configurable directly within the Website Editor.

Note

• The Blank Product Filter widget is only available on the System Blank Product Page. If you do not see the widget on your page, ensure that you are using the designated system page for blank products.

Prerequisites

• You must be on the Enterprise or Premium plan to access this feature

In this article, you will learn how...

• To add a Blank Product Filter Widget to your website
• To configure the Design Settings of a Blank Product Filter Widget

To add a Blank Product Filter Widget to your website:

1. Go to your Website Editor.
2. Click on the PAGES button in the Website Editor Toolbar.
3. Select the Blank product page, it might be named differently than shown below. (It's the one with a blank shirt icon, you can hover over the icon to confirm you selected the correct page) tab.
   
4. Click on the WIDGETS button in the Website Editor Toolbar.
5. Browse the Widgets tab to locate the Blank Product Filter Widget in the LISTS section.
   
6. Click and drag the Blank Product Filter Widget onto your website page.

   Allowable areas a Blank Product Filter Widget can be inserted into include:

   • Within rows
   • Within columns
   • Above or below existing widgets
   • Between existing widgets

   The Blank Product Filter Settings popup will be displayed.

   
7. Enter a name for the Panel title that will appear in the header area for the Blank Product Filter Widget.
8. Configure the price filtering rules:
   • When filtering by price, search across blank prices: tick this checkbox if you want the price filter to include blank product prices in the search.
   • When filtering by price, search across decorated prices: tick this checkbox if you want the price filter to include decorated product prices in the search.
9. Configure the Design settings for the Blank Product Filter Widget. Click here for instructions.
10. Click OK to apply the changes.
11. 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 Blank Product Filter Widget:

1. Mouse over the widget.

   The widget's controls will be displayed.

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

   The Blank Product Filter Settings popup will be displayed.

4. Click on the Design tab.
   
5. Select from one of the pre-configured Blank Product Filter Layout options.
   • Vertical: filters, consisting of checkboxes, will be displayed in a vertical layout down the page.
   • Horizontal: filters, consisting of checkboxes, will be displayed in a horizontal layout across the page.
   • Vertical Dropdown: filters, consisting of dropdown boxes, will be displayed in a vertical layout down the page.
   • Horizontal Dropdown: filters, consisting of dropdown boxes, will be displayed in a horizontal layout across the page.
6. Set rendering mode preference for the filter.

   Tick the Render in Collapsed Mode checkbox to display the Blank Product Filter in collapsed mode.

   
   

   Example of the Blank Product Filter in collapsed mode

   Leave the Render in Collapsed Mode checkbox un-ticked to display the Blank Product Filter in expanded mode.

   
   

   Example of the Blank Product Filter in expanded mode (Horizontal Layout)

7. Configure the rest of the design options of the selected layout.

   The settings will vary slightly depending on the layout selected.

   Settings available for all Layouts

   • Show Categories: lets you choose if/how you want the categories filter to be displayed.
     • Don't Show: does not show the categories filter.
     • Show as Checkbox: displays the categories filter as checkbox options.
     • Show as Text: displays the categories filter as text links.

     Click on the brush icon to configure the settings for the categories filter. Click here for descriptions of the settings.

   • Show Sizes: lets you choose if/how you want the sizes filter to be displayed.
     • Don't Show: does not show the sizes filter.
     • Show as Checkbox: displays the sizes filter as checkbox options.
     • Show as Text: displays the sizes filter as text links.

     Click on the brush icon to configure the settings for the sizes filter. Click here for descriptions of the settings.

   • Show Colors: lets you choose if/how you want the colors filter to be displayed.
     • Don't Show: does not show the colors filter.
     • Show as Checkbox: displays the colors filter as checkbox options.
     • Show as Text: displays the colors filter as text links accompanying color boxes.
     • Show as Color only: displays the colors filter as color boxes only.

     Click on the brush icon to configure the settings for the Colors filter. Click here for descriptions of the settings.

   • Show Manufacturers: lets you choose if/how you want the Manufacturers filter to be displayed.
     • Don't Show: does not show the Manufacturers filter.
     • Show as Checkbox: displays the Manufacturers filter as checkbox options.
     • Show as Text: displays the Manufacturers filter as text links.

     Click on the brush icon to configure the settings for the Manufacturers filter. Click here for descriptions of the settings.

   • Show Decoration Processes: lets you choose if/how you want the decoration processes filter to be displayed.
     • Don't Show: does not show the decoration processes filter.
     • Show as Checkbox: displays the decoration processes filter as checkbox options.
     • Show as Text: displays the decoration processes filter as text links.

     Click on the brush icon to configure the settings for the decoration processes filter. Click here for descriptions of the settings.

   • Show Prices: lets you choose if you want the prices filter to be available.
     • Show: shows the prices filter.
     • Don't Show: does not show the prices filter.

     Click on the brush icon to configure the settings for the prices filter. Click here for descriptions of the settings.

   • Show Text Search: lets you choose if you want a search field to be available for filtering products by keywords.
     • Show: shows the search field.
     • Don't Show: does not show the search field.

     Click on the brush icon to configure the settings for the search field. Click here for descriptions of the settings.

   • Panel Title: lets you configure the font style and the color for the title that will appear in the header area of the Blank Product Filter 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.
     
     

     Example of the Blank Product Filter parameters displayed as checkboxes

     
     

     Example of the Blank Product Filter parameters displayed as text

   Settings available for Vertical and Horizontal Layouts

   • Filter Title: lets you configure the font style and the color for the name of each filter.
     • 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 Vertical Dropdown and Horizontal Dropdown

   • Filter Dropdown: lets you configure the font style and the color for the text used in the dropdown list of each filter.
     • 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.
8. Click OK, once you have finished configuring the settings.
9. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

Settings available for all filters

• Filter Label: lets you configure the font style and the color for the label text used in the Category filter.
  • 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.
• Filter Label Background: lets you configure the background for the labels in the Category filter.

  Click on the brush icon to configure the settings for the filter label background. The Filter Label Background Settings popup will be displayed.

  
  • Background Color: lets you specify the background color of the label background container. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
  • Border Width: lets you specify the border line thickness of the label background container, in pixels. Enter a value between 0 and 20.
  • Border Color: lets you specify the border color of the label background container. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
  • Border Radius: lets you specify the roundness of the border corners of the label background container, in pixels. Enter a value between 0 and 100.
  • Width: lets you specify the width of the label background container in pixels. Enter a value between 5 and 50.
  • Margin: lets you specify a margin on each side of the label background container (top, right, bottom, left). Click on the brush icon to access the margin settings.
    
  • Padding: sets the padding on each side of the label background container (top, right, bottom, left). Click on the brush icon to access the padding settings.
    
  • Edit Hover: lets you configure the appearance of the label background when you move the mouse over it. Tick the checkbox to enable the hover settings.
    
    • Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
    • Hover Background Color: sets the color of the label background on hover.
    • Hover Border Color: sets the border color of the label background on hover.
  • Edit Active: lets you configure the appearance of the label background when it is active. Tick the checkbox to enable the active settings.
    
    • Active Background Color: sets the color of the label background when it is active.
    • Active Border Color: sets the border color of the label background when it is active.
• Filter Title: lets you specify a name for the Category filter.
• Layout: lets you choose the layout style for the filter.
  • Vertical: filter options will be displayed vertically down the page.
  • Horizontal: filter options will be displayed horizontally across the page.
• Show Number of Items: lets you choose whether or not to display the number of items for each filter option.
• Number of filter elements: lets you specify the number of filter elements that will be visible by default. The customer will be able to see more elements by expanding the filter list.

Settings available for the Categories and Color filters only

• Breakdown: lets you choose whether to display a breakdown of the selected category/color into sub-categories/shades that you can further filter to refine your search.

Settings available for the Color filter only

• Color Swatch: lets you specify the style settings of the color swatches in the Color filter. Click on the brush icon to access the color swatch style settings.
  
  • Border Width: lets you specify the border line thickness of the color swatch, in pixels. Enter a value between 0 and 20.
  • Border Color: lets you specify the border color of the color swatch. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
  • Border Radius: lets you specify the roundness of the border corners of the color swatch, in pixels. Enter a value between 0 and 100.
  • Width: lets you specify the width of the color swatch in pixels. Enter a value between 5 and 50.
  • Height: lets you specify the height of the color swatch in pixels. Enter a value between 5 and 50.
  • Margin: lets you specify a margin on each side of the color swatch container (top, right, bottom, left). Click on the brush icon to access the margin settings.
    

Settings available for the Price filter only

• Min Price Label: lets you specify a label for the minimum price.
• Max Price Label: lets you specify a label for the maximum price.
• Min/Max Labels as Placeholder: Lets you choose if you want to allow the minimum and maximum price to be entered as the search limits.

Settings for the Text Search filter

• Input: Lets you configure the style settings of the search field. Click on the input field to configure the search field style settings. The Input field settings popup will be displayed.
  
  • Text: lets you edit the font style and the color of text used in the Search field.
    • Click on the font name to edit the font style using the Font Popup. Click here for instructions.
    • Click on the color spot to edit the text color using the Color popup. Click here for instructions.
  • Background Color: lets you specify the background color of the search field. Click on the color spot to edit the background color using the Color popup. Click here for instructions.
  • Vertical Padding: sets the height of the search field, using the em unit of measurement. An em is a value relative to the size of the font. Enter a value between 0.6 and 6. For example, 2em means 2 times the size of the font.
  • Border Width: lets you specify the border line thickness of the search field, in pixels. Enter a value between 0 and 20.
  • Border Color: lets you specify the border color of the search field. Click on the color spot to edit the border color using the Color popup. Click here for instructions.
  • Rounded corners: lets you specify the roundness of the corners of the search field's border in pixels. Enter a value between 0 and 100.
  • Width: lets you specify the width of the search field in pixels. Enter a value between 5 and 50.
  • Edit Hover: lets you configure the appearance of the search field when you move the mouse over it. Tick the checkbox to enable the hover settings.
    
    • Hover Transition Duration: sets the length of time, in milliseconds, over which the hover properties will occur. Enter a value between 0 and 2000.
    • Hover Text Color: sets the color of the search field's text on hover.
    • Hover Background Color: sets the color of the search field on hover.
    • Hover Border Color: sets the border color of the search field on hover.
    • Hover Shadow: sets the appearance of the shadow that appears on the search field, if any, on hover.
      • None: No shadow is displayed.
      • On: Adds a consistent shadow around the entire border of the search field.
      • Custom: Lets you configure a custom shadow. Click on the brush icon to configure a custom shadow. The Custom Shadow Settings popup will be displayed.
        

        • Override Settings: tick this checkbox if you want to override the custom shadow settings for the search field.
        • Color: lets you set the color of the shadow. Click on the color spot to change the shadow color using the Color Popup. Click here for instructions.
        • Opacity: sets the transparency level of the shadow. Enter a value between 0.00 and 1, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
        • Size: sets the size of the shadow width in pixels. Enter a value between 0 and 20.
        • Angle: sets the angle of the shadow in reference to the search field. Enter a value between -180 and 180 degrees.
        • Distance: sets the distance in pixels of the shadow from the search field both in the horizontal and vertical direction. Enter a value between 1 and 10.
        • Blur: sets the spread distance of the shadow in pixels. Enter a value between 0 and 20. The shadow will be sharp if set to 0. The higher the number, the more blurred it will be, and the further out the shadow will extend.
        • Effect: sets the location of the shadow.
          • Outset: displays the shadow outside of the search field border.
          • Inset: displays the shadow inside of the search field border.
• Filter Title: Lets you specify a name for the text search field.