Theme settings
Chapter 2 of the Altar user guide.
Open the theme editor and click the gear icon (Theme settings). The groups below appear in this order.
Colors
Color palette sets the storefront's sixteen colors at once:
| Palette | Page | Card faces | Fields and wells | Accent | Linework | Night band | Feels like |
|---|---|---|---|---|---|---|---|
| Midnight (default) | Deep indigo #13152f | #1b1e40 | #242853 | Antique gold #d9b46c, with indigo labels | Deep gold #bf9d5e | Night #0a0b1d, with a gold accent | Crystals and a witchy shop (the Altar preset). A dark palette. |
| Herbarium | Herbarium paper #ece6d2 | Vellum #f7f3e6 | #e0d8bf | Oxblood #7b2431, with vellum labels | Brass #80622c | Walnut #2b1f18, with a pale brass accent | Herbs, candles and botanicals (the Apothecary preset). Moss-black ink. |
| Nebula | Deep plum #1d1027 | Aubergine #271733 | #321f41 | Lilac #c9a9f5, with plum labels | Starlight #ae9cc8 | Plum night #120817, with a lilac accent | Tarot and astrology (the Arcana preset). A dark palette. |
| Moonstone | Milky pearl #efedf1 | #faf9fb | #e1dee7 | Slate violet #514a79, with white labels | Pewter #6e7090 | Slate night #1f1d30, with a periwinkle accent | Any of the three, pale and quiet. No preset. |
All four meet WCAG AA contrast for text (4.5:1) and controls (3:1) on every ground the theme uses, including the night band, the selected piece card and the Sale badge. In the dark palettes, sale prices and errors are coral (Midnight #ff9e92) or rose (Nebula #ffa1a8), so a sale never reads as the gold or lilac accent; errors always carry an icon and words too.
Below the palette, each color can be set on its own. A color you set overrides the palette until you clear it (the field then reads "From palette"). The groups and what each color paints in Altar:
| Group | Color | What it paints |
|---|---|---|
| Page | Page background | The page, the header and the hero |
| Page | Body text | Body copy, option values, the values in the crystal properties panel (intentions, chakra names, signs, element) and the navigation |
| Page | Headings, names and prices | Headings, product names, the wordmark, prices and the chosen piece; also the border of secondary buttons, the fill of a selected option pill and the ring of a selected chip |
| Page | Secondary text | Introductions, meta lines, helper text, property labels, a piece's weight and size, "Found a home", chip text and eyebrows |
| Page | Faint text | Compare-at prices, placeholders, counters and struck-through sold-out pills |
| Card faces and fields | Card faces and drawers | Product cards, piece cards, the properties panel, testimonial cards, drawers, dialogs and the mega menu |
| Card faces and fields | Fields and image wells | Fields, steppers and the ground behind images while they load |
| Controls and accent | Control borders | The borders of fields, selects, option pills, steppers, checkboxes, radios, the Find your sign date field and round icon buttons. Keep it at 3:1 or more against the page, card faces and fields. |
| Controls and accent | Accent | Primary buttons, text links, focus rings, the selected piece's ring, checked radios and boxes, rating stars, the current menu link's rule, the bag count, a hovered card's outer rule and tonight's moon on the hero's orbit |
| Controls and accent | Text on accent buttons | Labels on primary buttons, the bag count and the dot of a checked radio |
| Controls and accent | Sale and errors | Sale prices and the Save badge, error messages, and the rule and icon of the care warning (chapter 8) |
| Linework | Linework | The fine lines: tarot card rules, the zodiac wheel, moon orbits, constellations, the phase row, star rules, the borders of link chips and the header's double rule |
| Night band | Night band | The darkest ground: the announcement bar, the moon phase, the zodiac wheel, the newsletter, the footer and any section set to Night band |
| Night band | Text on the night band | Text on the night band (its secondary text, field borders and the moon's dark side are mixed from it) |
| Night band | Accent on the night band | Buttons, links, the focus ring, the wheel's lines, the moon's orbit and the phase name on the night band |
| Night band | Lit part of the moon | The lit part of every moon drawing: the moon phase disc, the header's moon pill, the announcement bar's badge and the moons on blog dates |
Overriding a color can lower contrast. Colors you set are yours to check: test text on your new color with a contrast checker before you publish.
Most sections also have a Color scheme: Page (the page color), Surface (the fields and wells color as a ground) or Night band (the darkest ground). Everything inside a section on the night band, including buttons, fields, links and focus rings, switches to the night band's colors. Even the light palettes keep a dark night band, so the moon, the zodiac wheel, the newsletter and the footer always sit under a night sky.
Typography
| Setting | Default | Notes |
|---|---|---|
| Heading font | Imbue | Headings, the text logo, Roman numerals and the moon's phase name. Imbue has one weight and no italic, so headings never go bold or italic. |
| Body font | Crimson Pro | Everything you read and press: text, navigation, buttons, prices and labels. The theme loads regular, medium, semibold and italic. |
| Base text size | 18px (15 to 20) | Scales all text. Crimson Pro is small on its body, so 18 reads like a 16px sans serif. |
The presets use Imbue (Altar), Montagu Slab (Apothecary) and Oranienbaum (Arcana) for headings, all with Crimson Pro. Any font in Shopify's font library works. Montagu Slab and Oranienbaum are wider than Imbue, so Altar sets them a little smaller (78% and 82%) to keep headings the same height on the page; another heading font of weight 600 or more is set at 85%. Altar never fakes a bold or italic the font doesn't have, and all text is in sentence case: the theme never turns text into capitals. Running text uses Crimson Pro's old-style figures, the almanac detail; prices, weights, sizes, dates and counts use even, lining figures so they line up.
Layout
| Setting | Default | What it does |
|---|---|---|
| Page width | Medium | Narrow, Medium or Wide |
| Page margin | 64px (16 to 80) | The space at each side of the page on large screens. Tablets use at most 40px and phones 20px. |
Navigation, Brand and Motion
- Show back-to-top button (on): a round button that appears after shoppers scroll down one screen. Position: Left or Right (default). Pick the side opposite your chat button. It is mirrored for right-to-left languages.
- Brand: Use a custom logo (off: the shop name shows as a text wordmark in the heading font, after a small gold crescent and star), Logo, Logo width (180px, 80 to 320, with a custom logo) and Favicon (32 x 32px recommended).
- Motion and effects: cards lift on hover and the moon fades in. Nothing loops, and all motion follows the reduced motion setting on the visitor's device. Reveal sections on scroll (off): sections fade up once as they scroll into view.
Commerce
| Setting | Default | What it does |
|---|---|---|
| Free dispatch over | 0 (80 in all three presets) | Your store's real free-shipping threshold, in its currency. Above 0, the buy box adds "Free shipping over $80." under the add button, and the bag shows a progress line ("You're $12.00 away from free shipping", then "You've got free shipping."). Both only show to customers shopping in your store's currency. Set it to 0 unless you offer free shipping. |
| Show currency code | Off | Prints the currency code beside every price |
| Note field label | "Add a note or a gift message" | The label of the order note field in the bag drawer and on the cart page. Leave it blank to use "Order note". |
Product cards
Every product card is a tarot card: the photo inset inside a fine double rule, with its badge in the top cartouche and a small four-point star in the bottom one. Under the card come the product name (two lines at most), the rating, the "Only 3 left" line, up to three intention chips (chapter 8), the swatches, then the price with an Add (or Choose) button beside it. On devices with a mouse, a hovered card lifts a little and its outer rule brightens to the accent. A click anywhere on the card opens the product.
| Setting | Default | What it does |
|---|---|---|
| Card shape | Tarot 2:3 | Tarot 2:3 (tall), Portrait 3:4 or Square 1:1. Product pages use the same shape for their gallery. |
| Show quick view button | Off | Opens the product's media, options and buy buttons in a panel without leaving the page |
| Show quick add button | On | Products without options go straight to the bag. Products with options, a required subscription plan or a gift card recipient, and one-of-a-kind products (chapter 11), open quick view so the shopper can choose. |
| Show swatches | Off | Shows the values of the first option that has Shopify swatches, such as Color, under the card. Choosing one switches the card's photo and link. Swatches before "+" count: 5 (2 to 8). One-of-a-kind products never show swatches. |
| Show second image on hover | On | On devices with a mouse, shows the product's second image while the card is hovered or focused. Products with one image don't change. |
| Show compare checkbox | Off | Shoppers tick up to 3 products and see them side by side on the comparison page. Stays hidden until a page using the page.compare template is chosen as the Comparison page (chapter 4). |
| Comparison page | Empty | The page with the page.compare template |
Badges (the Badges heading in this group):
| Setting | Default | What it does |
|---|---|---|
| Show New for products published in the last | 30d (0 to 90) | Products published within this many days show the New badge. Products tagged new always show it; 0 uses the tag only. |
| Sale badge shows | Amount saved | Amount saved ("Save $6.00") or Percent saved ("−18%") |
| Show pre-order badge on cards | Off | A Pre-order badge on the card of a product whose variant keeps selling at zero stock, or is sold only with single-delivery purchase options (chapter 6). Turn it on when the Product section shows those as pre-orders. |
| Low stock threshold | 5 (1 to 20) | Tracked products with this many or fewer left (and that stop selling at 0) show "Only 3 left" on their card and in the product page's stock line. Never shown for one-of-a-kind pieces. |
The tarot card has one cartouche, so a card shows one badge, the first that applies in this order: Sold out, Save (a compare-at price above the price), One of a kind (a product with a piece option, chapter 11), New, Best seller (tagged best-seller) and Limited (tagged limited). Tags are matched without regard to capitals. The product page's gallery carries the same badge in its frame.
Crystals and rituals
The settings behind Altar's four signature features. Each is explained in its feature's chapter (8 to 11), and the metafields they read are in chapter 7.
| Setting | Default | What it does |
|---|---|---|
| Intentions and signs | ||
| Intention chips on cards | 3 (0 to 3) | Chips from the product's custom.intentions metafield under each card's name. Phones show at most two. Set 0 to hide them. |
| Collection for intention and sign links | Empty | Where intention chips, intention cards and zodiac signs lead, with the filter added. Leave it blank for all products. |
| Intentions filter | custom.intentions | The metafield behind the Intentions filter in Search & Discovery, as namespace.key (chapter 9) |
| Zodiac filter | custom.zodiac | The metafield behind the Zodiac filter, as namespace.key |
| Disclaimer | ||
| Show the disclaimer | On | Shown in the footer and under the trust rows on the product page (chapter 8) |
| Disclaimer text | "Crystals and rituals are spiritual practices, not a substitute for medical advice." | One short sentence |
| Pick your piece | ||
| Piece option names | Piece, Specimen | Options with these names show each value as a photo card, for one-of-a-kind stones. Separate names with commas (chapter 11). |
| Intuitively chosen value | Intuitively chosen | The option value that means "we'll choose for you". It shows last, as its own card. |
| Intuitively chosen line | "We'll choose one for you, by feel" | The line on that card |
| Sold piece label | "Found a home" | Shown on a sold piece |
| Moon | ||
| Moon view | Auto | Auto draws the moon as the shopper sees it, from their time zone; Northern hemisphere or Southern hemisphere fixes it (chapter 10) |
| Moon link | Empty | Where the moon in the header and the announcement bar leads. Leave it blank for the moon section on your home page (/#moon). |
Customer accounts and Social media
- Customer account menu (the default
customer-account-main-menu): links in the header account panel. Leave it empty to use the menu Shopify creates for customer accounts. - Social media: Instagram, TikTok, YouTube, Facebook, Pinterest, X, Threads and LinkedIn. Each link you add shows as a round icon in the footer.