Product Filtering System

Search & Discovery

The Shopify Search & Discovery app gives you more control over how customers discover your products online. You can use the app to customize product search and recommendations in your online store in the following ways:

Create custom filters to let customers refine their search and collection pages by multiple categories, which can surface more relevant results.
Activate semantic search and create synonym groups to get more intuitive search results.
Feature particular products in search results.
Adjust result types in search and predictive search.

This add-on in particular allows you to create custom filters for your products pages.

You have first of all to install the app and create up filters inside the Shopify app settings

Getting Started

To start, copy the element below inside your Webflow project

Search & Discovery

Copy Webflow element

It includes all relevant sections that you need just to style for your project.

Do not add any collection list to the element they are not needed for this element, since all the products are directly fetched up from the Storefront APIs.

Let’s see each element in particular:

Wrapper

This is the main element of this add on and contains all the rest of elements. It can be customized using several custom attributes:

Limit

By default the search is limited to 9 results per page, you can change up the value by modifying the custom attribute that you find on the Smootify Search & Discovery element

Name

limit

Value

Animation

By default the search results are animated with a fade animation (animations are realized with motion.dev), you can change up the value by modifying the custom attribute that you find on the Smootify Search & Discovery element

Name

animation

Value

fade

Instead of fade you can use: scaleInCenter, slide, slideBlurred, fadeBlurred

Duration

By default the search results animation duration is set to 0.5s, you can change up the value by modifying the custom attribute that you find on the Smootify Search & Discovery element

Name

duration

Value

0.5

Stagger

By default the search results animation is staggered by 0.1s, you can change up the value by modifying the custom attribute that you find on the Smootify Search & Discovery element

Name

stagger

Value

0.1

Easing

By default the search results are animation easing is ease-in, you can change up the value by modifying the custom attribute that you find on the Smootify Search & Discovery element

Name

easing

Value

ease-in

Instead of ease-in you can use: linear, ease, ease-out, ease-in-out

Hide Empty Filters

By default the filters will show up even if the filters will show up no results, if you want to hide them, just add the custom attribute

Name

hide-empty

Value

true

Sync Query Parameters

By default the filters will not sync filter configuration with the url of the browser, if you want to instead allow it just add the custom attribute

Name

sync-query-params

Value

true

Filter result

This element will appear each time a filter is selected and will allow your customers to remove one filter type

Filters

You can use several different types of search filters. You must create them in Shopify Search & Discovery app first

You can show up each filter you add in Shopify in a different fashion.

Filter Search

It’s a text input that will filter up by title, description. Doesn’t require any particular configuration

Filter Price

This element allows you to filter up by Price, the Label option inside the Shopify filters configuration must be exactly “Price” in order to work

Filter Select

This element allows you to show up the selected Filter using a select element.

To select a Filter you created in Shopify you have to change the custom attribute:

Name

label

Value

Filter Label

The value must be exactly the same you used in Shopify. For example, if you labeled the filter as Brand the attribute you must use is:

Name

label

Value

Brand

This element allows you to show up the selected Filter using a dropdown element (that will act as a custom select).

To select a Filter you created in Shopify you have to change the custom attribute:

Name

label

Value

Filter Label

The value must be exactly the same you used in Shopify. For example, if you labeled the filter as Brand the attribute you must use is:

Name

label

Value

Brand

Filter Swatches

This element allows you to show up the selected Filter using buttons (that will act as radio buttons). This is particularly adviced if you are filtering up by a Metafield

To select a Filter you created in Shopify you have to change the custom attribute:

Name

label

Value

Filter Label

The value must be exactly the same you used in Shopify. For example, if you labeled the filter as Brand the attribute you must use is:

Name

label

Value

Brand

This element allows you to show up the selected Filter using radio buttons.

To select a Filter you created in Shopify you have to change the custom attribute:

Name

label

Value

Filter Label

The value must be exactly the same you used in Shopify. For example, if you labeled the filter as Brand the attribute you must use is:

Name

label

Value

Brand

Filter Checkbox

This element allows you to show up the selected Filter using checkboxes.

To select a Filter you created in Shopify you have to change the custom attribute:

Name

label

Value

Filter Label

The value must be exactly the same you used in Shopify. For example, if you labeled the filter as Brand the attribute you must use is:

Name

label

Value

Brand

Collection Filter

To filter up by collection you can use either a Filter Select, Filter Dropdown or Filter List, but you must set the label attribute as Collection

Name

label

Value

Collection

Sorters

Search & Discovery supports only few sorting options and they do depend by the position of the extension, in static pages you can sort only by Price and Relevance. When you instead have a collection selected you can also further sort by Title and by Best Sellers.

You can create 2 type of sorters:

Sort Select

This element allows you to show up the sort options using a select element.

This element allows you to show up the sort options using a dropdown element.

Sort Radio

This element allows you to show up the sort options using a dropdown element.

Sorters labels

By defaults labels are the official one of Shopify, you can change and customize them by simply adding this script on the head global code section of Webflow (before Smootify scripts)

<script>
window.SmootifySortLabels = {
  relevance: "Relevance",
  price_asc: "Price (Low to High)",
  price_desc: "Price (High to Low)",
  best_selling: "Best Selling",
  title_asc: "Title (A - Z)",
  title_dsc: "Title (Z - A)",
}
</script>

Preselect Values

You can preselect values in certain filters (usefull for example if you want to preselect collection or vendor inside CMS pages).

To preselect a value you just have to select the corresponding filter element, and add the attribute:

Name

selected-value

Value

Label of the preselected value

For example, if you want to preselect a collection inside a Collection CMS page, you can select the filter element that has the label Collection and set as selected-value the Collection Name

Is adviced to hide the corresponding filter dom element since it will not be changeable, to do it since Webflow doesn’t apply classes to DOM elements, you can use the custom attribute:

Name

class

Value

hidden

Where hidden should be a class of your project with the property display: none; (You can just use any class name you created to hide elements)

Search & Discovery