Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Filter by Product option


Written by Annie

Last updated


On this page

1. Install the Shopify Search & Discovery app

In Shopify Dashboard > Online Store > Navigation option > You have to install the Shopify Search & Discovery app for your store.

If you don't install this app, you will get the notice in the image below > Click on ADD button:


If you see a message like the image below, just click on OPEN button:


2. Configure Filter in Search & Discovery > Filter

After installing the Shopify Search & Discovery app for your store, you can configure the Filter by Product option following the video below:

3. Configure Filters in Theme Customize

From Theme Customize > On the navigator dropdown > Navigate to Collections > Default collection:


In Default Collection, you will see the Filter Products > Click on this option to configure the Filter by Product option for your store:

  • Hidden count checkbox: Please tick on this checkbox to hide the product count number next to the collection name on the Filter.

  • Filter style color/ tag/ size option: You can enter the name of the style color/ tag/ size option here, then the value of those options will show on the Filter by option.


4. Configure Metafield Variant Color

4.1. Add Product metafield definitions

For example, to configure the Metafield Variant Custom Color for your store, you need to add a Variant metafield definition first. You can follow the video below:

4.2. Configure the Metafield in Products

After adding the Product metafield definition in Shopify Settings, in Shopify backend > Navigate to Products > Open the product that you wanna configure Metafield Variant Custom Color > Add a value for Metafield Variant Custom Color.

You can follow the video below:

4.3. Add Metafield to the Filter by option

In Shopify backend > Apps > Open the Search & Discovery app > To add the Metafield Variant Custom Color to the Filter.

You can follow the video below:

Last but not least, please preview your store to see the result, you can check my video below:

[Private Offer] EComposer Partner Plan

Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Cheers, The4.

We uses cookies to ensure you get the best experience on our website.