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.