Sections
Chapter 4 of the Altar user guide.
Add a section in the theme editor with Add section. Most sections share a left-aligned section heading: an Eyebrow after the small phase row of moons, a Heading in the heading font, a Lede (or Text, or Body) under it and, where there's a Link label and Link, an underlined text link with a small star at the right ("Shop all"). The eyebrow's phase row only shows with an eyebrow, and the link only with both a label and an address. Most sections also have a Color scheme (Page, Surface or Night band, chapter 2), and some have an Anchor: a word such as kits that lets a link like /#kits jump to the section.
Home page and content sections
| Section | What it's for | Key settings |
|---|---|---|
| Hero | The big opening block (home page only) | Layout: Moon orbit (your image in a circular moon mask ringed by the eight phases of the moon, with tonight's phase lit in the accent) or Wide image (the image in a wide 16:9 tarot frame). Media position (Left or Right, default Right), Image, Eyebrow ("Hand-picked in small batches"), Heading ("Stones for every intention"; left blank, your shop name stands in), Body, Primary button label ("Shop crystals") and link (blank: all products), Secondary button label ("Find your sign") and link. Under Caption card: Caption title (a small card over the image naming what's in it; blank hides it), Caption text, and a Link label and Link. Under Section: Show the starfield (on: a scatter of faint stars behind the copy), Color scheme (Page) and Anchor. Up to three Trust tick blocks (Icon: Star, Moon, Gift, Leaf, Flame or Sun; Text: "Ethically sourced") show in a row under the buttons. |
| Slideshow | Several heroes in turn (home, page and collection templates) | Image frame: Moon with orbit (default) or Tarot card 16:9, Media position (Left or Right, default Right), Rotate slides automatically (off), Change slides every (7s, 5 to 10) and Color scheme. Up to six Slide blocks: Image, Eyebrow, Heading, Text, Primary button label and link, Secondary button label and link. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| Moon phase | Tonight's moon, with products for this moon | Chapter 10 |
| Intention finder | Intention tarot cards, or the zodiac wheel with Find your sign | Chapter 9. Add section offers Shop by intention and Shop by sign. |
| Featured collection | A grid or scrolling row of product cards | Eyebrow ("Loved this month"), Heading ("Best sellers"), Lede, Link label ("Shop all") and Link (blank links to the chosen collection), Collection, Products to show (8, 4 to 12), Layout (Grid or Scrolling row, a row of cards shoppers swipe or scroll), Columns on desktop (3 or 4, default 4, Grid only) and Color scheme. With no collection chosen, the section shows placeholder cards in the theme editor and nothing to shoppers; a chosen collection with no products shows nothing too. |
| Featured product | One product with its buy box, or a one-of-a-kind product's pieces | Product, Layout: Product details (the gallery and buy box) or Pieces showcase (the product's pieces as small tarot cards, chapter 11; a product without a piece option shows its details instead). For the showcase: Eyebrow ("One of a kind"), Heading ("Every stone is one of a kind. Choose yours."), Text and Button label ("Choose your piece"). Enable image zoom (on) and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Product link, Crystal properties, Trust rows, Moon note, the theme blocks of chapter 5 and app blocks. With no product chosen, shoppers see nothing (the theme editor shows a placeholder). |
| Image with text | A story beside a photo, with numbered steps | Image, Image frame (Moon mask, Tarot card or None), Media position (Left or Right, default Right), Eyebrow ("Our sourcing"), Heading ("From small mines to your altar"), Body, Link label and Link, Link style (Link or Button), Color scheme and Anchor. Up to six Step blocks (Text) are numbered I, II, III in order; reordering them renumbers them. |
| Ritual kits | Prebuilt kits as wide tarot cards | Eyebrow ("Ritual kits"), Heading ("Everything for one ritual"), Body, Link label, Link, Anchor and Color scheme. Each Ritual kit block is one product you sell as a set: Product, Heading (shown instead of the product's title), Eyebrow, Tagline, Kit contents (one item per line, or a metafield as a dynamic source; shown as a list with small stars) and Button label ("Add kit to bag"), which puts the kit's product in the bag without leaving the page. A kit with a compare-at price shows a "Save" badge. A kit block with no product chosen shows only in the theme editor, and with no kit that has a product, shoppers see nothing. |
| Shop the altar | A photo with numbered hotspots on the pieces in it | Image (shown uncropped, at its own shape, so hotspots stay on the parts they mark at every screen size), Eyebrow ("Shop the altar"), Heading ("Everything on our altar this moon"), Body and Color scheme. Up to twenty Hotspot blocks: Label ("Piece name"), Horizontal position and Vertical position (50%, 0 to 100), Product (optional: shows the product's price and stock, and links to it) and Detail (a short line, such as "Brass, 12 cm across"; connect a metafield of the chosen product as a dynamic source). |
| Icon row | Trust icons, or numbered steps | Eyebrow, Heading, Style (Icons, or Numbered steps: a Roman numeral in each circle in place of the icon), Columns on mobile (1 column or 2 columns, default 2) and Color scheme. Up to six Item blocks: Icon (None, Star, Sparkle, Moon, Sun, Leaf, Flame, Water drop, Not water safe, Gift, Hand, Heart, Pin, Truck, Return, Shield, Envelope, Chat, Clock, Store, Lock, Card, Globe or Check mark), Heading, Text and Link. State only terms your store actually offers. |
| As seen in | Up to twelve press or stockist logos | Eyebrow, Heading ("As seen in"), Logo colors (Monochrome, the default: every logo in one flat color that suits the palette; or Original. Use logos with transparent backgrounds), Logo height (40px, 24 to 96), Layout on mobile (Wrap or Scroll) and Color scheme. Each Logo needs a Company name (read by screen readers; a logo without a name isn't shown), with an Image, an optional Link and Quote. |
| Rich text | Free text and buttons, or testimonial cards | Eyebrow, Heading, Lede, Link label and Link, Heading alignment (Left or Centre), Color scheme (Surface) and Anchor. Add Eyebrow, Heading, Text, Button and Quote blocks (chapter 5): quotes sit three across as cards (phones swipe through them), and every other block spans the row. Add section offers Testimonials ("Kind words from the circle", three quotes) and Rich text. Replace the sample quotes, and any "4.9 out of 5" eyebrow, with real ones. |
| FAQ | Questions and answers | Eyebrow ("Questions"), Heading ("Before you ask"), Body, Link label and Link, Open the first question (on) and Color scheme. Add Collapsible row blocks (chapter 5), one per question. How to cleanse a stone, whether a piece is the one in the photo, which deck to start with and returns on opened decks are what your shoppers ask most. |
| Newsletter | An email sign-up on the night band | Heading ("Moon notes"), Body ("An email at every new and full moon…"), Field placeholder ("Your email"), Button label ("Join moon notes"), Show the next moon (on: "Next note: new moon, Tuesday 10 November.", whichever of the next new or full moon comes first, in the shopper's time zone), Color scheme (Night band) and Anchor. Sign-ups are tagged newsletter. |
| Blog posts | Your latest articles | Eyebrow ("From the journal"), Heading ("Moon notes"), Lede, Link label ("All articles") and Link (blank links to the chosen blog), Blog (shows its newest articles), Articles to show (3, 2 to 12, when no articles are picked), Articles (picked by hand, in your order, instead of the blog), Show the moon on post dates (on: a small moon at that day's phase before each date) and Color scheme |
| Section | An empty section you fill with blocks | Color scheme. Takes any theme block and app blocks. |
| Custom Liquid | App snippets or your own code | Liquid and Color scheme |
Note
After a shopper signs up, the newsletter says "You're on the list. Your first note arrives at the next new moon." The theme doesn't send anything itself: "an email at every new and full moon" is a promise you keep. Write the emails in Marketing (Shopify Email or your email app) and send them to customers who accept marketing, or change the heading and body. To change the thank-you line, go to Online Store › Themes › … › Edit default theme content and search for "first note".
Sections are separated by space and a change of ground rather than by boxes: Featured collection, Image with text and Rich text open with a small star rule on the Page ground, and two Page sections in a row share one gap rather than doubling it.
Product page sections
| Section | What it's for |
|---|---|
| Product | The gallery, the buy box, and under the gallery the Crystal properties panel and two collapsible rows (chapter 6) |
| Product recommendations | A row of cards. Eyebrow ("For the same intention"), Heading ("Pairs well with"), Link label and Link, Recommendation type (Related products, the default, or Complementary products, the ones you pair with this one in the Search & Discovery app), Products to show (4, 2 to 10) and Color scheme. |
| Quick order list | Product templates only. For B2B customers and stockists: every variant of a product in a table with quantity fields. Heading ("Quick order"), Variants per page (25, 10 to 50) and Show SKU (on). |
To pair products for Complementary products (the selenite plate that goes with a cluster, the cloth that goes with a deck): install Shopify's free Search & Discovery app, open Recommendations, search for a product and add its complementary products. They can take a little while to appear after you save.
Page sections
- Page: your page's content, with Show breadcrumbs, an Eyebrow and Fact blocks (a Label and a Value, such as Origin: Minas Gerais) under a Facts heading ("At a glance").
- Contact form: Show breadcrumbs, Eyebrow ("Write to us") and Show order number field (on), with Menu column blocks (Heading, "Quick links", Detail and Menu) and Text blocks (Heading, Detail and Text) beside the form. The presets' "Before you write" block asks for an order number.
- Collections grid (the collections list page): Eyebrow ("Every collection"), Heading ("Collections"), Body, Collections (leave it empty to list every collection), Collections per page (12, 4 to 24) with page numbers, Tile style (Moon: each collection's image in a moon mask with an orbit, the title under it in the heading font and the product count; or Tarot card: the image in a medallion on a card of Card colour,
#2f3f78by default) and Color scheme. - Collection and Search: chapter 13. Blog: Show breadcrumbs, Body, Show featured entry (on), Show tags (on), Show the moon on post dates (on) and Articles per page (10, 6 to 30). Article: blocks for breadcrumb, title, byline (Show author, on, and Show the moon on post dates, on), featured image, content, tags and share, plus the theme blocks of chapter 5.
- 404 page: Heading ("Page not found"), Body ("This page has drifted out of orbit. Head back home or start with an intention."), Show the requested address (on) and Color scheme.
- Password: your "opening soon" page, with Heading ("Opening soon"), Body, Show newsletter form (on) and Color scheme.
The moon on post dates is the moon on the day the article was published, not tonight's: a small record of the sky when you wrote it.
Compare
Turn on Show compare checkbox in Theme settings › Product cards, create a page with the page.compare template and choose it as the Comparison page. Shoppers tick up to three products; a tray at the bottom of the screen shows their thumbnails and a Compare now button. The Compare section (Show breadcrumbs) shows them side by side: price and availability, then the rows of its Spec table block. Add Spec row blocks to it to compare your metafields, such as custom.origin or custom.element (chapter 6). In the theme editor, the first product in your catalog previews the rows.