# Sections

Chapter 4 of the Scruff user guide.

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.

| Setting | Default | What it does |
| --- | --- | --- |
| Layout | Bento | **Bento**: the text tile, two image tiles and a fact tile. **Split**: the text beside one wide image. **Image**: one tall image beside the text. **Minimal**: the text on the page, no tiles. |
| Eyebrow | "Collars, beds and treats in Brunswick" | The small line above the heading |
| Heading | "Good dogs deserve good things" | The page's main heading. Left empty, it shows your shop name. |
| Body | "Leather collars, rope leads and beds made to last. Tell us about your dog and we'll show you what fits." | |
| Primary button label, Primary button link | "Shop collars" | With no link, it goes to all products |
| Secondary button label, Secondary button link | "Find their size" | With no link, it goes to all products |
| Text tile background | Accent | **Accent**, **Page**, **Surface**, **Colour block A**, **Colour block B** or **Deep band**. Hidden with Minimal. |

Under **Images** (hidden with Minimal):

| Setting | Default | What it does |
| --- | --- | --- |
| Image fit | Cover | **Cover** fills each tile. **Contain** shows the background colour round a product photo with a plain or transparent background. |
| First image | | The big image tile |
| First image background | Colour block A | **Colour block A**, **Colour block B**, **Surface**, **Deep band** or **Page**: shows round a contained image and when there's no image |
| First caption, First caption, second line | "Waxed leather collar", "From $64 · 5 sizes" | A small card on the image, such as a product name, with a price or sizes on the second line |
| First link | | Makes the image tile a link |
| Second image, Second image background, Second caption, Second caption, second line, Second link | Colour block B, "New: canvas beds", "From $119" | The small image tile. With Bento only. |

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.

| Setting | Default | Notes |
| --- | --- | --- |
| Eyebrow, Heading, Body | "Collections" | |
| Link label, Link | | A link beside the heading, such as "All categories" to `/collections`. It shows only with both. On the collections list page the presets put **Shop all** there, to all products. |
| Show product counts | On | "42 products" under each title |
| Collections | | Used when the section has no **Collection** blocks. Leave empty to list every collection. |
| Collections per page | 12 | 4 to 24, in steps of 2. With **Collections** or every collection, the most tiles per page, with page numbers under them. |
| Background | Page | |

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.

| Setting | Default | Notes |
| --- | --- | --- |
| Product | | **Until you choose one, shoppers don't see the section at all.** The theme editor shows a sample picture and "Example product" with a "Sample" tag, and says "No product selected". |
| Background | Page | |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
| Pre-orders | Off | The same three settings as the product page (chapter 6) |

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.

| Setting | Default | Notes |
| --- | --- | --- |
| Eyebrow, Heading, Body | "Shop by size", "Sizes by weight, not guesswork" | |
| Link label, Link | "Size guide" | A link beside the heading, such as your size guide page |
| Background | Page | |

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

| Setting | Default | Notes |
| --- | --- | --- |
| Label | "M" | Match the size names in your products and in **Weight range per size** (Theme settings › Pet profile), such as M. "Medium" is not "M". |
| Weight range | "9–18 kg" | The text under the size. It's only words: the pet's tile is chosen by **Weight range per size**, so keep the two the same. |
| Examples | "Cavoodle, beagle, kelpie" | A few breeds that usually wear this size |
| Link | | Leave blank to link to all products in this size, filtered by the size option: `/collections/all?filter.v.option.size=M`. **That filter needs the Size filter in Search & Discovery (chapter 13); without it the link opens all products.** Or link to a collection of your own. |

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

| Setting | Default | Notes |
| --- | --- | --- |
| Image | | Shown in a squircle |
| Image background | Colour block B | Shows round a contained image and when there's no image |
| Image ratio | Square 1:1 | **Square 1:1** or **Portrait 4:5** |
| Image fit | Cover | **Cover** or **Contain** |
| Media position | Left | **Left** or **Right** |
| Eyebrow, Heading, Body | "Fitted in the shop, or at home" | |
| Button label, Link | "How to measure" | **Link** shows once there's a label. With no link, it goes to all products. |
| Text tile background | Colour block A | **Colour block A**, **Colour block B**, **Surface**, **Deep band**, **Accent** or **Page** |
| Background | Page | The ground around both tiles |

## 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).

| Setting | Default | Notes |
| --- | --- | --- |
| Background | Page | |
| Media position | Left | **Left** or **Right**: which side the picture sits |
| Image ratio | Standard 4:3 | **Adapt to first image**, **Wide 16:9**, **Standard 4:3** or **Square 1:1** |
| Rotate slides automatically | Off | Shoppers get a pause button. Slides never rotate for visitors who prefer reduced motion. |
| Change slides every | 7s | 5 to 10s. Shows when rotation is on. |

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:

| Setting | Default | Notes |
| --- | --- | --- |
| Label | "Canvas bed" | Change it to what's pictured |
| Horizontal position | 50% | 0 to 100%, from the image's left edge, in every language direction |
| Vertical position | 50% | 0 to 100%, from the image's top edge |
| Product | | Optional. Shows the product's price and stock, and links to it. |
| Detail | | A short note, such as "Waxed canvas, washable cover". You can connect a metafield of the chosen product. |

## 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.

| Section | Settings |
| --- | --- |
| Collection | **Show breadcrumbs**, **Show collection image**, **Show description**, **Enable filtering**, **Enable sorting** (all on), **Show vendor** (off), **Products per page** (12, from 8 to 36 in steps of 4) |
| Search | **Show breadcrumbs**, **Enable filtering**, **Enable sorting** (all on), **Results per page** (12, from 8 to 36 in steps of 4) |
| Contact form | **Show breadcrumbs**, **Eyebrow** ("Say hello"), **Show order number field** (on). Blocks: **Menu column** (**Heading** "Before you write", **Menu**) and **Text** (**Heading** "Visit the shop", **Text**), in a column beside the form. Messages go to your store's sender email in **Settings › Notifications**. |
| Page | **Show breadcrumbs**, **Eyebrow**, **Label** ("At a glance"). **Fact** blocks (**Label**, **Value**) list key facts under your page text. |
| Compare | See below |
| Blog | **Show breadcrumbs**, **Body**, **Show featured article** (on), **Show tags** (on), **Articles per page** (12, from 6 to 30 in steps of 3) |
| Article | Blocks: **Breadcrumb**, **Title**, **Byline** (**Show author**), **Featured image**, **Content**, **Tags** and **Share** |
| 404 page | **Heading** ("This page has wandered off"), **Body** ("Let's get you back on the lead."), **Show search** (on), **Show the requested address** (on) |
| Password | **Heading** ("Opening soon"), **Body**, **Show newsletter form** (on). Under the form, "Enter using password" opens the password field. |
| Product, Quick view | See chapter 6 |
| Cart, Cart drawer | See chapter 12 |

## 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.