Shop by intention and sign

Your shoppers often know how they want to feel before they know which stone they want, and many shop by their sign. The Intention finder section gives them both ways in: a row of intention tarot cards (Calm, Protection, Love, Abundance, Clarity, or your own), and a zodiac wheel of all twelve signs with Find your sign, which works out a shopper's sign from their birthday. Every card and sign leads to the products that hold it, through two filters you add in Shopify's free Search & Discovery app, or, without them, to a collection you choose for each.

Add section offers it twice: Shop by intention (the cards, with five intentions) and Shop by sign (the wheel, on the night band, with the anchor sign so /#sign links jump to it). The Altar preset has both on the home page; Apothecary has the cards and Arcana both. The page.signs template (chapter 1) is a page with the wheel and an "About the signs" text.

Intention cards

Each Intention block is one card: a tall tarot card in the block's Card color, a Roman numeral (I, II, III…) in its top cartouche, a round moon-mask medallion in the middle with your image ringed by fine rays and four small stars, and the intention's name on a nameplate at the card's foot, with a short line under the card ("Amethyst, lepidolite and blue lace agate"). A card without an image shows a hand-drawn constellation (a key, a chalice or a serpent, in turn) on a deeper shade of its color. The whole card is one link, and screen readers hear "Calm. Amethyst, lepidolite and blue lace agate". On computers they stand five to a row; on phones they scroll in a row that snaps card by card.

With no Intention blocks, shoppers see nothing; the theme editor shows five sample cards tagged Sample.

The zodiac wheel

With Layout set to Zodiac wheel, the section shows its heading and Find your sign on the left and the wheel on the right: twelve sectors with Aries at the top, running clockwise, each with its glyph and name, all in fine gold lines on the night band. Every sector is a link and a keyboard stop. The centre of the wheel shows the current season of the sun ("Scorpio season") with that sign's constellation, and that sign's sector is picked out. On phones the wheel is drawn small, for decoration, and the twelve signs become a three-by-four grid of tiles under it, which carry the links.

Find your sign is a date field (Birthday label: "Your birthday") and a button (Button label: "Find my sign"). It works out the sign from the day and month in the shopper's browser; the birthday is never sent anywhere. The year doesn't matter, so 29 February is Pisces. Then:

• the result card shows "You're a Scorpio", "23 Oct – 21 Nov · Water" and a Shop Scorpio link,
• the sign's sector (or tile, on phones) lights up and the centre of the wheel shows "Scorpio · Water",
• focus moves to the sign's link, and screen readers hear "You're a Scorpio, 23 October to 21 November."

An empty field shows "Enter your birthday to find your sign" and keeps focus in the field. Without JavaScript the date field stays hidden, and the wheel's links still work.

The signs' dates, which decide the cusps:

These are the usual published dates. The exact moment the sun changes sign moves by a day from year to year, so a shopper born on a cusp may read a different sign elsewhere.

The section's settings

Where the cards and signs lead

The finder collection, filtered (the default). Each card leads to Theme settings › Crystals and rituals › Collection for intention and sign links (all products when it's blank) with a filter added: Calm goes to /collections/crystals?filter.p.m.custom.intentions=Calm, and Scorpio to /collections/crystals?filter.p.m.custom.zodiac=Scorpio. The value is the card's Filter value, else its Name; for a sign it is the sign's English name with a capital letter, whatever language the store is shown in. The intention chips on the product page and in the properties panel lead the same way. For this to filter anything, the two filters must exist in Search & Discovery (below): until they do, Shopify ignores the filter and shows the whole collection.

A collection per intention or sign. Each card leads to its block's Collection, and each sign to its collection under Sign collections. Use this if you'd rather not set up filters, or if you already keep collections such as "Crystals for calm" or "Scorpio stones". A sign with no collection in this mode shows on the wheel but isn't a link.

In both modes a block's Link, when set, wins over everything else.

Set up the Intentions and Zodiac filters

1. Create the custom.intentions and custom.zodiac definitions (chapter 7) and fill them on your products.
2. Install Shopify's free Search & Discovery app from the Shopify App Store and open it.
3. Go to Filters › Add filter, choose Product metafield, pick your Intentions definition (custom.intentions) and save. Add a second filter from Zodiac signs (custom.zodiac). You can name the filters as you like ("Intention", "Sign"): Altar finds them by their metafield, not their name.
4. New filters can take a little while to appear while Shopify indexes your products.
5. Choose your finder collection in Theme settings › Crystals and rituals › Collection for intention and sign links: a collection that holds every product with intentions or signs, such as Crystals, or leave it blank for all products.

Once the filters exist, collection and search pages also show intention chips above the grid ("All intentions", "Calm 18", "Protection 11"…), and, with the Collection section's Show zodiac sign chips on, a row of sign chips with their glyphs (chapter 13).