# 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**, `#2f3f78` by 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.