# Sections

Chapter 4 of the Ribbon user guide.

Add a section in the theme editor with **Add section**. Most sections share a centred section heading: a **Kicker** (a short line in the accent color with a small bow before it), a **Heading** in the display serif, a **Subheading** and **Heading alignment** (Centre or Left); where there's a **Button label under the grid** and **Button link under the grid**, they show under the section as a centred outline pill. A section that needs a product or collection shows placeholder cards until you choose one, so choose one before you publish. Sections whose content is empty, such as testimonials with no quotes, take no space on your storefront.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The big opening block | **Layout**: **Editorial** (your copy beside two overlapping photos: a tall **Main image** bleeding off the right edge and a smaller 3:4 **Second image** matted over its corner, with a caption card), **Full width** (one photo edge to edge at a **Height** of Short, Medium or Tall, with your copy on a panel card overlapping its foot, and a **Mobile image** for phones) or **Type first** (a very large heading with the photo below it and the caption in italics under the photo). **Kicker**, **Heading** (italicize a word for the heading italic), **Body**, **Primary button label** and link, **Text link label** and link, and the **Small print row** (short notes separated by \|, each after a small bow, such as Free shipping over $100 \| Free returns for 30 days \| Sizes XS to XL). The **Caption card** (Editorial and Type first): **Caption** ("Look 01, the Juliet slip in champagne"), and for Editorial a **Price**, **Link label** ("Shop the look") and **Link**. Text never sits on a photo. |
| **Slideshow** | Several heroes in turn | **Layout** (Editorial or Full width), **Media position** (Left or Right, Editorial), **Height** (Full width), **Rotate slides automatically** (off) and **Change slides every** (7s, 5 to 10). Up to six **Slide** blocks: **Image**, **Kicker**, **Heading**, **Text**, **Button label** and **Link**, **Text link label** and **Text link**, and **Caption**. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| **Featured collection** | A grid of editorial cards | The section heading ("Fresh on Friday", "New in"), **Collection**, **Products to show** (8, 2 to 12), **Layout** (Grid or Carousel), **Columns on desktop** (3 or 4; default 4), **Stagger the grid** (on: every second card drops a little lower, for an editorial rhythm; collection and search pages never stagger) and **Button label under the grid** ("Shop all new pieces"; the link defaults to the collection) |
| **Featured product** | One product with its buy box | The section heading, **Product**, **Enable image zoom** and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description (a short teaser here), Buy buttons, Product link, Product metadata, **Fit and size**, **Perk**, **Wear it with link**, the theme blocks of chapter 5 and app blocks. The preset holds Product metadata, Title, Price, Description, Variant picker, Fit and size, Inventory, Buy buttons and three perks. |
| **Shop the look** | An outfit photo with numbered dots, a list of the pieces and one button that adds the whole look | See chapter 8 |
| **Next drop** | A countdown to your next release, a Notify me form and the drop's products as Coming soon cards | See chapter 11 |
| **Collections** | Collection tiles | **Style**: **Grid** (3:4 photos with the name and the number of pieces), **Occasion cards** (tall 2:3 photos with a caption card: title, a line of text and a link) or **Round swatches** (round crops with the name under them; a tile without an image draws a print in your palette's colors). The section heading, **Collections** (used when the section has no tiles; empty shows every collection), **Collections per page** (12, 4 to 24) and the button under the grid. Up to eight **Collection tile** blocks: **Collection**, **Title**, **Text**, **Link label**, **Image** and **Link** (each blank uses the collection's own). **Add section** offers three presets: **Shop by occasion** (Date night, Brunch, Wedding guest), **Shop by print** (Gingham, Stripe, Lemons, Waves, Polka) and **Collections**. |
| **Image with text** | A story beside a photo, such as your fabrics | **Background** (Page, Panel or Surface), **Image**, **Image ratio** (Portrait 4:5 or Portrait 3:4), **Media position** (Left or Right), **Caption** (on a card over the foot of the photo; empty hides the card), **Kicker**, **Heading**, **Body**, **Button label** and **Link** |
| **Photo grid** | Customer photos, "As worn by you" | The section heading ("Tag @yourboutique", "As worn by you") and the button under the grid. Up to twelve **Photo** blocks: **Image**, **Caption** (a customer's handle or a short line, in italics under the photo), **Link** and **Product** (links the photo to that product and names it for screen readers). Only post photos you have permission to use. |
| **Testimonials** | Up to six customer quotes | The section heading ("Kind words", "From our customers"). Each **Quote**: **Quote**, **Name**, **Detail** (what they bought, "Bought the Juliet slip, size S") and **Star rating** (5, 0 to 5; 0 hides the stars). The section ships sample quotes: replace them with real ones. |
| **Promises** | Up to six short promises with icons | **Heading** and **Columns on mobile** (1 or 2 columns). Each **Promise**: **Icon** (None, Bow (default), Truck, Return, Gift, Ruler, Hanger, Sparkle, Mail, Heart, Shield, Chat, Clock, Store, Lock, Card, Globe or Check mark), **Heading**, **Text** and **Link**. State only terms your store actually offers. |
| **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** (32px, 24 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**. |
| **Bundles** | Ready-made outfits you sell as one product each | The section heading ("Ready to wear", "Bundles"). Each **Bundle** block: **Product** (the bundle as one product: its price and stock are what the button adds), **Title** (shown until a product is chosen), **Badge** (left empty, a bundle with a compare-at price shows its saving), **Tagline**, **Bundle contents** (a bulleted list of the pieces) and **Button label** ("Add bundle to bag"). With no bundles, the section shows nothing. |
| **Rich text** | Free text and buttons | **Heading alignment** (Centre or Left). Add Kicker, Heading, Text and Button blocks (chapter 5). |
| **Section** | An empty section you fill with blocks | Takes any theme block and app blocks |
| **FAQ** | Questions and answers | **Kicker** ("Good to know"), **Heading** ("Questions, answered") and **Subheading**. Add **Collapsible row** blocks (chapter 5); the preset has three, about sizes, delivery and returns. |
| **Newsletter** | An email sign-up | **Heading** ("Join the bow club for 10% off your first order"), **Subheading**, **Button label** ("Join the club"), **Note** ("Unsubscribe any time. We never share your email."), **Customer tag** ("newsletter", added to every new subscriber in Customers) and **Show a rule above** (on). Only promise a discount you actually send. |
| **Blog posts** | Your latest articles | The section heading ("From the journal", "Styling notes"), **Blog** (shows its newest articles and links to it) or **Articles** (picked by hand, in your order), **Articles to show** (3, 2 to 12) and the button under the grid ("Read the journal") |
| **Custom Liquid** | App snippets or your own code | **Liquid** |

Promises, As seen in, Rich text, Newsletter, Section and Custom Liquid can also go in the footer group.

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery and the buy box (chapter 6) |
| **Wear it with** | Pairings for the product, with size pills to add them (chapter 10) |
| **Product recommendations** | A row of cards. **Kicker**, **Heading** ("You may also like"), **Recommendation type**: Related products (similar ones) or Complementary products (ones that pair with this product; you choose them in the Search & Discovery app), and **Products to show** (4, 2 to 10). |
| **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). |

## Page sections

* **Page**: your page's content, with **Show breadcrumbs**, a **Kicker** and a details panel (**Details heading**, "At a glance") filled with **Fact** blocks (a **Label** and a **Value**, such as Fabric: 100% silk).
* **Contact form**: **Show breadcrumbs**, **Kicker** ("Write to us") and **Show order number field** (on), with **Menu column** blocks (a heading and a menu) and **Text** blocks (a heading and text, such as your address) beside the form.
* **Collections** (the collections list page): the Collections section in its Grid style; with no tiles it lists every collection, **Collections per page** at a time.
* **Collection** and **Search**: chapter 13. **Blog**: **Show breadcrumbs**, **Body**, **Show featured entry**, **Show tags** and **Articles per page** (12, 6 to 30). **Article**: blocks for breadcrumb, title, byline (**Show author**), featured image, content, tags and share.
* **Size guide**: your size chart and Find my size on a page of its own (chapter 9).
* **404 page**: **Heading** ("This page has slipped away."), **Body** and **Show the requested address** (on), with a search field and "Back to the boutique" and "Shop all" buttons.
* **Password**: your "opening soon" page, with a **Heading** ("Something soft is on its way"), **Body**, **Show newsletter form** (on) and its **Customer tag**, and an **Image** with a **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 **Fit** and **Model** line (from `custom.fit` and `custom.model_info`, chapter 7, when any of them has one) 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 fabric or length (chapter 6).