# Sections

Chapter 4 of the Torque user guide.

Sections are the full-width building blocks of a page. Choose **Add section** in the editor to see the ones allowed on the current template. Most sections have a **Kicker** (the small accent line above the heading), a **Heading**, a **Body** and a **Background**: **Page**, **Alternate** (the alternate background colour) and, on some, **Dark band** (a dark block, light text). Alternating Page and Alternate down the home page gives the store its rhythm.

## Hero

Home page only. The big opening image.

- **Layout**: **Photo with finder** (default) adds the vehicle finder over the photo's bottom edge when vehicle fitment is on; **Photo** is a full-width photo with text over it; **Split** puts the text beside the image on an Alternate or Dark band background (**Background**, shown for Split).
- **Image**, and **Image on phones** (optional; shown on screens under 750px wide; the image's focal point is used when it's empty).
- **Image overlay** (60%, 0 to 80% in steps of 5): darkens the photo behind the text. Keep it at 55% or higher so the text stays readable. **Height**: Small, Medium (default) or Large. **Text on phones**: Below the image (default) or Over the image.
- Content: **Kicker**, **Heading**, **Body**, **Primary button label** (default "Shop all") and link, **Secondary button label** and link.
- Vehicle finder (Photo with finder only): **Finder heading** (default "Find parts that fit") and **Finder text**.
- **Product**: shown as a product card over the image's bottom corner.
- **Stat** blocks (**Value**, **Label**, such as "24 h" / "Dispatch"): show in the Split layout, under the buttons.

> Set a focal point on your hero photo (in **Content › Files** or the image picker's **Edit**) so the subject stays in frame on phones.

## Slideshow

Home, page and collection templates. Up to 6 **Slide** blocks, each with **Image**, **Kicker**, **Heading**, **Text**, **Button label** and **Link**. Section settings: **Height** (Small, Medium, Large), **Image overlay** (60%), **Rotate slides automatically** (off; shoppers get a pause button, and slides never rotate for visitors who prefer reduced motion) and **Change slides every** (7s, 5 to 10s).

## Vehicle finder

The Year / Make / Model / Engine selector as a section of its own. Settings: **Heading** (default "Find parts that fit"), **Text**, **Categories** (adds a category step; leave empty to search the collection set in Theme settings), **Button label** (default "Find parts"), **Show "Search by part number instead"** (on) and **Background** (Page, Alternate (default), Dark band). It shows nothing to shoppers until vehicle fitment is set up (chapter 6).

## Icon row

A strip of up to 6 short promises with icons, such as dispatch times, returns and warranties. Section: **Heading**, **Columns on mobile** (1 or 2, default 2), **Background**. Each **Item** has an **Icon** (Truck, Return, Shield, Fit check, Vehicle, Wrench, Gauge, Tent, Mountain, Map pin, Phone, Headset, Chat, Clock, Store, Lock, Card, Globe, Lightning bolt, Check mark, or None), **Heading**, **Text** and **Link**. State only terms your store actually offers.

## Collections grid

Named **Shop by category** in the Add section list. Home page and the collections list page.

- **Kicker**, **Heading** (default "Shop by category"), **Body**, **Link label** and **Link** (home page only).
- **Collections**: leave empty to list every collection. **Collections per page** (12, 4 to 24): on the home page the most shown; on the collections page, per page.
- **Tile style**: **Cutout** (default) shows the collection image whole on a plain tile, for product photos; **Photo** fills a tall tile and puts the name over it.
- **Columns on desktop** (4, 5 or 6; default 6), **Show product count** (on), **Background**.

## Featured collection

A row of product cards from one collection. **Kicker**, **Heading** (default "Best sellers"), **Body**, **Collection**, **Link label** (default "Shop all"; links to the chosen collection), **Products to show** (4, 2 to 8), **Columns on desktop** (3, 4 or 5), **Background**. Cards follow **Theme settings › Product cards**.

## Featured product

One product with its gallery and buy box, anywhere outside the header and footer. Settings: **Product**, **Background**, **Enable image zoom** (on), and the same pre-order options as the product page (chapter 7). Blocks: Title, Vendor, Price, Inventory, Variant picker, Description, Buy buttons, Link, Fitment check, app blocks and the general theme blocks.

## Shop the build

A lifestyle photo with numbered hotspots and a matching parts list, so shoppers can buy everything in the picture. Up to 20 **Hotspot** blocks.

- Section: **Image** (shown uncropped, at its own shape, so hotspots stay on the parts they mark at every screen size), **Kicker** (default "Shop the build"), **Heading**, **Text**, **Image position** (Left or Right), **Show parts list** (on), **Show "Add all to cart"** (on; adds every listed part that's in stock and has no options, in one click), **Background**.
- Hotspot: **Label**, **Horizontal position** and **Vertical position** (0 to 100%, from the image's left and top edges), **Product** (optional; shows the product's price and stock, and links to it) and **Detail** (a short spec; you can connect a metafield of the chosen product).

Hovering or focusing a hotspot highlights its row, and the other way round. On phones, tapping a hotspot scrolls to its row. Products with options show "Choose options" instead of an add button and are left out of the add-all total.

> Place hotspots in the editor with the preview open: move the sliders until each number sits on its part.

## Kits

Pre-built bundles, each sold as one product. Section: **Kicker** (default "Service kits"), **Heading**, **Body**, **Background** (Alternate by default). Each **Kit** block: **Kit label** (such as "Weekend job"), **Product**, **Kit name** (leave empty to use the product's title), **Tagline**, **Kit contents** (one item per line, or connect a metafield) and **Button label** (default "Add kit to cart"). The button adds the product's first available variant. Create the kit as its own product in your admin (or with Shopify's Bundles app) so stock and price are right.

## Image with text

An image beside a heading, body and button. **Image**, **Media position** (Left or Right), **Kicker**, **Heading**, **Body**, **Button label**, **Link**, **Background** (Page, Alternate, Dark band).

## Logo list

Up to 12 brand logos. Section: **Heading** (default "Brands we stock"), **Link label** and **Link**, **Logo colors** (Original, or Monochrome, which turns each logo into one flat colour that suits the palette; use logos with transparent backgrounds), **Logo height** (40px, 24 to 64px), **Layout on mobile** (Wrap or Scroll), **Background**. Each **Logo**: **Image**, **Company name** (read by screen readers, and shown as text when there's no image; a logo without a name isn't shown), **Link** and **Quote**.

## Rich text

Free-form text built from theme blocks (Heading, Text, Button and so on; chapter 5). **Alignment** (Left or Center) and **Background**.

## FAQ

Questions and answers that open and close. **Kicker**, **Heading**, **Body**, **Background**, and one **Collapsible** block per question (chapter 5).

## Blog posts

Article cards. **Kicker**, **Heading** (default "Field notes"), **Blog** (shows its newest articles and adds a link to it), **Link label** (default "All articles"), **Articles to show** (3, 2 to 12), **Articles** (overrides the blog; articles appear in the order you pick them), **Background**.

## Newsletter

A sign-up band. **Kicker**, **Heading** (default "Trail notes and restock alerts"), **Body**, **Layout** (Side by side or Centered) and **Background** (Dark band by default).

## Section

A blank section for your own layout: add any theme blocks and app blocks to it. Setting: **Background**.

## Custom Liquid

**Liquid**: add app snippets or other Liquid code. **Background**. Use it for embed codes an app gives you.

## Contact form

On the `page.contact` template. Create a page in **Online Store › Pages**, choose the **contact** template, and add it to your menu. Settings: **Show breadcrumbs**, **Kicker** (default "Get in touch") and **Show order number field** (on). Blocks: **Menu column** (a list of quick links) and **Text** (a heading and text, for opening hours or an address). Messages go to your store's sender email.

## Compare

On the `page.compare` template. Shows up to 3 products the shopper chose side by side, with their price, availability and the rows of its **Spec table** block. Add **Spec rows** to the Spec table to compare product metafields. In the theme editor, the first product in your catalogue previews the rows.

To turn comparison on: create a page with the **compare** template, then in **Theme settings › Product cards** turn on **Show compare checkbox** and choose the page as **Comparison page**.

## Quick order list

Product template only. A table of every variant with quantity fields, for trade customers who order in bulk. **Heading** (default "Trade quick order"), **Variants per page** (25, 10 to 50 in steps of 5), **Show SKU** (on). Best on an alternate product template you assign to products with many variants.