# Sections

Chapter 4 of the Rep user guide.

In the theme editor, click **Add section** to add any of the sections below to a page. Most sections share one setting:

* **Background**: **Page**, **Studio grey** (the quiet band), **Colour block**, **Second colour block** or **Dark band**. On a colour block or the band, the section's text, buttons, fields and focus rings switch to that ground's own colours, so they always read. A section on the same background as the one above drops its top space, so they join into one band. A section's own default is in its table.

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

## Hero

The page's opening: one colour block with the track bend and lanes, a big headline and your products standing on the lanes. It can go on any page, and is usually first on the home page.

| Setting | Default | What it does |
| --- | --- | --- |
| Layout | Lane | **Lane**: the text and your images together inside one colour block, the images standing on the inner lane. **Split**: the text on the page beside a tall image block (Flow uses it). **Image**: one full-width photo in the colour block with the text in a white card at the lower left. **Minimal**: the text alone in the colour block, no images. |
| Eyebrow | "New: the Sculpt set in Fern" | The small pill above the heading, with the lane mark in front |
| Heading | "Built for every rep" | The page's main heading. Left empty, it shows your shop name. |
| Body | "Squat-proof leggings, high-support bras and training layers that move the way you do. Pick a colour once and the whole set matches." | |
| Primary button label, Primary button link | "Shop training" | The main button, with a round arrow disc at its end. With no link, it goes to all products. |
| Secondary button label, Secondary button link | "Find your size" | An outlined button. With no link, it goes to all products. |
| First tick, Second tick, Third tick | "Squat-proof", "Pockets on every pair", "Free returns" | Short lines with a check mark, in a row under the buttons. A blank tick is left out. State only what's true of your products. |
| Block colour | Colour block | **Colour block**, **Second colour block**, **Dark band** or **Page**: the block's colour (in Split, the image block's) |
| Lane colour | Block text colour | **Block text colour**, **Accent** or **Palette lanes** (white on Track, terracotta on Clay; Pace uses this). In Split, **Block text colour** also draws the lanes in the accent. |

Under **Images and sample art**:

| Setting | Default | What it does |
| --- | --- | --- |
| Image | | The main picture. In Lane and Split, use a cut-out on a transparent background (a PNG of leggings or a whole outfit) so it stands on the lanes; in Image, a photo that fills the block. |
| Top image | | A second cut-out stacked above **Image**, overlapping it a little: a sports bra over leggings. Lane and Split only. |
| Side image | | A small extra beside them, such as a bottle. Lane and Split only. |
| Sample top, Sample bottom | Sports bra, Leggings | Drawn when no image is picked. **Sample top**: **None**, **Sports bra**, **Tank**, **Tee** or **Hoodie**. **Sample bottom**: **None**, **Leggings** or **Shorts**. |
| Sample art colour | `#3e5c45` | The drawn garments' colour |
| Sample extra, Sample extra colour | Bottle, `#1f2023` | **None**, **Bottle**, **Yoga mat** or **Gym bag** beside the garments |

Under **Caption**: **Caption** ("Sculpt set in Fern"), **Caption second line** ("Leggings $98 · Bra $72"), **Caption link** and **Caption colours** ("#1f2023, #5a6a8c, #3e5c45": up to three hex colours, separated by commas, shown as dots). The caption is a small white card on the image, hidden under 990px. Its prices are plain text, so update them when your prices change.

**Without images, the hero draws simple sample garments** on the block in **Sample art colour**, on your live store too, so a fresh install never shows a broken picture. Choose your own images, or set the samples to **None**. On phones the text goes first with the buttons full width and stacked, and the images follow below.

## Shop by activity

Activity tiles and sports-bra support chips: "What are you training for?" with Train, Run, Yoga, Pilates and Lounge. Each tile links to that activity, and each chip to sports bras of that support level. See chapter 8 for every setting.

## Support finder

Three cards that explain your support levels, Low, Medium and High, each with a picture, the three-bar meter, a line about what it's for and a link to those bras. See chapter 8.

## Collections grid

Your collections as colour tiles, on the collections list page (`/collections`) only. **Heading** ("Collections"), **Body**, **Collections** (leave empty to list every collection) and **Collections per page** (12, from 4 to 24 in steps of 2, with page numbers under the tiles).

Each tile is the collection's image on a colour with the bend and lanes, and a white label pill with the name and the number of products. The colours cycle: the colour block, the second colour block, then three soft grounds. A collection whose title is one of your **Activity list** names (Theme settings › Activity) gets that activity's pictogram in its pill.

## Featured collection

A row of products. **Eyebrow** ("New drops"), **Heading** ("Fresh this Thursday"), **Lede** (a line under the heading), **Collection**, **Products to show** (4, from 2 to 12), **Link label** ("Shop all new"; the link goes to the collection, or to all products with no collection) and **Background** (Page).

With no collection chosen, shoppers see a row of placeholder cards, so choose one. A chosen collection with no products shows nothing.

## Featured product

One product with its buy box, on any page. On every preset's home page it's **Complete the set**: the product and its first matching piece side by side, joined by a "+" disc, with the set picker beside them (chapter 10).

| Setting | Default | Notes |
| --- | --- | --- |
| Product | | **Until you choose one, shoppers don't see the section at all.** The theme editor shows a sample. |
| Layout | Product | **Product**: the gallery and the buy box. **Set**: in place of the gallery, two big pictures, this product and its first set piece, joined by a "+" disc. Both follow the colour the shopper picks. Add a **Variant picker** and a **Complete the set** block to go with it: the set card then lists this product above its pieces, in the colour and size the shopper picks. On screens 990px and wider the pictures stay in view while the shopper scrolls past the picker and the set card, and the picker is compact (size and inseam side by side when they fit). |
| Background | Page | |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen. The presets turn it off on the set layout. |
| 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**, **Product link**, **Activity pills**, **Fabric and fit**, **Fit finder** and **Complete the set**, plus the general blocks in chapter 5 and app blocks. The presets' set sections hold an eyebrow, a heading, a text, **Price**, **Variant picker** and Complete the set, so shoppers choose the main product's colour, size and inseam right there, and the set button adds it in that choice (chapter 10). A new **Complete the set** section from the section list starts the same way.

## Fit finder promo

The fit finder on the home page, in a band: your words and three ticks on one side, and the form on the other, which gives the shopper's size as they type and remembers it. **Shop in size M** then opens your collection in that size. See chapter 11.

## Image with text

| Setting | Default | Notes |
| --- | --- | --- |
| Image | | Shown on a colour tile with the bend and lanes. A cut-out stands on its colour. |
| Media position | Left | **Left** or **Right** |
| Image block colour | Second colour block | **Colour block**, **Second colour block**, **Studio grey** or **Dark band**: the tile behind the image |
| Sample art, Sample art colour | Yoga mat, `#b8694a` | Drawn when no image is picked: **None**, **Yoga mat**, **Gym bag**, **Leggings**, **Hoodie** or **Tee** |
| Eyebrow, Heading, Body | "Mats and props", "Mats with real grip", "Natural rubber under a soft top layer. Holds in downward dog, even when it's humid." | |
| Button label, Link | "Shop mats" | **Link** shows once there's a label. With no link, it goes to all products. |
| Background | Page | The ground around the tile and the text |

## Slideshow

Rotating slides, each an image beside its words, on the home page, pages and collections. Up to six **Slide** blocks, each with an **Image**, **Eyebrow**, **Heading** ("Built for every rep"), **Text**, **Button label** and **Link** (shows once there's a label; with no link, it goes to all products).

| Setting | Default | Notes |
| --- | --- | --- |
| Media position | Left | **Left** or **Right**: which side the picture sits |
| 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 | Page | |

## Icon row

Short facts with icons, up to six items: the presets' **Fabric tech** row ("Made for movement"). **Eyebrow** ("Fabric tech"), **Heading** ("Made for movement"), **Text** ("Every product page shows its compression, stretch and fit, so you know how it feels before it arrives."), **Show the section corner lanes** (on: two lanes under the heading that bend down at the right), **Background** (Page) and **Columns on mobile** (**2 columns** by default, or **1 column**). Four items sit across on a computer.

Each **Item** has an **Icon** in a grey circle, a **Heading** ("Heading"), **Text** and a **Link** (shows once there's a heading). The icons: **None**, **Shield (squat-proof)**, **Drop (sweat-wicking)**, **Wind (quick-dry)**, **Sun (UPF)**, **Pocket**, **Recycle**, **Stretch**, **Leaf**, **Truck**, **Return**, **Ruler**, **Check mark** (the default), **Star**, **Lock**, **Shop**, **Gift**, **Pin**, **Clock**, **Chat**, **Card**, **Globe**, **Heart**, **Train**, **Run**, **Yoga**, **Pilates** and **Lounge**. State only terms your store actually offers.

Added from **Add section**, it starts as **Fabric tech** with Squat-proof, Sweat-wicking, 4-way stretch and Pockets.

## Rich text and Testimonials

Your words. **Eyebrow**, **Heading**, **Link**, **Link label**, **Layout** (**Stack**, or **Grid**, which puts the blocks three to a row, for testimonials) and **Background** (Page). It takes the general blocks in chapter 5.

In **Add section** it's listed twice: as **Rich text**, and as **Testimonials** ("From the 6 am crew"), which starts in the Grid layout with three **Testimonial** blocks. Each testimonial is a grey card with up to five stars, the quote, then the **bought line**: a small picture of the product beside what they bought and who they are.

| Testimonial setting | Default | Notes |
| --- | --- | --- |
| Quote | "The fit finder said M and it was spot on…" | A testimonial with no quote isn't shown |
| Stars | 5 | 0 to 5 |
| Product | | Its photo shows beside the bought line, which then links to it |
| Bought line | "Sculpt leggings · Fern · M" | What they bought. Left empty with a product chosen, it shows the product's name. |
| Reviewer | "Jess, 168 cm, 63 kg · Fit: true to size" | Their name and, if they agree, their height, weight and how it fit: the details activewear shoppers look for |
| Sample art, Sample art colour | Leggings, `#3e5c45` | Drawn in place of the product photo when no product is chosen: **None**, **Leggings**, **Sports bra**, **Medium-support bra**, **Tank**, **Tee**, **Shorts**, **Hoodie**, **Joggers**, **Yoga mat**, **Bottle** or **Gym bag** |

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

## Newsletter

An email sign-up on a colour block with the bend and lanes: the words on one side, a pill field with its button on the other.

| Setting | Default | Notes |
| --- | --- | --- |
| Eyebrow | "The club" | |
| Heading | "Join the club for early drops" | |
| Body | "New colours land on Thursdays at 6 am. Members hear first and get free express shipping on drop day." | |
| Button label | "Join the club" | |
| Small print | "One email a week. Unsubscribe any time." | A line under the form, for example how often you send |
| Block colour | Colour block | **Colour block**, **Second colour block**, **Dark band** or **Studio grey** |
| Background | Page | The ground around the block |

Addresses go to **Customers** in Shopify admin, subscribed to email marketing. The theme doesn't send anything or create discounts itself, so promise only what you'll send from Shopify Email or your own email tool, and set up any perk you offer, such as the free express shipping in the sample text.

## Bundles

Ready-made kits you sell as one product, such as a studio starter kit. **Eyebrow** ("Bundles"), **Heading** ("Studio starter: mat, bottle, bag"), **Body** and **Background**. Add a **Bundle** block for each: **Product**, then (once a product is chosen) **Tagline**, **Kit contents** (list what the kit includes, one item per line, or connect a metafield) and **Button label** ("Add bundle to bag"). The button adds that product to the bag, so create the kit as a product of its own first. Give it a compare-at price and the card shows the saving. With no blocks, shoppers see nothing.

## Shop the look

A photo of a flat lay or an outfit with hotspots, round "+" pills in your block colour, that open a small card. On phones the pills carry numbers instead and the same details are listed under the image. The image is shown uncropped, at its own shape, so hotspots stay on the things they mark at every screen size.

The section has an **Image**, a **Heading** ("Shop the look") and **Background**. Added from **Add section**, it comes with three hotspots (Sports bra, Leggings, Water bottle) to move onto your photo. Add up to 20 **Hotspot** blocks:

| Setting | Default | Notes |
| --- | --- | --- |
| Label | "Sculpt leggings" | Change it to what's pictured |
| Horizontal position | 50% | 0 to 100%, from the image's left edge, in every language direction |
| 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, such as "Squat-proof, 25 in inseam". You can connect a metafield of the chosen product with the dynamic source button. |

## As worn at

Logos of the studios, gyms, clubs and races where your kit is worn, or press mentions, up to 12. **Heading** ("As worn at"; "As seen in" when added from **Add section**), **Logo colors** (**Original** by default, or **Monochrome**, which turns each logo into one flat colour that suits the palette; use logos with transparent backgrounds), **Logo height** (40px, from 24 to 96px in steps of 4), **Layout on mobile** (**Wrap** or **Scroll**) and **Background**.

Each **Logo** has an **Image**, a **Company name**, a **Link** and a **Quote**. A logo without a name isn't shown to shoppers. Screen readers read the name as the logo. Show only places that have agreed to it.

## Blog posts

Your newest articles. **Heading** ("From the journal"; "Latest entries" when added from **Add section**), **Blog** (shows its newest articles and adds a link to it), **Articles to show** (3, from 2 to 12; shows while **Articles** is empty), **Articles** (overrides the blog: they appear in the order you pick them) and **Background**. With no articles to show, shoppers see nothing.

## FAQ

Questions and answers, with one **Collapsible row** block each (chapter 5). **Eyebrow**, **Heading** ("Good questions"), **Body** and **Background**. Added from **Add section**, it starts with sample questions: rewrite or delete every one.

## Product recommendations

Product pages only. **Heading** ("You may also like"), **Recommendation type** (**Related products**, which are similar, or **Complementary products**, which pair with this one) and **Products to show** (4, from 2 to 10). The product templates carry one: "Wear it with" on `product` and "Pairs well with" on `product.no-set`, both related.

Shopify works out related products by itself once it has order history. Complementary products are ones you choose in the Search & Discovery app: the shorts that go with the running tee, the bottle that goes with the mat. To make "Wear it with" show those, set it to **Complementary products**.

## Quick order list

Product pages only: see **B2B** in chapter 6.

## Section and Custom Liquid

**Section** is an empty container with a **Background**: fill it with any blocks in chapter 5. **Custom Liquid** takes Liquid code, such as an app snippet, and has a **Background** too.

## 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** (**Heading** "Quick links", **Menu**) and **Text** (**Heading** "Visit the studio store", **Text**), in a column beside the form. Messages go to your store's sender email in **Settings › Notifications**. |
| 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** (on), **Show tags** (on), **Articles per page** (10, from 6 to 30 in steps of 2) |
| Article | Blocks: **Breadcrumb**, **Title**, **Byline** (**Show author**), **Featured image**, **Content**, **Tags** and **Share** |
| 404 page | **Heading** ("Wrong lane"), **Body** ("That page isn't here. Let's get you back on track."), **Show the requested address** (on). A search field always follows. |
| Password | **Heading** ("Opening soon"), **Body**, **Show newsletter form** (on). Under the form, "Enter using password" opens the password field. |
| Product, Quick view | See chapter 6 |
| Cart, Cart drawer | See chapter 12 |

## 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 availability, then the rows of its **Specifications** block: the product type, vendor and weight (the presets turn SKU, variant options and barcode off), plus any **Specification row** blocks you add to compare metafields, such as `custom.composition` or `custom.stretch`. In the theme editor, the first product in your catalog previews the rows.