Blank Product Filter Widget

The Blank Product Filter Widget lets you add faceted search to your website’s System Blank Product page. This helps customers narrow blank product results by filters such as category, size, color, manufacturer, decoration process, price, and keyword search.

Use this widget to improve product discoverability and make it easier for customers to find the blank products they want to customize or order.

In This Article

• Prerequisites
• Why Use the Blank Product Filter Widget?
• Step 1: Open the System Blank Product Page
• Step 2: Add the Blank Product Filter Widget
• Step 3: Configure the Filter Properties
• Step 4: Configure the Design Settings
• Step 5: Configure Individual Filter Styles
• Best-Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Use the Blank Product Filter Widget?

The Blank Product Filter Widget helps customers browse large blank product catalogs more efficiently. Instead of scrolling through all available products, customers can narrow the list using filters that match how they shop.

• Helps customers find relevant blank products faster.
• Improves browsing on stores with large product catalogs.
• Supports filtering by common buying criteria such as size, color, brand, and price.
• Lets you choose which filters appear and how they are displayed.
• Helps reduce friction before customers choose a product to customize or purchase.

Step 1: Open the System Blank Product Page

1. Go to your Website Editor.
2. Click PAGES in the Website Editor Toolbar.

3. Select the Blank Product system page.

   The page name may differ from the example shown in your site. Look for the page with the blank shirt icon. You can hover over the icon to confirm that you have selected the correct page.

   

   Select the System Blank Product page from the Pages panel.

   The Blank Product Filter Widget is only available on the System Blank Product page. It will not appear as an available widget on custom category pages or other page types.

Step 2: Add the Blank Product Filter Widget

1. Click WIDGETS in the Website Editor Toolbar.

2. In the Widgets panel, locate the Blank Product Filter Widget in the Lists section.

   

   Locate the Blank Product Filter Widget in the Lists section.

3. Drag the Blank Product Filter Widget onto the page.

   You can place the widget:

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

   The Blank Product Filter Settings popup will be displayed.

   

   Configure the widget settings in the Blank Product Filter Settings popup.

Step 3: Configure the Filter Properties

1. Enter a Panel title.

   This title appears in the header area of the Blank Product Filter panel.

2. Configure the price filtering rules:
   • When filtering by price, search across blank prices: includes blank product prices in the price filter.
   • When filtering by price, search across decorated prices: includes decorated product prices in the price filter.
3. Optionally, configure the Design settings for the Blank Product Filter Widget. Click here for instructions.
4. Click OK to apply the changes.
5. Click Save.
6. Click Publish on the Page Settings bar.

Step 4: Configure the Design Settings

1. Click the Design tab.

   

   Use the Design tab to choose the filter layout and display style.

2. Select a layout:
   • Vertical: displays checkbox filters vertically down the page.
   • Horizontal: displays checkbox filters horizontally across the page.
   • Vertical Dropdown: displays dropdown filters vertically down the page.
   • Horizontal Dropdown: displays dropdown filters horizontally across the page.

3. Choose whether to enable Render in Collapsed Mode.

   • Tick the checkbox to display the filter in collapsed mode.
   • Leave the checkbox unticked to display the filter in expanded mode.

   

   Example of the Blank Product Filter in collapsed mode

   

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

4. Configure the available filter display options.

   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.
5. Click OK, once you have finished configuring the settings.
6. Click on the Save button and then click on the Publish button at the right of the Page Settings Bar.

Step 5: Configure Individual Filter Styles

Each filter has its own style settings. The available options vary depending on the filter type.

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.

Best-Practice Tips

• Place the filter near the blank product listing so customers can immediately see how to narrow the product results.
• Use only the filters that are useful for your catalog. Too many filters can make the page feel cluttered.
• Use collapsed mode when space is limited or when the filter is placed above the product listing.
• Use horizontal layouts for compact filter bars and vertical layouts for sidebar-style filtering.
• Publish and test the page after making changes to confirm that the filters display correctly on desktop and mobile devices.

Troubleshooting

The Blank Product Filter Widget is not showing in the Widgets panel

Make sure you are editing the System Blank Product page. The widget is only available on that system page and will not appear for custom category pages or other page types.

The filters do not appear on the live website

Save and publish the page after adding or changing the widget. If the live page still does not update, refresh the storefront page and check that you are viewing the correct blank product page.

The price filter is not returning the results I expect

Review the price filtering options in the widget settings. You can choose whether the price filter searches across blank prices, decorated prices, or both.

Too many filter options are displayed

Use the Number of filter elements setting to limit how many options appear before the customer expands the filter list.

FAQs

Can I add the Blank Product Filter Widget to a custom category page?

No. The widget is only available on the System Blank Product page.

Can I choose which filters customers see?

Yes. You can choose whether to show or hide filters such as categories, sizes, colors, manufacturers, decoration processes, prices, and text search.

Can I change how the filters look?

Yes. You can configure the layout, font styles, colors, label backgrounds, dropdown styles, color swatches, search input styling, and other display settings.

Do I need to publish the page after changing the widget?

Yes. Save and publish the page for your changes to appear on the live website.

Additional Resources

• How to Add the Filter Widget Tool to the Products Page
• Configuring the Blank Product Listing Widget
• Editing the default Blank Product Listing Widget in the Products page