Customised Filter Buttons

[thatshampooshop]

Hi,

I want to add customised filter buttons on my brands page. I figured out the html/css portion but I cannot figure out the logic behind it.

Context:

I’m selling hair care essentials: Shampoo, Conditioner, Hair Serum and more. For each brand page, I want to filter them by the type of haircare.

Can anyone help with the logic part? Thanks!

The url link here: https://ee15bf-83.myshopify.com/collections/oribe

[Tal19]

1. Add a metafield called type to products.

2. Add the app Search & Discovery of shopify

3. Now you can add your type filter inside the filters drawer.

4. When you filtered by type, you can copy the url of the specific filter and than add a link to each button.

[thatshampooshop]

Hi Tal19,

Thanks for your suggestion.

Can you elaborate more on the steps? For example, for step 1, I create the metafield under Pages named Type to Products and what type do I select for it?

Thanks!

[oscprofessional]

Hello @thatshampooshop

For this functionality, you need to create a section called “Tab Based Collection.” Create individual collections for Shampoo, Conditioner, Hair Serum, Hair Mask, Hair Styling & Treatment, and Body Care. Then, assign each collection to the corresponding tab.

[Tal19]

1. Settings → Custom Data → Products → Add definition

3. In search & discovery app you can add the fiter based on metafield: