# Sections

Chapter 4 of the Decant user guide.

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

* **Background**: **Page**, **Panel**, **Surface** or **Deep glass**, the dark band the footer uses. A section's own default is in its table.
* **Texture**: **None** or **Reeded glass**, the fine vertical flutes of moulded glass.

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

## Hero

The home page's opening, and only the home page can have one. Decant's signature picture, the **strip window**, cuts your image into hanging strips of different lengths, each shifted a little, so it looks seen through reeded glass.

| Setting | Default | What it does |
| --- | --- | --- |
| Layout | Strip window | **Strip window**, **Full image** (the picture across the whole width, with the words on a sheet that sits on it) or **Text only** |
| Image | | The picture. See below. |
| Strips in the window | 5 | 3 to 7. With **Strip window**. |
| Window side | Right | **Right** or **Left**. With **Strip window**. |
| Eyebrow | | The small line above the heading |
| Heading | "Find your scent, one sample at a time" | Select a word and make it italic for emphasis, as the Parfumerie preset does |
| Body | "Wear it for a week before you commit to the bottle…" | |
| Primary button label, Primary button link | "Build a discovery set" | With no link, it goes to all products |
| Secondary button label, Secondary button link | "Take the scent finder" | A text link beside the button. With no link, it goes to the home page. |
| Foot facts | | One fact per line, up to 3. State only terms your store actually offers. |
| Caption title, Caption text, Caption link | | A paper strip at the foot of the window: name what's pictured. With **Strip window**. |
| Background | Page | |
| Texture | None | |

**A fresh install's hero is text only until you pick an image.** With no **Image**, shoppers get the text layout, whatever **Layout** says, so they never see a made-up bottle or an empty half. You'll still see a sample still life in the theme editor: it's only there to show you the layout, and it isn't saved to your shop.

For the strip window, use a calm picture with one subject. Keep the subject in the middle, on the longest strip, and the floor line in the top three quarters. Set a focal point on the image to move the crop. On phones the window sits above the words.

## Slideshow

Rotating images, on the home page, pages and collections. Up to six **Slide** blocks, each with an **Image**, **Eyebrow**, **Heading** ("Lead with your newest scent"), **Text**, **Button label** and **Link**.

| Setting | Default | Notes |
| --- | --- | --- |
| Image ratio | Wide 16:9 | **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. |
| Background, Texture | Page, None | |

## Featured collection

A row of products. **Eyebrow**, **Heading** ("The scents people finish"), **Intro**, **Collection**, **Link label** (the link goes to the collection), **Products to show** (4, from 2 to 12), **Background** (Page) and **Texture** (None).

## Featured product

One product with its gallery and buy box, on any page. It's good for a signature scent.

| Setting | Default | Notes |
| --- | --- | --- |
| Product | | With no product, shoppers see only the Eyebrow and Heading blocks, or nothing if it has neither. In the theme editor you see a sample beside them. |
| Background, Texture | Page, None | |
| 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**, **Scent profile** and **Product link**, plus the general blocks in chapter 5.

## Collections grid

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

| Setting | Default | Notes |
| --- | --- | --- |
| Layout | Blotters | **Blotters**: tall paper strips hanging from a rail, each dipped in its family's tint. Sideways rows on phones. **Images**: a grid of collection photos with their product counts. |
| Eyebrow, Heading, Body | "Start with what you already like" | |
| Link label, Link | | A link beside the heading |
| Collections | | **Images** layout: leave empty to list every collection. **Blotters** layout: used only when there are no tile blocks. |
| Collections per page | 12 | 4 to 24. With **Images**. |
| Background, Texture | Page, None | |

For **Blotters**, add up to six **Blotters** blocks: **Collection**, **Label** (leave empty to use the collection's title) and **Text** (leave empty to use the first line of the collection's description). With no collection, a tile links to all products.

The tint comes from the tile's name: a scent family, or a word mapped under **Theme settings › Colors › Family names** (chapter 2). The preset tiles are named Fresh, Floral and so on but have no collection chosen, so choose one for each.

## Discovery set

The set builder. See chapter 9. It can sit on the home page or any page if you choose a **Set product**, and it sits on the set's own product page through the `product.discovery-set` template.

## Fragrance finder

Three questions that rank your scents. See chapter 11.

## Layering sets

Pairs or small sets you sell as one product. Add a **Layering set** block for each: **Product**, **Tagline**, **What's in it** (one item per line, or connect a metafield) and **Button label** ("Add set to bag"). The button adds that product to the bag, so create the pair as a product of its own first. Give it a compare-at price and the block shows the saving. With no blocks, the section shows nothing to shoppers.

The section's own settings are **Eyebrow** ("Pairs that layer"), **Heading** ("Wear two, one over the other"), **Body**, **Background** and **Texture**. This isn't the discovery set: to let shoppers choose scents, use the **Discovery set** section. To suggest pairs on a product page, use `custom.layer_with` (chapter 10).

## Shop the counter

A photo of your counter with numbered square hotspots that open a small panel. 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 bottles they mark at every screen size.

The section has an **Image**, **Eyebrow**, **Heading** ("Shop the counter"), **Intro**, **Background** and **Texture**. Add up to 20 **Hotspot** blocks:

| Setting | Default | Notes |
| --- | --- | --- |
| Label | "Fig Leaf" | Falls back to the product's title |
| Horizontal position | 50% | 0 to 100%, from the image's left edge |
| 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. You can connect a metafield of the chosen product. |

## Image with text

| Setting | Default | Notes |
| --- | --- | --- |
| Image | | With no image, shoppers get the words alone in one column |
| Image style | Plain | **Plain** or **Strip window** |
| Media position | Left | **Left** or **Right** |
| Eyebrow, Heading, Body | "Say what makes your shop yours" | |
| Button label, Link | | |
| Background, Texture | Page, None | |

## Icon row

Short facts or numbered steps, up to six items. **Layout** is **Facts** (the default: each item shows its icon) or **Steps** (each item is numbered and shows its image, up to three across). **Columns on mobile** is **2 columns** by default, or **1 column**, with **Facts**. The section also has an **Eyebrow**, **Heading**, **Intro**, **Background** and **Texture**.

Each **Item** has an **Image** (for Steps), an **Icon** (for Facts: **None**, **Truck**, **Return**, **Shield**, **Headset**, **Chat**, **Clock**, **Store**, **Lock**, **Card**, **Globe** or **Check mark**), a **Heading** ("We draw it from the bottle"), **Text** and a **Link**. State only terms your store actually offers.

## Rich text

Your words, in a narrow column. **Layout** is **Text** or **Quotes**, which sets **Quote** blocks side by side, up to three across. The section also has an **Eyebrow**, **Heading**, **Intro**, **Background** and **Texture**, and takes the general blocks in chapter 5. In **Add section** it's listed twice, as **Rich text** and as **Quote**, which starts in the Quotes layout.

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

## As seen in

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

Each **Logo** has an **Image**, a **Company name**, a **Link** and a **Quote**. Monochrome turns each logo into one flat colour, so use logos with transparent backgrounds. The name is read out by screen readers as the logo, and a logo with no name isn't shown. **With no image, the name prints as text**, which is why the Parfumerie preset's sample names reach shoppers until you replace them.

## Blog posts

Your newest articles. **Eyebrow**, **Heading** ("Notes from the bench"), **Intro**, **Blog**, **Link label**, **Articles to show** (3, from 2 to 12), **Articles** (overrides the blog: they appear in the order you pick them), **Background** and **Texture**.

## Newsletter

An email sign-up: **Heading** ("New scents, restocks and the odd free sample"), **Body**, **Background** (Surface) and **Texture**. Addresses go to **Customers** in Shopify admin, tagged `newsletter`. The theme doesn't send anything 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. **Eyebrow**, **Heading** ("Good to know"), **Body**, **Background** and **Texture**. With no question that has a heading, shoppers see nothing.

## Product recommendations

Product pages only. **Heading** ("If you like [product]", where [product] prints the product's name), **Link label**, **Link**, **Recommendation type** (**Related products**, which are similar, or **Complementary products**, which pair with this one), **Products to show** (4, from 2 to 10), **Background** and **Texture**.

Shopify works out related products by itself once it has order history. Complementary products are ones you choose in the Search & Discovery app.

## 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** and **Text**, in a column beside the form. |
| 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 entry** (off), **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 evaporated."), **Body**, **Show the requested address** (on) |
| Password | **Heading** ("Back in a moment"), **Body**, **Show newsletter form** (on) |

## 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 stock, then rows for concentration, family, longevity, sillage and the lowest price per ml, then the **Spec table** rows. Concentration comes from `custom.concentration_label`, else from the Concentration option's values. A product with no value for a row says nothing there, so goods sit safely beside scents.