Sections

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

• Background: Page, Surface (the quiet band), Colour block A, Colour block B or Deep band. On a colour block or the band, the section's text and buttons switch to that ground's own colours, so they always read. A section on the same background as the one above drops its top space, so they join into one band. A section's own default is in its table.

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

Hero

The page's opening: a "bento" of colour tiles. It can go on any page, and is usually first on the home page.

Under Images (hidden with Minimal):

Under Fact (with Bento only): Fact heading ("Size swaps are always free"), Fact text ("Measure at home, then swap in the shop or by post within 60 days."), Fact link label ("How to measure"), Fact link (blank goes to all products) and Fact tile background (Deep band by default, or Accent, Colour block A, Colour block B or Surface). State only terms your store actually offers.

Without images, the image tiles show a simple line drawing on their colour, so a fresh install never shows a broken picture. On phones the text tile goes first, full width, with the buttons stacked; the big image follows, then the small image and the fact tile side by side (the fact's text is hidden there, so keep the heading meaningful on its own).

Pet profile

The home page's "Who are we shopping for?" panel: an inline form where shoppers add their pet, with a live name tag that follows what they type. Once a pet is saved it says "Shopping for Mabel", with Shop what fits Mabel and Edit Mabel. See chapter 8.

Collections grid

Your collections as colour tiles, on the home page, the collections list page and other pages.

For hand-picked tiles, add Collection blocks (up to 10): Collection, Title ("Collars and leads"; leave empty to use the collection's title), Image (leave empty to use the collection's image) and Link (leave empty to link to the collection). A tile with a title but no collection or link shows on plain colour and opens your list of all collections, so it shows before the collection exists. The presets' five tiles have no collection chosen, so choose one for each.

Tiles are squircles on colour block A, colour block B and the surface in turn, with the title and an arrow under each. Five sit across on a computer and three on a tablet; on phones they become a sideways row the shopper swipes.

Featured collection

A row of products. Eyebrow ("Best sellers"), Heading ("What the regulars buy"), Body, Collection, Products to show (8, from 2 to 12), Link label ("Shop all"; the link goes to the collection), Show the fit switch (on) and Background (Page).

Show the fit switch puts "Only what fits Mabel" beside the heading when Turn on the pet profile is on in theme settings: shoppers with a saved pet can hide what won't fit (chapter 8). With no collection chosen, shoppers see a row of sample cards, so choose one. A chosen collection with no products shows nothing.

Featured product

One product with its buy box, on any page. In the Scruff and Whisker presets it's the home page's name tag: an eyebrow ("Name tags"), the title, price, variant picker, the Name tag preview (chapter 10) and the buy buttons.

Its blocks are Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Product link, Pet fit, Size guide, Name tag preview, Feeding calculator and Free-from chips, plus the general blocks in chapter 5 and app blocks.

Shop by size

Five tiles, XS to XL, each with its weight range and a few example breeds, linking to everything in that size. The tile that holds the shopper's pet turns colour block A and wears a bone with the pet's name ("Mabel"), and screen readers hear "Mabel's size". Cat profiles mark no tile, because the sizes are by dog weight.

Add a Size tile block for each size (up to six):

The bone glyph on each tile grows from XS to XL. Five tiles sit across on a computer; on phones they become a sideways row.

Feeding promo

The "Never run out" band: words and ticks on the left, and on the right the feeding calculator for one product, with its own add to bag. See chapter 11.

Image with text

Slideshow

Rotating slides, each an image tile beside a text tile, on the home page, pages and collections. Up to six Slide blocks, each with an Image, Image background (Colour block B), Text tile background (Colour block A), Eyebrow, Heading ("New this week"), Text, Button label and Link (shows once there's a label).

Under the slides sit the controls: pause (when rotating), previous, "1 / 3" and next.

Icon row

Short facts, up to six items, each with an icon in a small squircle. Eyebrow, Heading, Columns on mobile (2 columns by default, or 1 column) and Background.

Each Item has an Icon (None, Van, Swap, Ruler, Needle, Cake, Scale, Bowl, Leaf, Heart, Bone, Tag, Star, Check mark (the default), Lock, Shop, Gift, Pin, Clock, Return, Chat, Card or Globe), a Heading ("Free size swaps"), Text and a Link (shows once there's a heading). State only terms your store actually offers.

Rich text and Testimonials

Your words. Eyebrow, Heading, Link label, Link, Layout (One column, or Grid, which puts the blocks three to a row, for testimonials), Alignment (Left) and Background. 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 Grid layout with Testimonial blocks. Each testimonial is a white card with up to five stars, the Quote in the heading font, then the Name ("Priya") and Detail ("with Otis, cavoodle, 9 kg"). Stars goes from 0 to 5 (5 by default).

Use real words from real customers. The presets' testimonials are samples.

Bundles

Ready-made kits you sell as one product, such as a puppy starter kit. Eyebrow ("Bundles"), Heading ("Puppy starter kits"), Body and Background. Add a Bundle block for each: Product, then (once a product is chosen) Tagline, Kit contents (list what the kit includes, one item per line, or connect a metafield) and Button label ("Add bundle to bag"). The button adds that product to the bag, so create the kit as a product of its own first. Give it a compare-at price and the card shows the saving as a round tag. With no blocks, shoppers see nothing.

Shop the scene

A photo of a scene, such as a bed by a window, 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.

The section has an Image, Eyebrow ("Shop the scene"), Heading ("A bed by the window"), Body and Background. Add up to 20 Hotspot blocks:

As seen in

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

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.

Blog posts

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

Newsletter

An email sign-up on a colour tile: Heading ("Join the pack for 10% off"), Body ("One email a fortnight: new collars, treat drops and the odd shop dog."), Tile background (Colour block A by default, or Colour block B, Surface, Deep band or Accent) and Background (Page). 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, and set up the discount you offer.

FAQ

Questions and answers, with one Collapsible row block each (chapter 5). Eyebrow, Heading ("Good questions"), Body, Link label, Link and Background. The heading sits on the left and the questions on the right; on phones they stack.

Size guide

The size table, breed picker and how to measure, for your size guide page (the page.size-guide template) or a product template. See chapter 9.

Product recommendations

Product pages only. Heading ("Goes well with"), Recommendation type (Related products, which are similar, or Complementary products, which pair with this one) and Products to show (4, from 2 to 10). The product templates carry two: "Goes well with" (complementary) and "You might also like" (related).

Shopify works out related products by itself once it has order history. Complementary products are ones you choose in the Search & Discovery app: the lead that goes with the collar, the treat pouch that goes with the training treats.

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 rows of its Specifications block: the product type, vendor and weight (the presets turn SKU, variant options and barcode off), plus any Specification row blocks you add to compare metafields such as custom.card_meta or a material. In the theme editor, the first product in your catalog previews the rows.