Shop by scent and the scent filter
Chapter 9 of the Wick user guide.
People who love a fig candle want to see everything else that smells green and woody. Wick gives them two ways in, both built on the Scent family metafield (custom.scent_family, chapter 7) and Shopify's own storefront filtering:
- The Shop by scent section: a row of scent family tiles, each a glowing well in the family's color holding your ingredient photo (or the family's built-in drawing: a cedar slice, a flower, and so on), the family name, a one-line description ("Cedar, oud and vetiver") and a "Shop woody" line. A tile opens your products filtered to that family.
- Scent chips on collection and search pages: a row above the toolbar with All scents and one chip per family, each with its dot and product count. Shoppers tick one or more and the grid narrows in place.
Set up the scent filter
- Create the Scent family product metafield (
custom.scent_family, Single line text, Limit to preset choices with the eight families) and fill it on your products (chapter 7). Preset choices keep the values consistent, which the filter needs: "Woody" and "woody " would be two different filter values. - Install Shopify's free Search & Discovery app from the Shopify App Store and open it.
- Go to Filters › Add filter, choose the product metafield Scent family as the source, and save. Put it where you like in the filter list. New filters can take a little while to appear while Shopify indexes your products.
- Leave Theme settings › Scent › Scent family metafield at
custom.scent_family(and the Shop by scent section's Filter metafield too) unless your filter uses another metafield. Both must name the metafield the filter uses, as namespace.key.
Once the filter exists, collection and search pages show the scent chips instead of a Scent family dropdown in the toolbar, and every Shop by scent tile opens the filtered collection.
Shop by scent section
| Setting | Default | What it does |
|---|---|---|
| Kicker, Heading, Subheading | "Find your scent", "Shop by scent", "Every candle, soap and melt belongs to one scent family…" | The section heading |
| Heading alignment | Centered | Centered or Left |
| Collection | Empty | The collection the family links open, filtered by family. Blank opens all products. |
| Filter metafield | custom.scent_family | The metafield your Search & Discovery scent filter uses |
| Tiles per row on desktop | 6 | 3, 4 or 6 (three across on tablets). On phones the tiles are one row that scrolls sideways. |
| Show shop link | On | The "Shop woody" line under each tile |
| Background | Page | Page, Band or Paper |
Add up to twelve Scent family blocks, one per tile:
| Setting | What it does |
|---|---|
| Family | The filter value, exactly as in the product metafield, such as Woody. It also picks the tile's color and drawing. |
| Display name | The name on the tile, if it should differ from the family ("Woods and resins") |
| Description | One short line, such as "Cedar, oud and vetiver" |
| Swatch color | Replaces the family's color for this tile (blank uses Theme settings › Scent) |
| Image | Your ingredient or product photo in the well (blank shows the family's drawing) |
| Collection | Opened instead of the filtered collection |
| Link | Opens instead of either |
A tile links, in this order, to its own Link, its own Collection, or the section's Collection (all products when blank) filtered by its family. A tile needs a Family, a Display name, a Collection or a Link to show. With no family or display name, its name is the collection's title, or the last part of the link ("/collections/woody-candles" reads "Woody candles"). The presets ship six tiles (Lather's and Vesper's with their own families and words). With no tiles, the theme editor shows six sample families; shoppers see nothing.
No Search & Discovery filter? Until the filter exists, Shopify ignores the filter in the tile's link and shows the whole collection. If you don't want to set up the filter, make one collection per family (a manual collection, or an automated one with a condition such as a product tag or, where Shopify offers it for your definition, the Scent family metafield equal to Woody) and choose it in each tile's Collection.
Scent chips on collection pages
The chips appear above the toolbar on every collection and search page whose results include the scent filter, with Enable filtering on in the Collection or Search section. Each chip shows the family's dot, name and how many products in the current results have it; families with no products there are hidden. All scents clears the scent filter. On phones the chips are one row that scrolls sideways. The rest of your filters stay in the toolbar (chapter 13).