# Sections

Chapter 4 of the Tress user guide.

Add a section in the theme editor with **Add section**. Most sections share a left-aligned section heading: a **Heading** in the heading font, a **Text** (or **Body**) introduction under it and, where there's a **Link label** and **Link**, an underlined text link with an arrow at the right ("Shop all best sellers"). Most also have a **Color scheme** (Page, Surface or Bold band) and **Wave edges** (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**: **Mirror trio** (your words beside three capsule mirrors of different heights, with a free strand line behind them), **Single mirror** (the main image in one tall capsule) or **Full-width image** (the copy on a card over the main image; text never sits on the photo). **Color scheme**, **Wave edges** (None), **Eyebrow** ("New: 13×4 HD lace frontals"), **Heading** ("Raw hair, flawless installs"), **Body**, **Primary button label** ("Shop bundles") and link, **Secondary button label** ("Build your install") and link. Under **Images**: **Main image**, and **Second image** and **Third image** for the trio. Under **Length ruler**: **Show the length ruler** (on; a scale beside the main mirror that marks the length of the hair in the photo, hidden on phones and in the full-width layout), **Marked length** ("22 in"), **Hair starts at** (16%, 0 to 60) and **Marked length sits at** (81%, 20 to 98), both measured from the top of the main image. Under **Product tag**: **Product**, **Tag title** (blank uses the product's title) and **Tag detail** ("100 g · from $129.00"): a small card with the product's thumbnail overlapping a mirror, linked to the product. Type the detail yourself, and update it when your price changes. Up to four **Tick** blocks ("100% raw human hair") show as ticked lines under the buttons. |
| **Slideshow** | Several heroes in turn (home, page and collection templates) | **Layout** (Single mirror or Full-width image), **Media position** (Left or Right, default Right, Single mirror only), **Image ratio** (Adapt to first image, Wide 16:9 (default), Standard 4:3 or Square 1:1, Full-width image only), **Color scheme**, **Wave edges**, **Rotate slides automatically** (off) and **Change slides every** (7s, 5 to 10). Up to six **Slide** blocks: **Image**, **Eyebrow**, **Heading**, **Text**, **Button label** and **Link**. Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| **Featured collection** | A grid, carousel or rail of product cards | **Layout**: **Grid**, **Carousel** or **Rail with copy** (the eyebrow, heading, text and button in a column beside the cards, with arrows to scroll them; the Tress preset's wigs row). **Eyebrow**, **Heading** ("Best sellers"), **Text**, **Link label** and **Link** (Grid and Carousel), **Button label** and **Link** (Rail), and under **Products to show**: **Collection**, **Products** (pick products to show instead of the collection) and **Products to show** (8, 2 to 12). |
| **Featured product** | One product with its buy box | **Product**, **Enable image zoom** (on), **Color scheme**, **Wave edges** and the pre-order settings (chapter 6). Blocks: Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Trust rows, Hair details, Care, Product link, the theme blocks of chapter 5 and app blocks. The length scale, texture chips, glossary and nail sizer all work here too. |
| **Collection list** | Collection tiles as tall **texture mirrors** | **Heading** ("Collections"), **Body**, **Link label** and **Link**, **Tile shape** (Capsule, Soft corners or Square), **Tiles per row on desktop** (4, 3 to 5), **Collections** (leave it empty to list every collection) and **Collections per page** (12, 4 to 24). **Collection** blocks pick the tiles by hand, in your order: **Collection**, **Heading**, **Detail line** ("12–30 in · from $129.00"; blank shows the product count) and **Image** (blank uses the collection's image). A tile with no image shows the **drawn texture** when its title names a texture ("Body wave"), or a **drawn nail** when it names a nail shape ("Almond"), so Shop by texture and Shop by shape look finished before your photos are in. On your collections list page the section paginates. |
| **Bundles and installs** | **Build your install**, or prebuilt kits | **Type**: **Prebuilt kits** or **Build your install** (chapter 9). **Add section** offers both. In Prebuilt kits, each **Kit** block is one product you sell as a set: **Tier** ("Starter install"), **Product**, **Tagline**, **Kit contents** (one item per line, or a metafield as a dynamic source) and **Button label** ("Add kit to bag"). |
| **Length guide** | The length chart spotlight with the figure | See chapter 8 |
| **Image with text** | A story beside a photo, or five staggered mirrors | **Layout**: **Image and text**, or **Mirrors** (up to five images in capsules of staggered heights under the heading, with a caption and a link: the Tress preset's "Install of the week"). **Image frame** (Capsule, Soft corners or No frame) and **Media position** (Left or Right) for Image and text. **Image** to **Fifth image**, **Eyebrow**, **Heading** ("Install of the week"), **Body**, **Ticks** (one per line, each with a tick in the accent color), **Button label** and **Link** (Image and text), **Caption** and **Link label** and **Link** (Mirrors). **Add section** offers **Image with text** and **Mirrors**. |
| **Icon row** | Trust icons, or numbered steps | **Style**: **Icons** or **Numbered steps** (a numeral in a capsule in place of each icon: Lacquer's "Apply in 3 steps" and Flutter's "Lash care"). **Heading**, **Text**, **Columns on mobile** (1 column or 2 columns, Icons only), **Color scheme** and **Wave edges**. Up to six **Item** blocks: **Icon** (None, Truck, Return, Card, Ruler, Tape measure, Bonnet, Sparkle, Scissors, Drop, Heart, Gift, Star, Envelope, Shield, Headset, Chat, Clock, Store, Lock, Globe or Check mark), **Heading**, **Text** and **Link**. State only terms your store actually offers. **Add section** offers **Icon row** and **Numbered steps**. |
| **Shop the look** | A photo with round numbered hotspots on the products in it | **Image** (shown uncropped, at its own shape, so hotspots stay on the parts they mark at every screen size), **Heading** ("Shop the look") and **Text**. Up to twenty **Hotspot** blocks: **Label**, **Horizontal position** and **Vertical position** (50%, 0 to 100), **Product** (optional: shows the product's price and stock, and links to it) and **Detail** ("22 in body wave"; connect a metafield of the chosen product as a dynamic source). |
| **As seen in** | Up to twelve press or salon logos | **Heading**, **Logo colors** (Original, the default, or Monochrome: every logo in one flat color that suits the palette; use logos with transparent backgrounds), **Logo height** (40px, 24 to 96) and **Layout on mobile** (Wrap or Scroll). Each **Logo** needs a **Company name** (read by screen readers; a logo without a name isn't shown), with an **Image**, an optional **Link** and **Quote**. |
| **Rich text** | Free text and buttons, or testimonial cards | **Layout**: **Stacked**, or **Cards** (testimonial blocks side by side under the section heading; phones swipe through them). **Heading**, **Text**, **Link label** and **Link** ("Read every review"). Add Eyebrow, Heading, Text, Button and **Testimonial** blocks (chapter 5). **Add section** offers **Rich text** and **Testimonial**. Replace the sample quotes with real ones. |
| **FAQ** | Questions and answers, in two columns | **Eyebrow**, **Heading**, **Body** and **Open the first question** (on). Add **Collapsible row** blocks (chapter 5), one per question. Length, lace, density, cap sizes, colouring, returns on opened hair and nail sizing are what your shoppers ask most. |
| **Newsletter** | An email sign-up on the bold band | **Heading** ("Join for 10% off your first install"), **Body**, **Button label** ("Get my 10% off") and **Fine print** ("One code per customer. Unsubscribe any time."). **Color scheme** Bold band and a wave along the top by default. Sign-ups are tagged `newsletter`. |
| **Blog posts** | Your latest articles | **Heading** ("Hair care, from our stylists"), **Text**, **Blog** (shows its newest articles and adds a link to it), **Articles to show** (3, 2 to 12) and **Articles** (picked by hand, in your order, instead of 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** |

> **Note:** After a shopper signs up, the newsletter says "You're on the list. Watch your inbox." The theme doesn't send anything itself: if a heading promises a discount (the presets' "Join for 10% off your first install"), set up a welcome email that carries the code in **Marketing › Automations**, or change the heading. To change the thank-you line, go to **Online Store › Themes › … › Edit default theme content** and search for "Watch your inbox".

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery, the Hair details and Care panels, and the buy box (chapter 6) |
| **Product recommendations** | A row of cards. **Heading** ("Complete the install"), **Body** ("Matching bundles, strand for strand."), **Link label** and **Link**, **Recommendation type** (**Related products**, the default, or **Complementary products**, the ones you pair with this one in the Search & Discovery app) and **Products to show** (4, 2 to 10). |
| **Quick order list** | Product templates only. For B2B customers and trade buyers: 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). Flutter's `product.trade` template has one ("Order by the tray"). |

To pair products for **Complementary products** (the closure that goes with a bundle, the glue that goes with a lash style): install Shopify's free **Search & Discovery** app, open **Recommendations**, search for a product and add its complementary products. They can take a little while to appear after you save.

## Page sections

* **Page**: your page's content, with **Show breadcrumbs**, an **Eyebrow** and **Fact** blocks (a **Label** and a **Value**, such as Lace: HD) under a **Heading** ("At a glance").
* **Contact form**: **Show breadcrumbs**, **Eyebrow** ("Get in touch") and **Show order number field** (on), with **Menu column** blocks (**Heading**, "Quick links", and **Menu**) and **Text** blocks (**Heading** and **Text**) beside the form. The presets' "Before you write" block asks for an order number and a daylight photo of the shopper's hair.
* **Collection list** (the collections list page): with no collections chosen it lists every collection, **Collections per page** at a time, with page numbers.
* **Collection** and **Search**: chapter 13. **Blog**: **Show breadcrumbs**, **Body**, **Show featured entry** (on), **Show tags** (on) and **Articles per page** (13, 6 to 30). **Article**: blocks for breadcrumb, title, byline (**Show author**, on), featured image, content, tags and share, plus the theme blocks of chapter 5.
* **404 page**: **Heading** ("This page has slipped out of the bonnet."), **Body** and **Show the requested address** (on).
* **Password**: your "opening soon" page, with a **Color scheme** (Bold band), **Heading** ("Something glossy is on its way"), **Body** and **Show newsletter form** (on).

## 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 now** button. The **Compare** section (**Show breadcrumbs**) shows them side by side: price and availability, then the rows of its **Hair details** block (the presets head it "Specifications"): origin, grade, weight per bundle, lace, cap size, density, colouring, lifespan and wears from the metafields in chapter 7, with a switch to show only the rows that differ. Add **Spec row** blocks to it to compare more of your metafields (chapter 6). For a cleaner table, clear the block's **Stat pills** setting there, so every value is a row.