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