Search and filters

Collection and search pages

The Collection section shows a banner (the title, the description and, with Show collection image, the collection's image), a toolbar and a grid of tarot cards. On computers and tablets the toolbar has one pill per filter, each opening a small panel of checkboxes, then the number of products and Sort by; on phones one Filter and sort pill opens the same controls in a drawer. Active filters show as small ringed chips with a × and Clear all. Filtering updates the results without reloading the page, and works without JavaScript too.

Altar draws two filters its own way, as chips above the toolbar rather than as filter pills:

• Intentions: when the results offer the filter whose metafield is Theme settings › Crystals and rituals › Intentions filter (custom.intentions), a row of chips shows above the products: All intentions, then one chip per intention with its count ("Calm 18", "Protection 11"). Choosing a chip filters the grid, and the chosen chip is ringed. Intentions with no products in the current results are left out. On phones the chips scroll in one row.
• Zodiac signs: with the Collection section's Show zodiac sign chips on (off by default), the Zodiac filter (custom.zodiac) gets its own row of chips the same way, each with its sign's glyph, after All signs.

Every other filter is a list of checkboxes with counts; price is From and To fields with Apply. Values with no products in the current results are greyed out.

The Collection section's settings: Show breadcrumbs (on), Show collection image (on), Show description (on), Enable filtering (on; set up filters in Shopify Search & Discovery), Enable sorting (on), Show zodiac sign chips (off: chips for the zodiac filter above the grid, beside the intention chips; needs a Zodiac filter in the Search & Discovery app), Show vendor (off) and Products per page (12, 8 to 36).

The Search section has Show breadcrumbs, Enable filtering and Enable sorting (all on) and Results per page (12, 8 to 36); with the Intentions filter set up, search results get the intention chips too. As shoppers type in the header's search, it shows matching products, collections, pages and articles, with a link to the full results.

Set up filters with Search & Discovery

Filters come from Shopify's free Search & Discovery app. Install it from the Shopify App Store, open it, go to Filters › Add filter, choose the source and save. New filters can take a little while to appear while Shopify indexes your products.

Intentions and Zodiac filters. Add a filter from the Intentions product metafield (custom.intentions) and one from Zodiac signs (custom.zodiac), as in chapter 9. They power the intention chips, the intention cards, the zodiac wheel and the chips on the product page, all at once. Altar recognises them by their metafield, so you can label them as you like.

Other good filters for a crystal, tarot or apothecary store: Chakras (custom.chakras) and Element (custom.element) from your metafields, Product type (Crystals, Tarot decks, Candles, Herbs), Price and Availability. A filter you add appears on every collection and on search results.

The same app sets the complementary products behind "Pairs well with" when its Recommendation type is Complementary products (chapter 4).