Activate filters using images

Store Design
, , ,

Topic summary

Goal: Enable image/link-triggered filters on a Dawn theme collection page to guide shoppers through steps (choose base purse color, strap, wallet). Color metafields already exist; screenshots illustrate the desired stepwise UX.

Latest update: After the store preview link and password were shared, a helper proposed two approaches:

  • Option 1 (metafields + code): Create/align product and sub-collection metafields, then modify the filter code in facets.liquid. Faster filtering and more native, but requires code changes.
  • Option 2 (fetch-based reload): Use fetch to swap/reload entire collection pages based on collections, avoiding metafields. Easier conceptually but slower page transitions.

Notes on terms:

  • Metafields: Custom data fields attached to products/collections.
  • facets.liquid: Dawn’s template controlling filter (faceted) UI.
  • fetch: An AJAX request to dynamically reload content.

Status/outcome: No implementation decision yet; both methods need significant coding expertise and no detailed step-by-step was provided. Next step is to pick an approach or involve a developer. Images/screenshots are central to understanding the intended UI.

Summarized with AI on December 12. AI used: gpt-5.
1

Hello! I am currently looking for a way to "Activate" or toggle filters using images or links.

I am using the Dawn theme and have made it so the “Column” section has links, also I have added meta fields with colors which we use for the filters.

The main thing is that we want to create a sense of “Steps” where you choose one base color for a purse, a strap and a wallet. Here are some pictures of what we have.

Captura de pantalla 2024-12-06 101057.png
Captura de pantalla 2024-12-06 101057.png1482×1202 128 KB

Captura de pantalla 2024-12-06 101117.png
Captura de pantalla 2024-12-06 101117.png1540×1202 193 KB

2

Hi @Ozcorp_Web ,

Please send the website link, I will check it for you

1 Like
3

Hi! Im sorry or the late response I did not get the notification for the reply, the link is https://rio-de-hilares.myshopify.com/collections/bs-beige (PW: Rio_Hilares)

4

Hi @Ozcorp_Web ,

You want this:

Screenshot.png
Screenshot.png1769×957 154 KB

There will be 2 ways for this:

  • 1: As you mentioned, you need to create respective metafields for products and sub-collections. Then you need to change the filter code in facets.liquid file.

  • 2: You can use fetch to reload the entire collection page, this doesn’t use metafields, you just create the collections. And this method takes more loading time when converting the collection than method 1.

Both ways require a lot of experience with code, so it will be difficult for someone to guide you in detail.

I hope it helps!