How to Add the Filter Widget Tool to the Products Page

If you're using a Premium or Enterprise DecoNetwork plan, you can enhance your storefront browsing experience with the Blank Product Filter widget. This powerful tool allows customers to quickly narrow down products by category, size, color, brand, price, and more, making it easier to find exactly what they want.

In This Article

• Prerequisites
• Why Use the Blank Product Filter Widget?
• Step 1: Add the Blank Product Filter Widget
• Step 2: Configure Filter Options
• Step 3: Customize Layout and Display
• Step 4: Optimize for Mobile Devices
• Best Practice Tips
• Troubleshooting
• FAQs
• Additional Resources

Prerequisites

Why Use the Blank Product Filter Widget?

The Blank Product Filter widget improves product discovery by giving customers control over how they browse your catalog.

• Faster navigation: Customers can quickly narrow results using filters like size, color, or brand
• Improved user experience: Reduces overwhelm when browsing large product catalogs
• Increased conversions: Helps customers find the right product faster, leading to more completed purchases
• Flexible layout options: Display filters vertically or horizontally to suit your design
• Device-specific control: Optimize the experience for desktop vs. mobile users

Step 1: Add the Blank Product Filter Widget

1. Go to Admin → Websites
2. Click Manage on the website you want to edit
3. Go to Edit Website → Website Pages
4. Open the Products page
5. If needed, adjust the layout to include a sidebar (e.g., two-column layout)
6. Click Widgets
7. Locate Blank Product Filter (typically near the bottom)
8. Drag and drop the widget onto the page

Step 2: Configure Filter Options

1. Click the widget to open its settings
2. Choose which filters to enable for customers

Available filter options include:

• Category
• Brand
• Size
• Color
• Price
• Process (decoration method)
• Search

Step 3: Customize Layout and Display

1. Select the widget on the page
2. Choose your preferred layout style:

• Vertical: Filters appear in a sidebar
• Horizontal: Filters display across the top of the page
• Dropdown styles: Use vertical or horizontal dropdowns for a more compact design

3. Drag the widget to reposition it:
   • Left or right column for sidebar filtering
   • Top of the page for horizontal filtering

Step 4: Optimize for Mobile Devices

On smaller screens, filter panels can take up too much space. You can split functionality to improve usability.

1. Add a second Blank Product Filter widget

2. Configure one widget for full filtering (desktop only)

   

   Use multiple filters for desktop devices

3. Configure the second widget to show only Search

   

   Use a simplified search-only filter for mobile devices

4. Adjust visibility settings to control which widget appears on which device

   

   Configure visibility using the Responsive Properties

5. Optionally rename the search label (e.g., "Search") for clarity

Best Practice Tips

• Place filters where users expect them (left sidebar or top bar)
• Avoid enabling too many filters. Keep it simple and relevant
• Use horizontal filters for modern layouts and visual appeal
• Always test the experience on both desktop and mobile devices
• Prioritize Search functionality for mobile users

Troubleshooting

Widget not available?

• Ensure your plan is Premium or Enterprise
• Confirm you are editing the Products page

Filters not working as expected?

• Check that your products have the relevant attributes (size, color, brand, etc.)
• Ensure filters enabled match available product data

Filter layout looks crowded?

• Reduce the number of enabled filters
• Switch to a dropdown or horizontal layout

FAQs

• Can I use this widget on any page?
  No. The Blank Product Filter widget is only available on the Blank Products page.
• Can I control which filters appear?
  Yes. You can enable or disable specific filters within the widget settings.
• Can I use multiple filter widgets?
  Yes. This is commonly done to separate desktop and mobile experiences.
• Can I change the order of filters?
  Yes. You can adjust which filters appear and remove ones like search from one widget and add them to another.

Additional Resources

• Blank Product Filter Widget