Sections

In the theme editor, click Add section to add any of the sections below to a page. Most sections share these settings:

• Background: Page, Quiet ground, Colour block, Second colour block or Dark band. On a colour block or the band, the section's text, buttons and dots switch to that ground's own colours, so they always read. A section on the same background as the one above starts closer to it, so the two join into one band. A section's own default is in its table.
• The section marker: the "dose strip", three small dots in a rounded track before the eyebrow. Show the section marker (on) and Filled marker dots (0 to 3; shows while the marker is on) set how many of the three are filled. The presets vary the count down the page, so it reads like a day ticking along. Eyebrow is the small line beside the marker.

Text settings show their sample words in brackets. Change every one of them.

Hero

The page's opening. In the Shelf layout it's your headline on the page with a colour stage beside it, where your products stand on a white shelf with small floating cards around them. It can go on any page, and is usually first on the home page.

Under Stage (hidden with Minimal):

Under Shelf products (hidden with Minimal):

Under Dose card (the small card at the top left of the stage; hidden with Minimal): Icon (Moon (sleep) by default, or None, Sun (immunity), Clock, Bolt (energy), Leaf (vegan), Dumbbell (strength), Drop (hydration) or Repeat), Label ("Tonight"), Value ("2 gummies") and Dots after the value (2, from 0 to 4: filled dose dots, one per gummy or capsule; 0 hides them). Leave the label and value blank to hide the card.

Under Supply card (at the right of the stage): Label ("This bottle lasts"), Value ("30 days") and Days in the mini calendar (30, from 0 to 30: one dot per day, ten to a row). Leave the label and value blank to hide the card.

Under Caption card (at the bottom left of the stage): Product (the product's image on its goal colour, with its name, linking to it), Title ("Wind-down gummies") and Line under the title ("2 a night · from $28.90"; blank shows the product's price), and Link, which shows when no product is chosen. The cards are words you type, not live data, so keep them true.

Without images, the shelf shows the theme's sample bottles, so a fresh install never shows a broken picture. On phones the text goes first and the stage follows, shorter, with the dose card but without the supply and caption cards.

Goal finder

Goal tiles and the three-question quiz that builds a starter stack. Chapter 9 covers every setting.

Featured collection

A row of products. In the presets it's "Best sellers", with goal chips that filter the row in place.

The chips look through the collection's first products (three times Products to show, 24 at most) and need no app.

Featured product

One product with its buy box, on any page.

Its blocks are Tags, Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Supply calculator, Supplement facts, Ingredients and evidence and Product link ("View details"), plus the general blocks in chapter 5 and app blocks. A new Featured product starts with tags, title, price, inventory, variant picker, description, buy buttons and the supply calculator.

Fact row

Three or four short facts on the dark band, each with an icon in a ring of dots. In the Dose preset it's "Why our gummies".

Add up to six Fact blocks, each with an Icon (Check mark by default; the list has evidence icons such as Flask (tested), Leaf (vegan) and Sprout (organic), shop icons such as Truck and Repeat, and the goal and format icons), a Heading ("Heading"), a Text and a Link (shows once there's a heading). State only terms your store actually offers, and only facts you can show proof for: "organic", "vegan" and "tested for banned substances" are claims with rules of their own in many countries (chapter 12).

The lead column and the facts sit four across from 990px; on phones each fact is a row with its ring at the left.

Supply promo

The "Never run out" band: your words, the sum ("60 gummies ÷ 2 a day = 30 days") and three ticks on the left, and on the right a white card with the supply calculator for one product and its own subscribe button. Chapter 10 covers every setting.

Ingredient spotlight

Four or so of your key ingredients as cards, each on a goal colour, with an evidence row under them. In the presets it's "What's inside, and why it's there".

Add up to eight Ingredient blocks:

Four cards sit across from 990px, two below. The product page's own ingredient cards come from each product's custom.key_ingredients instead (chapter 11).

Image with text

Your picture in a large rounded square beside your words. Background (Page), Image, Ground behind the image (Second colour block by default, or Colour block, Quiet ground or Goal colour 1 to 6; it shows behind a cut-out and while the image loads), Sample when no image (Powder tub; drawn by the theme until you pick an image, on the storefront too), Media position (Left or Right), the section marker, Eyebrow, Heading and Body ("Our story", "From our shelf to yours"), and Button label ("Our story") with its Link (with no link, the home page).

Slideshow

Slides that each show a stage with an image beside the words, on the home page, pages and collections. Up to six Slide blocks, each with an Image (a photo for the stage; without one, the theme's sample container stands on the shelf), Eyebrow, Heading ("Heading"), Text, Button label and Link (shows once there's a label).

Rich text and Testimonials

Your words. Layout (Text column, or Testimonial cards, which puts testimonial blocks three to a row, a sideways scroller on phones), Background, the section marker, Eyebrow, Heading, Text beside the heading, Link label and Link. It takes the general blocks in chapter 5.

In Add section it's listed twice: as Rich text, and as Testimonials, which starts in the Testimonial cards layout ("From the daily crew", with "4.8 out of 5 from 3,200 reviews. Every one from a real order." beside it) and three Testimonial blocks. Each testimonial is a white card with up to five stars, the Quote, a rule, and a line naming what was bought: a small thumbnail on a goal colour, the product name, and the reviewer ("Sam, Brisbane · 4th bottle") followed by a dot per bottle. Chapter 5 lists its settings.

Use real words from real customers, and only a rating you can show. The presets' testimonials and rating are samples (chapter 12).

Starter stacks

Ready-made stacks you sell as one bundle product, such as "The sleep stack". Background, the section marker, Eyebrow ("Starter stacks"), Heading ("Stacks that work together") and Text beside the heading. With no blocks, shoppers see nothing. Stacks sit three to a row on large screens; one or two share the whole row, with the picture beside the words.

Add a Starter stack block for each:

Stack name ("The sleep stack"; blank uses the product's title), Product (a bundle product that holds the whole stack: its price is the stack total, and a compare-at price shows "Save $8.00"), Tagline, Products in the stack (one per line, "Wind-down gummies", "Magnesium glycinate": words only, each with a dose dot in the stack total), Image ground (Goal colour 1 to 6) and Button label ("Add stack to bag").

The button adds that one bundle product, so create the stack as a product of its own first (Shopify's free Shopify Bundles app can build one from your products). Until you choose a product, the card shows the name, tagline and list over a sample drawing, with no price and no button. To let shoppers build their own stack from separate products, use the Goal finder's quiz (chapter 9).

Shop the shelf

A photo of a shelf, a kitchen counter or a bathroom cabinet with numbered hotspots that open a small card. The same details are listed under the image, so phone shoppers and keyboard users get them too. The image is shown uncropped, at its own shape, so hotspots stay on the things they mark at every screen size. Without a photo, the theme's sample shelf stands in.

The section has Background, Image, the section marker, Eyebrow ("Shop the shelf"), Heading ("What's on our shelf") and Text beside the heading ("Tap a product to see what it is and how much it costs."). Add up to 20 Hotspot blocks:

As seen in

Press mentions and stockist logos, up to 12. Background, Heading ("As seen in"), Logo colours (Monochrome by default, or Original), Logo height (36px, from 24 to 96px in steps of 4) and Layout on mobile (Wrap or Scroll).

Each Logo has an Image, a Company name, a Link and a Quote. Monochrome turns each logo into one flat colour that suits the palette, so use logos with transparent backgrounds. A logo without a name isn't shown to shoppers. Screen readers read the name as the logo. Show only coverage and stockists you actually have.

Blog posts

Your newest articles. Background, the section marker, Eyebrow ("Journal"), Heading ("Routine notes"), Link label ("Read the journal"), Link, Blog (shows its newest articles and adds a link to it), Articles to show (3, from 2 to 12; shows while Articles is empty) and Articles (overrides the blog: they appear in the order you pick them). With no blog and no articles chosen, shoppers see nothing.

Newsletter

An email sign-up on a colour tile with the dot grid in its corner.

Background (Page or Quiet ground, round the tile), Block colour (Colour block, Second colour block or Dark band: the tile itself), the section marker (3 dots), Eyebrow ("The newsletter"), Heading ("Small habits, one email a month"), Body ("New flavours, routine ideas and a heads-up before anything sells out."), Button label ("Sign me up") and Small print ("One email a month. Unsubscribe any time.").

Addresses go to Customers in Shopify admin, tagged newsletter and subscribed to email marketing. The theme doesn't send anything or create discount codes itself, so promise only what you'll send from Shopify Email or your own email tool.

FAQ

Questions and answers, with one Collapsible row block each (chapter 5). Background, the section marker, Eyebrow ("Questions"), Heading ("Questions, answered"), Body ("Can't find it here? Our team answers every message within one working day."), Link label ("Contact us"; a link under the text, such as your contact page) and Link. The heading sits on the left and the questions on the right; on phones they stack. Each row opens with a plus in a small square that turns into a minus.

Keep answers to facts about your products and your shop (chapter 12).

Collections grid

Your collections as goal-coloured tiles, on the collections list page (/collections). It can't be added to other pages.

Eyebrow ("Shop"), Heading ("Every shelf"), Body, Collections (leave empty to list every collection) and Collections per page (12, from 4 to 24 in steps of 2, with page numbers under the tiles).

Each tile shows the collection's image on a goal colour (its own when the collection's title is in Goal names), a goal icon when the title names a goal such as Sleep or Energy, the title and the product count.

Product recommendations

Product pages only. A row of cards under the product, "Goes well with" in the presets.

The section marker (3 dots), Eyebrow ("Build your stack"), Heading ("Goes well with"), Link label and Link, Recommendation type (Related products, which are similar, or Complementary products, which pair with this one) and Products to show (4, from 2 to 10).

Shopify works out related products by itself once it has order history. Complementary products are ones you choose in the Search & Discovery app: the magnesium that goes with the sleep gummies, the shaker that goes with the protein.

Facts and ingredients

Product pages only. The band under the buy box that holds the Supplement facts panel (chapter 8) in a column at the left, and the section's own blocks beside it: Ingredients and evidence (chapter 11) in the presets, and any general block or app block you add, such as a Collapsible row. Under 990px they stack, the facts first.

The facts panel is fixed in this section: you can't remove or move it, but you can select it to change its settings. Each side hides on its own: a product without facts gives the blocks the whole width, and with neither the section shows nothing (in the theme editor, a note says so).

Quick order list

Product pages only: see B2B in chapter 6.

Section and Custom Liquid

Section is an empty container: fill it with any blocks in chapter 5. Custom Liquid takes Liquid code, such as an app snippet.

Sections that belong to a template

These can't be added, but you'll see them when you open their template in the editor.

Compare

Shoppers tick Compare on up to three cards and see them side by side. To turn it on:

1. Create a page in Online Store › Pages and set its Theme template to page.compare.
2. In Theme settings › Product cards, turn on Show compare checkbox and choose the page as Comparison page.

The table shows each product's price and availability, then the supply rows: Servings (custom.servings), Servings a day (custom.daily_servings), Format (custom.format) and Price per day (the price × servings a day ÷ servings), and then the rows of its Specifications block. A product without a value leaves that cell empty, and Show only differences hides the rows where the products agree. In the theme editor, the first product in your catalogue previews the rows.