Moon phase

Many of your shoppers plan by the moon: an intention at the new moon, stones charged at the full moon, a cleanse as it wanes. Altar shows tonight's moon, live, and the products that go with it. The Moon phase section draws today's moon as a disc lit exactly as it is tonight, with the phase name, how much of it is lit and the dates of the next new and full moon in the shopper's own time zone; beside it, "For this moon" shows the products from the collection you chose for the part of the cycle the moon is in. The same moon appears in the header, the announcement bar, the product page, the newsletter and your blog's dates.

What shoppers see

On computers the section has two columns. On the left, on the night band:

• The moon: a disc in the Lit part of the moon color, lit to tonight's exact shape, inside a fine orbit ring with eight small dots for the principal phases and a small star on the orbit at tonight's place in the cycle.
• The phase name in the heading font ("Last quarter"), and under it how much is lit and which way it's going ("41% lit · waning").
• Next new moon and Next full moon, side by side ("Tue 10 Nov", "Wed 25 Nov"), in the shopper's time zone and their browser's date words.

On the right, For this moon: the section's eyebrow ("Tonight's moon"), then the heading, text and products of the Phase group block for the part of the cycle the moon is in tonight, and the block's link. On phones and tablets the moon comes first and the products follow, in a row shoppers swipe.

How Altar works out the moon

Altar calculates the moon in the shopper's browser, from a reference new moon (6 January 2000, 18:14 UTC) and the mean length of the moon's cycle, the synodic month of 29.530588853 days. It needs no app, no API and no internet service: the moon's age is the time since that new moon, divided by the month, and from the age come the phase, how much is lit and the next new and full moons. Your store's server does the same sum when it builds the page, so the phase name and the right products are there before the script runs (and with JavaScript off); the browser then checks it against the shopper's own clock and swaps the products only if the moon has moved into another part of the cycle where the shopper is.

How accurate it is. The real moon runs a little ahead of or behind its average month, so a mean calculation is close, not exact:

• The phase is within about a day of published moon tables.
• The next new moon and next full moon dates can land a day late (or, rarely, early) compared with a published table, especially for shoppers near midnight in their time zone.
• How much is lit can read a few points off near the first and last quarters, where it changes fastest.

That is close enough for planning a ritual, and the same for every shopper. If you announce an exact full moon time in a newsletter or a sale, take it from a published table.

Which phase name shows. Altar names the nearest of the eight principal phases: New moon, Waxing crescent, First quarter, Waxing gibbous, Full moon, Waning gibbous, Last quarter and Waning crescent. Each name covers about 3.7 days, so "Full moon" shows for about a day and three-quarters either side of the exact full moon, and "Last quarter" from shortly before to shortly after it. A table that names a quarter only on its exact day will call the days around it a crescent or gibbous.

Northern and southern view

From the southern hemisphere the moon looks mirrored: a waxing moon is lit on the left, not the right. Theme settings › Crystals and rituals › Moon view decides how Altar draws it:

• Auto (default): from the shopper's time zone. Every time zone whose city lies south of the equator gets the southern view: Australia, New Zealand, the southern Pacific, Indonesia and Timor-Leste, Peru, Bolivia, Ecuador, Chile, Argentina, Uruguay, Paraguay, all of Brazil but Roraima, Africa south of the equator (from Kenya, the Congo and Angola down), Madagascar, Mauritius, Réunion and the other southern islands, and Antarctica. Everyone else sees the northern view.
• Northern hemisphere or Southern hemisphere: the same view for every shopper, whatever their time zone.

The phase name, the percentage and the dates are the same in both views; only the drawing is mirrored. Before the script runs, and with JavaScript off, the small moons in the header and announcement bar draw the northern view under Auto.

Phase groups: products for this moon

The section has one Phase group block per part of the cycle, and shows the one the moon is in tonight:

Each block's settings:

To set up products for each moon:

1. In admin, go to Products › Collections and create four collections, one per group, such as "For the new moon", "For the waxing moon", "For the full moon" and "For the waning moon" (the presets look for the handles for-the-new-moon, for-the-waxing-moon, for-the-full-moon and for-the-waning-moon). Add the products that suit each: intention candles and journals for the new moon, abundance stones for the waxing moon, charging plates and selenite for the full moon, cleansing bundles and smoky quartz for the waning moon. A product can be in more than one.
2. In the theme editor, open the Moon phase section and select each Phase group block. Selecting a block shows its group in the editor, whatever the moon is doing tonight, so you can check all four.
3. Choose the block's Collection, and rewrite its Heading, Text and Link label in your voice.

Keep one block for each group. A group with no block shows just the eyebrow while the moon is in it; a block with no collection shows no products (the theme editor shows sample cards tagged Sample). If you add two blocks for the same group, the first is used.

The section's settings

The section never shifts the page as it loads: the moon's place is kept with a plain disc, and the lines for the percentage and dates are held at their height until the script fills them. The moon then fades in, at once for visitors who prefer reduced motion. Nothing in it moves after that.

The moon elsewhere

• The header's moon pill and the announcement bar's badge (chapter 3) show tonight's moon and its name ("Last quarter, 41% lit" in the bar). Both lead to Theme settings › Crystals and rituals › Moon link, or to /#moon when it's blank. If you move the Moon phase section off your home page, for example onto a page with the page.moon template, set Moon link to that page (/pages/moon).
• The hero's moon orbit (Hero section, Moon orbit layout) rings your image with the eight phases and lights tonight's in the accent.
• The Moon note block on the product page: a small night-band card with a moon, "Tonight: Last quarter." and a line for the current group, from its New moon text, Waxing text, Full moon text and Waning text. In a text, [full] and [new] become the date of the next full or new moon in the shopper's time zone ("Charge it under the full moon on Wednesday 25 November."). Leave a text blank to hide the note while the moon is in that group. Its texts show on every product that uses the template, so keep them general, as the presets' are (each preset has its own: stones for Altar, herbs and candles for Apothecary, spreads for Arcana).
• The newsletter's next moon (Show the next moon, on): "Next note: new moon, Tuesday 10 November.", whichever of the next new or full moon comes first.
• Blog dates (Show the moon on post dates, on in Blog posts, Blog and the article's Byline): a small moon at its phase on the day the article was published.

The moon page

The page.moon template (chapter 1) is a page built around the moon: the Moon phase section, then four scrolling rows, "For the new moon", "For the waxing moon", "For the full moon" and "For the waning moon", and a "How we work with the moon" text. Create a page called Moon in Online Store › Pages, choose the page.moon template, then choose a collection in each of its four Phase group blocks and in each of the four rows (the presets look for the same four handles as the home page's Moon phase section, below; a row without a collection shows placeholder cards in the theme editor and nothing to shoppers). Set Moon link to /pages/moon if you want the header's moon to lead there.