Best UX practices for structuring collection filters using Shopify Search & Discovery

Hi everyone,

We are currently in the process of upgrading our storefront navigation to make it as easy as possible for customers to browse and find exactly what they need.

Our Shopify store features our wellness gummy lineup, which includes a variety of dietary preferences (like vegan, gluten-free, and sugar-free options). We want to implement custom collection filters using the Shopify Search & Discovery app so users can filter products by both health goals (e.g., Energy, Sleep) and specific dietary needs.

I would love to get some general advice and learn from the experiences of other e-commerce store owners in the community:

  1. Tag vs. Metafield Filters: Have you found it cleaner to base your custom filters on product tags, or is it better to transition completely to product metafields for dynamic sidebar filtering?
  2. Mobile Layout Preferences: On mobile devices, do you prefer displaying filters in a slide-out drawer or as an expandable accordion at the top of the collection page to maximize conversion rates?
  3. Visual Swatches: For attributes like flavor or specific benefits, do you find that using visual custom swatches (instead of plain text checkboxes) noticeably improves customer engagement?

We want to build a highly intuitive navigation experience for our customers, so any tips, storefront examples, or layout advice you can share would be incredibly helpful!

Thank you so much!

Hi @Yummii ! I had a look at the store first.

With the current size of the catalog, I wouldn’t rush into a large filter system yet. Your navigation already starts with the strongest customer question: what do I need help with?

I’d carry that same logic into the collection page and begin with:

  • Goal: Sleep, Calm, Gut Health, Energy, Hair, Skin & Nails
  • Product type: Individual product or Bundle

Possibly key ingredient later, if the range grows.

I’d use metafields for those because they are structured attributes and will be easier to manage consistently as you add more products.

I’d only add dietary filters when they actually narrow the results. If most of the range is already vegan and gluten-free, those may work better as visible product badges rather than filters.

On mobile, with this number of products, a simple row of goal-based chips or a compact Filter button may be enough. I’d move to a full filter drawer once the catalog and number of filters become larger.

For visual swatches, I wouldn’t use them for benefits such as Sleep or Energy. Clear text is easier to understand. Flavor could be visual if customers genuinely compare products by flavor, but otherwise it may add complexity without helping them choose.

The main thing is that every filter should meaningfully reduce the product set, not just repeat information that applies to almost every product.

Adding to astriva’s point on metafields, the part that usually decides it is the namespace. Tags are one flat global list for the whole store, so a goal tag like Energy ends up colliding and drifting into energy, energy-boost, Energy Support as different people add products, and your filter slowly fills with near duplicates. A metafield with a defined list keeps the values controlled, which matters more than it sounds once the range grows.

The other reason to lean metafield is that it does double duty. Your dietary values as a metafield can also feed the Shop channel and your Google and Meta product feeds, and render as badges, none of which a tag maps to cleanly. So you build the taxonomy once and reuse it everywhere.

One thing to watch in Search and Discovery specifically, a filter only shows values that exist in the products of the current collection, and combinations like vegan plus Energy can resolve to zero products. Those empty result states are the quiet conversion killer, more than drawer versus accordion. I would instrument which facet combinations return nothing before locking the layout down.

Are you planning to keep dietary as filters, or fold the near universal ones like vegan into badges the way astriva suggested?

Hey @Yummii .

How are you doing today?

Metafields are better than tags here and are easy to manage as you scale. Tags get messy fast with lots of products.

For mobile, a slide out drawer is usually better than an accordion.

Hi @Yummii,

I agree with the recommendation to use metafields rather than tags for structured attributes such as health goal, dietary preference, and product type.

For your current catalogue, I would keep the first version fairly simple:

  • Health goal: Sleep, Calm, Gut Health, Energy, Hair, Skin & Nails

  • Product type: Individual or Bundles

  • Dietary preferences: Only include these as filters when they meaningfully narrow the results; otherwise, visible badges may be clearer

On mobile, I would use a compact Filter button opening a drawer rather than placing multiple accordions above the products. Goal-based chips could also work well for the most important options.

One additional consideration is that visitors arriving directly on a product page from Google, social media, or an advertisement may never interact with the collection filters.

Since you already offer combinations such as the Happy Gut Bundle, you could also test presenting the related product directly on the individual gummy pages. For example, someone viewing Gut Health could be offered Lean & Detox as an optional discounted add-on, explaining that the two products form a more complete gut-health routine.

This would complement the collection filters: filters help customers find the right starting product, while the product-page offer helps them discover a relevant combination.

Full disclosure: I’m the developer of KitForge Bundles, which supports frequently bought together offers like this directly on Shopify product pages, including discounts, variants, inventory checks, and bundle analytics.

The app is currently free during its limited preview. I’d be happy to help you configure one of these combinations as a test at no cost.