# Sections

Chapter 4 of the Loot user guide.

Add a section in the theme editor with **Add section**. Most sections share a section heading: a **Kicker** (the small tilted pop sticker above the heading) with a **Kicker icon**, a **Heading**, sometimes a **Body**, and a **Link label** and **Link** that end in an arrow tile. **Background** is Page, Alternate band and, on some sections, Accent. 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 a collection with no products or a drop calendar with no drops, take no space on your storefront.

## Home page and content sections

| Section | What it's for | Key settings |
| --- | --- | --- |
| **Hero** | The big opening block | **Layout**: **Burst** (a tilted blister card on your accent color with sunburst rays, a back card peeking out and a price starburst), **Split** (the image tilted on a bright panel at the right edge) or **Image** (a full-width photo with the text on a card, never on the photo). Kicker, **Heading**, **Highlight** (a phrase from the heading drawn on a tilted sticker, such as "every Friday."), body and two buttons. **Image** (cut-outs on a transparent background look best; empty uses the product's), **Back image** (Burst), **Product** (adds its name, edition and lowest price, and links the card), **Sticker text** (empty shows the lowest price; a \| splits off a small first line, as in Game of\|the month), **Chase chip** (Burst) and **Text card position** (Image). **Count down to**: Nothing, The product's release date, or A date and time (**End date**, **End time**, **Time zone**), with a **Countdown label**. Up to four **Stat** blocks (icon, value and label, such as "2–4 players") show as tiles under the text. |
| **Slideshow** | Several heroes in turn | Up to six **Slide** blocks, each with **Layout** (Burst or Split), kicker, heading, highlight, text, two buttons, **Image**, **Product** and **Sticker text**. **Rotate slides automatically** (off) and **Change slides every** (7s, 5 to 10). Shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion. |
| **Collection list** | Fandom tiles: one per collection, with its image in a tinted tile | **Layout**: Row (six across, a swipe strip on phones) or Cards (three across, two on phones). **Collections** (empty lists every collection) and **Collections to show** (6, 2 to 24). The presets **Collection list** and **Collection cards** start you on each layout. |
| **Featured collection** | A grid of blister cards | **Collection**, **Products to show** (8, 2 to 12), **Layout** (Grid or Carousel), **Columns on desktop** (3, 4 or 5) and **Columns on mobile** (1 or 2). The link defaults to the collection. |
| **Featured product** | One product with its buy box | **Product**, **Background** (Page, Alternate band or Accent), **Enable image zoom**, the pre-order settings (chapter 6) and the product blocks (Product metadata, Title, Product vendor, Price, Inventory, Variant picker, Description, Buy buttons, Product link, and app blocks) |
| **Drop calendar** | Upcoming releases with countdowns and Remind me | See chapter 9 |
| **Set tracker** | A series or wave as a checklist shoppers tick off | See chapter 10 |
| **Image with text** | A story beside an image | **Image**, **Image tile** (Plain, or Dots: a halftone dot pattern that cut-out images float on), **Media position** (Left or Right), **Sticker text** (a starburst on the image corner, such as Grade\|9.5), kicker, heading, body (bulleted lists show as tick tiles) and a button. Background defaults to Alternate band. |
| **Bundles** | Up to three bundle tiers, side by side | Each **Bundle**: **Tier** ("Starter pack"), **Tier color** (a rarity color or Accent), **Product** (a bundle product you sell; its compare-at price makes the "Save $40" chip), **Tagline**, **What's inside** (one item per line), **Button label**, and **Highlight this bundle** with a **Highlight sticker** ("Most picked"). |
| **Shop the shelf** | A photo of a shelf or table with pins on the things you sell | **Image** (never cropped, so pins stay put). Up to twelve **Hotspot** blocks: **Product** (adds its price and a quick add), **Label**, **Horizontal position** and **Vertical position** (0 to 100%) and **Detail**. Each pin opens a mini blister card; on phones the cards are listed under the photo. |
| **Trust strip** | Up to six short promises with icons | Kicker, heading, **Columns on mobile** (1 or 2). Each **Item**: **Icon** (21 icons, from Box and Truck to Dice, Meeple and Puzzle piece), **Heading**, **Text** and **Link**. State only terms your store actually offers. |
| **Licensed brands** | Up to twelve brand or licence logos | **Logo colors** (Original, or Monochrome in one flat color; use transparent logos), **Logo height** (40px, 24 to 56), **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**. |
| **Rich text** | Free text and buttons | **Alignment** (Center or Left) and **Background** (Page, Alternate band or Accent). Add Kicker, Heading, Text and Button blocks. |
| **Section** | An empty section you fill with blocks | **Alignment** and **Background**. Takes any theme block and app blocks. |
| **FAQ** | Questions and answers | **Layout**: Heading beside questions, or Heading above questions. Add **Collapsible row** blocks. |
| **Newsletter** | An email sign-up band | Heading ("Hear about drops first."), body, **Button label** ("Get drop alerts"), **Note** ("Unsubscribe any time."), **Customer tag** ("newsletter") and **Background** (Night, Accent or Alternate band) |
| **Blog posts** | Your latest articles | **Blog** (shows its newest articles) or **Articles** (picked by hand, in your order), **Articles to show** (3, 2 to 12) |
| **Custom Liquid** | App snippets or your own code | **Liquid**, **Spacing** (Regular, Tight or None) and **Background** |

## Product page sections

| Section | What it's for |
| --- | --- |
| **Product** | The gallery and the buy box (chapter 6) |
| **Product details** | Two panels under the product: the **Spec table** ("Box details") and the **Condition guide** (chapters 6 and 8). **Background**: Page or Alternate band. |
| **Set tracker** | With **Layout** set to Strip and **Set** left empty, it shows the product's own set: "Complete the set" (chapter 10) |
| **Product recommendations** | A row of blister cards. **Source**: Shopify recommendations (with **Recommendation type** Related or Complementary) or Expansions (the product's `custom.expansions`, for a base game's "Expand this game" row; chapter 11). **Products to show** (4, 2 to 10) and **Columns on desktop**. The preset **Expansions** starts you on the expansions source. Complementary products come from the Search & Discovery app. |
| **Quick order list** | For B2B customers: every variant of a product in a table with quantity fields. **Variants per page** (25, 10 to 50) and **Show SKU**. |

## Page sections

* **Page**: your page's content, with **Show breadcrumbs**, a kicker, **Show the publish date** and a facts panel (**Facts panel heading**, "At a glance") filled with **Fact** blocks (label and value, such as Open: Thu to Sun, 11 am to 6 pm).
* **Contact form**: kicker ("Ask the counter"), **Form heading** and **Show order number field** (on), with **Menu column** blocks (quick answers) and **Text** blocks (an icon, heading and text, such as your address) beside the form.
* **My sets**: chapter 10.
* **Collection** and **Search**: chapter 13. **Blog** and **Article**: your blog's article list (**Show featured entry**, **Show tags**, **Articles per page**) and article pages (blocks for breadcrumb, title, byline, featured image, content, tags and share).
* **404 page**: heading "This page rolled a 1.", body, link and **Show the requested address**.
* **Password**: your "opening soon" page, with a heading and highlight, an optional countdown to your **Opening date** and a newsletter form (**Button label** "Tell me when").

## 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 shows them side by side with price, availability and the rows of its **Spec table** block; add **Spec row** blocks to compare your own metafields, such as scale or piece count.