Smart Search Recommendation: Configuring Filter Display Settings

The filter display settings in the Smart Search Recommendation app allow you to customize how filters appear on your storefront. By adjusting layout, style, and display behavior, you can create a more intuitive and user-friendly filtering experience for customers.

This article explains how to configure filter display settings and customize how each filter is presented on your storefront.

Configuring Filter Display Settings

To configure filter display settings, follow the steps below.

Step 1: Go to Display Settings

In your Smart Search Recommendation app, go to Filter > Default filter or Personalized filter, then click Display settings.

Step 2: Configure Style Settings

In the Style settings section, configure the following:

• Filter style: Select how filter styles are applied:
  • Custom style: Apply custom settings to override your theme’s default filter style.
  • Apply theme style: Use the filter style defined in your store theme.
• Custom layout: If you select Custom style under Filter style, you can further choose how filters are displayed on the storefront.
  • Vertical: Filters are displayed in a sidebar (commonly used on desktop).
  • Horizontal: Filters are displayed at the top of the page.
  • Drawer: Filters appear in a slide-out panel (commonly used on mobile). 

Step 3: Preview Filter Display

In the Preview filter section, select the filter type to preview:

• Default filter
• Personalized filter

The selected filter type will determine which filters are displayed below for individual configuration.

Step 4: Configure Individual Filter Display

Based on the selected filter type in Step 3, the corresponding preset filter conditions will be displayed. 

You can then customize the display settings for each filter (e.g., Price, Color) individually. Available options include:

• Filter visibility: If a filter is inactive, it will be hidden and will not appear in the preview or storefront.
• Filter type custom name: Use Filter type custom name to customize how the filter name is displayed to customers.
• Collapse this filter by default: Enable Collapse this filter by default to have the filter section collapsed when the page loads.
• Style type(varies by filter type): Available style options depend on the filter type. 

Step 5: Preview the Display

You can preview how filters will appear on different devices. Switch between device views:

• Desktop
• Mobile

This helps you ensure the filter layout and styles display correctly across devices.

Important Notes

• These settings apply to both Default filters and Personalized filters.
• Display settings affect only the appearance of filters, not their logic or conditions.
• Available style options may vary depending on the filter type.
• The preview is for reference only; actual storefront display may differ slightly.

Troubleshooting: Filters Not Displaying Properly

If you have completed the filter display settings as described above but the filters still do not appear correctly on your storefront, please check the following:

Is the filter feature enabled in the Theme Editor?

Go to Online Store > Design to open the Theme Editor. Then switch to the Collections or Search page, and confirm that the Turn on filtering toggle is enabled.

Is there an app conflict?

The custom filter style feature in the Smart Search Recommendation app may conflict with the filter style feature in the Product Filter & Color Swatch app. If both are applied at the same time, it may cause layout issues on the Collections page or All Products page. It is recommended to use only one app’s filter feature to avoid conflicts.