# Sections

Chapter 4 of the Clasp user guide.

Add a section in the theme editor with **Add section**. Most sections share a centred section heading: a **Kicker** (a short line with a small facet before it), a **Heading** in the heading font, a **Subheading** and **Heading alignment** (Centred or Left); where there's a **Link label** and **Link**, the link shows centred under the section as an underlined text link ("Shop all bestsellers"). Most also have a **Colour scheme** (Page, Champagne band or Lining band, chapter 2). A section that needs a product or collection shows placeholders until you choose one, so choose one before you publish.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The big opening block (home page only) | **Layout**: **Locket: arch, text, oval** (an arched photo at the start, your words centred, an oval photo at the end set a little lower; with no Image 2 the arch moves to the end), **Cameo: text and a large oval** (your words at the start, one large oval with an optional small circle over its lower edge) or **Niche: text over an arch** (your words centred over a centred arch, with the two captions either side of its foot, like provenance notes). **Kicker**, **Heading** (italicize a word for the heading italic), **Body**, **Primary button label** and link, **Text link label** and **Text link**, and **Short facts** (separated by \|, shown under the buttons with facets between them: Nickel free \| Free repairs for a year \| Engraving from $10). Under **Images**: **Image 1** (the arch, or the cameo's large oval), **Caption 1** and **Caption 1 detail**, **Image 2** (the locket's oval or the cameo's circle; not used by the niche), **Caption 2** and **Caption 2 detail**, and a **Phone image** that replaces image 1 on phones. Text never sits on a photo. |
| **Slideshow** | Several heroes in turn (home, page and collection templates) | **Layout** (the hero's three), **Colour scheme**, **Rotate slides automatically** (off) and **Change slides every** (7s, 5 to 10). Up to six **Slide** blocks with the hero's words, buttons, short facts, two images and four captions. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| **Featured collection** | A grid of product cards | **Collection**, **Products to show** (8, 2 to 12), **Layout** (Grid or Carousel), the section heading ("Most loved", "Bestsellers") and **Link label** ("Shop all bestsellers"; a blank link goes to the collection) |
| **Featured product** | One product with its buy box | **Product**, **Enable image zoom** and the pre-order settings (chapter 6). Blocks: Product metadata, Title, Product vendor, Rating, Price, Material badges, Inventory, Variant picker, Description, Engraving, Buy buttons, Back-in-stock request, Trust row, Product link, the theme blocks of chapter 5 and app blocks. |
| **Collections** | Collection tiles | **Tile style**: **Ovals with metal chips** (each collection in an oval with its keyline and, when the tile names one, a small metal chip over the foot of the oval: Shop by metal), **Arches** (arched photos with the name and a link) or **Square grid** (square photos with the name and the number of pieces). The section heading, **Collections** (used when the section has no tiles; empty lists every collection) and **Collections per page** (12, 4 to 24). Up to eight **Collection tile** blocks: **Collection**, **Title**, **Image** and **Link** (each blank uses the collection's own) and **Metal chip** (oval tiles only: a metal or stone name from **Chip colours**, such as Yellow gold, chapter 8). **Add section** offers **Shop by metal** (Gold, Silver, Rose gold) and **Collections grid**. |
| **Stack builder** | Rings or charms layered on a display, added in one tap | See chapter 11 |
| **Birthstones** | A stone for every month, with the current month marked | See chapter 12 |
| **Image with text** | A story beside a photo, such as your engraving or your materials | **Image**, **Image shape** (Oval or Arch, with the keyline), **Image proportions** (4:5 or 3:4), **Media position** (Left or Right), **Kicker**, **Heading**, **Body**, **Button label** and **Link**. **Show the engraving demo** (off) adds a picture of the engraving field and its three styles under the text, with **Sample engraving** ("always") written in it. **Add section** offers **Image with text** and **Engraving promo** (the demo on). |
| **Materials** | Up to six short facts with icons: your metals and promises | **Columns on mobile** (1 or 2 columns) and the section heading. Each **Item**: **Icon** (None, Recycled, Ring, Shield with a check, Repair, Gift, Engraving, Gem, Metal, Certificate, Ruler, Truck, Return, Shield, Chat, Clock, Store, Map pin, Mail, Lock, Card, Globe or Check mark), **Title** ("14k gold fill"), **Text** and **Link**. State only terms your store actually offers. |
| **Rich text** | Free text and buttons, or testimonials | **Alignment** (Centred or Left) and the section heading. Add Kicker, Heading, Text, Button and **Quote** blocks (chapter 5). **Add section** offers **Rich text** and **Testimonials** (three Quote blocks in a row). Replace the sample quotes with real ones. |
| **Gift sets** | Ready-made sets you sell as one product each | The section heading ("Gift sets", "Ready to give"). Up to six **Gift set** blocks: **Product** (the whole set as one product, priced as one; a compare-at price shows a Save badge), **Tagline**, **What's in the set** (a bulleted list, or connect a metafield) and **Button label** ("Add set to bag"). With no blocks, the section shows nothing. |
| **Shop the flat lay** | A flat lay photo with numbered dots on the pieces | **Image** (shown uncropped, at its own shape, so the numbers stay on the pieces they mark), **Image shape** (Square corners or Arch with a keyline) and the section heading. Each **Piece**: **Label** (blank uses the product's title), **Horizontal position** and **Vertical position** (50%, 0 to 100), **Product** (optional: shows the piece's photo, price and metals, and lets shoppers add it to their bag) and **Detail** ("14k gold fill, 45 cm"). Replace the preset's "First part", "Second part" and "Third part". |
| **As seen in** | Up to twelve press or stockist logos | **Heading** ("As seen in"), **Logo colors** (Monochrome, the default, draws every logo in one flat color that suits the palette; or Original. Use logos with transparent backgrounds), **Logo height** (28px, 20 to 96) and **Layout on mobile** (Wrap or Scroll). Each **Logo** needs an **Image** and a **Company name** (a logo without a name isn't shown), with an optional **Link** and **Quote**. |
| **FAQ** | Questions and answers | The section heading ("Questions", "Before you ask"). Add **Collapsible row** blocks (chapter 5); the preset has three: "Will 14k gold fill tarnish?", "How do I find my ring size?" and "Can I return an engraved piece?". |
| **Newsletter** | An email sign-up on the champagne band | **Kicker** ("Letters from the studio"), **Heading** ("First look at new pieces, and 10% off your first order"), **Body**, **Button label** ("Subscribe"), **Note** ("Unsubscribe any time. We never share your email.") and **Customer tag** ("newsletter", added to every customer who signs up here). Only promise a discount you actually send. |
| **Blog posts** | Your latest articles | The section heading ("From the journal", "Notes from the bench"), **Card image** (**Arch-topped, with a keyline** or Square), **Blog** (shows its newest articles and adds a link to it) or **Articles** (picked by hand, in your order), **Articles to show** (3, 2 to 12) and **Link label** ("Read the journal"; a blank link goes to the blog) |
| **Section** | An empty section you fill with blocks | Takes any theme block and app blocks |
| **Custom Liquid** | App snippets or your own code | **Liquid** |

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery and the buy box (chapter 6) |
| **Product details** | "The details": a **Kicker** ("The details"), a **Heading** ("Made to be worn, every day"), the rest of the product description and your specifications from a **Spec table** block on the left, and on the right the **ring size card** (chapter 9) for products with a ring size option. **Show the rest of the description** (on: everything after the description's first paragraph, such as spec lists, above the spec table; pair it with the buy box's **Description** block set to show only the first paragraph), **Show the ring size card** (on) and **Colour scheme**. |
| **Product recommendations** | A row of cards. **Kicker** ("Complete the stack"), **Heading** ("Worn with the [product]": `[product]` is replaced by the product's title), **Recommendation type**: **Complementary, then related** (the default: the pieces you pair with this one in the Search & Discovery app, then similar ones), **Related products** or **Complementary products**, and **Products to show** (4, 2 to 8). |
| **Quick order list** | For B2B customers: every variant of a product in a table with quantity fields. **Heading** ("Quick order"), **Variants per page** (25, 10 to 50) and **Show SKU** (on). |

To pair pieces for "Worn with the …": install Shopify's free **Search & Discovery** app, open **Recommendations**, search for a product and add its **complementary products** (the chain that goes with the pendant, the stacking bands that go with the solitaire). Complementary products can take a little while to appear after you save.

## Page sections

* **Page**: your page's content, with **Show breadcrumbs**, a **Kicker** and a facts panel (**Facts heading**, "At a glance") filled with **Fact** blocks (a **Label** and a **Value**, such as Metal: 14k gold fill).
* **Contact form**: **Show breadcrumbs**, **Kicker** ("Get in touch") and **Show order number field** (on), with **Menu column** blocks (a heading and a menu) and **Text** blocks (a heading, "Visit the studio", and text such as your address) beside the form.
* **Collections** (the collections list page): the Collections section in its Square grid style; with no tiles it lists every collection, **Collections per page** at a time. Its **Body** shows under the heading on this page only.
* **Collection** and **Search**: chapter 14. **Blog**: **Show breadcrumbs**, **Body**, **Show the newest story large** (on), **Show tags** (on), **Card image** (Arch-topped, with a keyline, or Square) and **Articles per page** (12, 6 to 30). **Article**: blocks for breadcrumb, title, byline (**Show author**), featured image, content, tags and share.
* **Ring sizer**: the printable ring sizer on a page of its own (chapter 9).
* **404 page**: **Heading** ("This page has slipped off the chain."), **Body**, **Show the requested address** (on), **Button label** ("Back to the shop") and **Link**.
* **Password**: your "opening soon" page, with a **Kicker** ("Opening soon"), **Heading**, **Body**, **Show newsletter form** (on), **Show image** (on), an **Image** and its **Caption**.

## Compare

Turn on **Show compare checkbox** in Theme settings › Product cards, create a page with the `page.compare` template and choose it as the **Comparison page**. Shoppers tick up to three products; a tray at the bottom of the screen shows their thumbnails and a **Compare** button. The **Compare** section (**Show breadcrumbs**) shows them side by side with their price and availability, their materials (from `custom.materials`, chapter 7) and each option's values (metal, ring size), and the rows of its **Spec table** block, with a switch to show only the rows that differ. Add **Spec row** blocks to the Spec table to compare more of your metafields, such as band width or chain length (chapter 6).