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