# Sections

Sections are the building blocks of your pages. In the theme editor, select **Add section** on a page to see the list. Inside a section, **Add block** adds items such as a slide, a question, or a button.

Most sections share these settings, which are not repeated below:

- **Color scheme:** Which of your [color schemes](https://lintelagency.com/support/transom/getting-started.md#colors) the section uses.
- **Top padding** and **Bottom padding:** Space above and below the section, from 0 to 160 pixels.
- **Make section full width:** On sections that offer it, lets the section run edge to edge instead of staying inside the page width.
- **Subheading** and **Heading:** A small label above a larger headline. Leave blank to hide.

Sections are grouped here by where you will use them: [header and footer](#header-and-footer), [home page](#home-page-sections) (these work on any page), [product](#product-page-sections), [collection and search](#collection-and-search-sections), [cart](#cart-sections), and [other pages](#other-pages).

Section names below match what you see in the theme editor.

## Header and footer

These sections live in the header and footer areas and appear on every page.

### Announcement bar

A slim bar at the top of the store for shipping notices, sales, and short messages.

**When to use it:** Free shipping thresholds, a current sale, or a launch date. Keep messages short and true.

**Blocks (up to 6):**
- **Announcement:** A line of **Text** with an optional **Link**.
- **Countdown** (one allowed): Text plus an **End date and time**, with an optional link. See [Countdown](https://lintelagency.com/support/transom/sell-more.md#countdown).

**Settings:**
- **Rotate announcements automatically:** On by default. With more than one message, visitors can also pause and step through them with buttons.
- **Change announcement every:** Seconds between messages, from 3 to 10.

### Header

The logo, main menu, search, account, and cart.

**Settings:**
- **Main menu:** Which menu to show. Defaults to "Main menu".
- **Customer account menu:** The menu shown to signed-in customers.
- **Logo position on large screens:** **Left** or **Center**.
- **Sticky header:** **None**, **On scroll up** (the header returns when the visitor scrolls up), or **Always**.
- **Show country/region selector** and **Show language selector:** Appear only if your store has more than one market or language.

**Blocks:**
- **Mega menu:** Turns one main-menu item into a full-width panel. Enter the exact name of a main menu item that has sub-items in **Menu item**, then pick a **Layout**:
  - **Link columns:** One column per sub-item, with its own sub-items listed under it.
  - **Picture tiles:** Each sub-item as a tile with its collection or product image.
  - **Links and products:** The sub-items as a list beside product cards from a **Collection** you choose (2 to 4 products).

  Every layout can add a promotion with an **Image**, **Heading**, **Button label**, and **Link**.

### Footer

Menus, text, social icons, newsletter signup, and the legal bar.

**Blocks (up to 8):**
- **Menu:** A **Heading**, a **Footer menu** (defaults to "Footer"), and a **Column width** from 2 to 12.
- **Text:** A **Heading**, **Text**, and a **Column width**.
- **Social media** (one allowed): A **Heading** and column width. The icons come from [Theme settings > Social media](https://lintelagency.com/support/transom/getting-started.md#social-media).

**Settings, in the Bottom bar group:** **Show country/region selector**, **Show language selector**, **Show payment icons**, **Show Follow on Shop** (needs Shop Pay turned on), and **Show policy links**.

### Email signup popup

A modal window that asks for an email address after a delay. It sits in the overlay area, so it can appear on any page.

**Settings:**
- **Heading**, **Text**, and an **Image**.
- **Show after:** Seconds before it opens, from 3 to 60.
- **Show again after (days):** How long before the same visitor sees it again, from 1 to 60. This is remembered in the visitor's own browser.

In the theme editor, the popup opens only while you have its section selected, so it does not cover what you are editing.

### Age verifier

A full-screen age check. Visitors must answer before they can browse. Pressing Escape or clicking outside does not close it.

**Settings:** **Heading**, **Text**, **Confirm button label**, **Decline button label**, **Message after declining**, and **Remember answer for (days)** from 1 to 60.

**When to use it:** Only if you sell age-restricted products and your region requires a check.

## Home page sections

These sections work on the home page and on any other page you build in the theme editor, including custom pages (**Online Store > Pages**, then choose a template).

### Slideshow

A rotating hero with up to 6 slides.

**Blocks:**
- **Slide:** **Image** (2400 x 1200 px recommended), optional **Mobile image**, **Subheading**, **Heading**, **Text**, **Button label**, **Link**, **Text position** (**Top left**, **Center**, or **Bottom left**), and a **Color scheme** for that slide's text.

**Settings:**
- **Layout:** **Text on image** or **Text beside image**.
- **Height:** **Short**, **Medium**, or **Tall**.
- **Overlay opacity:** Darkens or lightens the image so text stays readable.
- **Rotate slides automatically**, with a seconds setting between 3 and 12.
- **Accessible label:** Describes the slideshow for screen reader users.

### Image banner

One large image with a headline and a button.

**Settings:** **Image**, **Mobile image**, **Subheading**, **Heading**, **Text**, **Button label**, **Link**, **Text placement** (**On image** or **Below image**), **Height** (**Short**, **Medium**, **Tall**), **Overlay opacity**, and **Text color scheme**.

### Scrolling text

A moving strip of short messages, good for a brand line or shipping promise.

**Blocks (up to 8):** **Message** with **Text** and an optional **Link**.

**Settings:** **Speed** (seconds for one full pass, 10 to 60). Defaults to the signal color scheme.

### Rich text

Free-form text content. Use it for introductions, brand statements, or a short call to action.

**Blocks:** **Heading**, **Text**, **Button**, **Custom Liquid**, and apps.

**Settings:** **Alignment** (**Left** or **Center**).

### Image with text

An image or looping video beside a short story.

**Blocks (up to 6):** **Point:** one line of text, shown as a bullet.

**Settings:**
- **Image**, or **Video** (plays muted and looped while on screen, with a pause button; replaces the image).
- **Aspect ratio:** **Square**, **Portrait**, or **Landscape**.
- **Media position on desktop:** **Left** or **Right**.
- **Button label** and **Button link.** On product pages, an empty link jumps to the buy box.

### Feature grid

A grid of benefits or proof points.

**Blocks (up to 8):**
- **Feature:** An **Icon** (check mark, truck, return, shield, lock, gift, star, heart, leaf, clock, battery, chat, or none), or an **Image** that replaces the icon, plus a **Heading** and **Text**.
- **Figure:** A big number such as "92%", with a **Label** and a **Source**. Only use figures you can back up, and name the source.

**Settings:** **Alignment** (**Left** or **Center**) and **Columns on desktop** (2 to 4).

### Featured collection

A row or grid of products from one collection.

**Settings:** **Collection**, **View all link label**, **Maximum products to show** (2 to 16), **Columns on desktop** (2 to 5), **Layout** (**Grid** or **Carousel**), **Image ratio** (**Square**, **Portrait**, **Landscape**), and **Show quick add**. See [Quick add and quick view](https://lintelagency.com/support/transom/sell-more.md#quick-add-and-quick-view).

### Collection list

Cards that link to your collections.

**Blocks (up to 12):** **Collection**.

**Settings:** **Layout** (**Grid** or **Carousel**), **Columns on desktop** (2 to 5), and **Image ratio**.

### Collection tabs

Several collections in one place; shoppers switch between them using tabs.

**Blocks (up to 6):** **Tab** with a **Collection** and a **Tab label** (defaults to the collection title).

**Settings:** **Maximum products to show** (2 to 12) and **Columns on desktop** (2 to 5).

### Featured product

One product with its buy box, placed anywhere.

**Settings:** **Product**, **Media layout** (**Featured first, then two columns**, **One column**, or **Thumbnails under one large image**), **Media position on desktop**, and **Enable image zoom**.

**Blocks:** Title, Vendor, Price, Variant picker, Quantity selector, Buy buttons, Inventory status, Description, Collapsible tab, Text, Custom Liquid, and apps. These work the same as the [product information blocks](https://lintelagency.com/support/transom/product-pages.md#product-information-blocks).

### Bundle builder

Lets shoppers pick a set number of products from a collection and add them all in one click. See [Bundle builder](https://lintelagency.com/support/transom/sell-more.md#bundle-builder) before you use it, because the bundle price comes from a discount you create.

**Settings:** **Heading**, **Text**, **Collection**, **Maximum products to show** (3 to 12), **Products in a bundle** (2 to 6), and **Savings note**.

### Shoppable image

A lifestyle photo with clickable dots that open product cards.

**Blocks (up to 8):** **Hotspot** with a **Product**, plus **Horizontal position** and **Vertical position** (0 to 100 percent) to place the dot on the image.

**Settings:** **Image** and **Aspect ratio**.

### Before and after

A draggable slider that compares two images.

**Settings:** **Before image**, **Before label**, **After image**, **After label**, and **Aspect ratio**. Use real results only.

### Comparison table

Compares up to four products or options side by side.

**Settings:** For each of four columns, a **Product** (optional) and a **Column name**.

**Blocks (up to 20):** **Feature** (a row) with a **Feature** name and a value per column. Enter yes or no to show a check or a dash, or any short text.

### Timeline

A vertical story of milestones, good for brand history or "how it's made".

**Blocks (up to 12):** **Milestone** with a **Label**, **Heading**, **Text**, and **Image**.

### Product finder

A short quiz that sends shoppers to a filtered collection.

**Before you use it:** Enable the Tag filter in the Search and Discovery app so answers can filter products.

**Settings:** **Results collection**.

**Blocks (up to 5):** **Question** with up to four answers. Each answer filters by its tag. Leave the tag empty to use the answer text. Tags must match the tags on your products.

### Testimonials

Customer quotes with optional star ratings.

**Blocks (up to 12):** **Testimonial** with a **Quote**, **Author**, **Rating** (0 to 5) and an optional **Product**. Only enter a rating the customer actually gave; 0 hides the stars.

**Settings:** **Anchor:** Lets other blocks link to this section. For example, enter `reviews` here and enter the same word in the [Rating block's](https://lintelagency.com/support/transom/product-pages.md#rating) **Reviews section anchor** so the product stars scroll to this section.

### Collapsible content

Expandable questions and answers.

**Blocks (up to 20):** **Question** with a **Question** and **Answer**.

**Settings:** **Layout** (**Heading above questions** or **Heading beside questions**), **Open first question**, and **Add question data for search engines**. Turning that on helps search engines show your questions in results. Only turn it on when the questions and answers are visible on the page and are true.

### Video

A video from Shopify or from a link.

**Settings:** **Shopify-hosted video**, **Video link** (plays when no Shopify-hosted video is selected), **Cover image**, and **Aspect ratio** (**Wide**, **Landscape**, **Square**, **Vertical**).

### Logo list

A row of "as seen in" or partner logos.

**Blocks (up to 12):** **Logo** with an **Image** (160 x 80 px PNG recommended) and a **Link**.

**Settings:** **Show logos in one color:** On by default.

### Trust strip

A row of short promises with icons, such as shipping, returns, secure checkout, and support. Best placed right under the buy box or the hero. See [Trust strip](https://lintelagency.com/support/transom/sell-more.md#trust-strip).

**Blocks (up to 4):** **Promise** with an **Icon**, **Heading**, and **Text**.

### Recently viewed

Shows products the visitor viewed on this device. Hidden until they have viewed a product.

**Settings:** **Maximum products to show** (2 to 6).

### Email signup

An inline signup form. Submissions add a customer with the tag "newsletter" to your **Customers** list.

**Settings:** **Layout** (**Text beside the form**, **Centered**, or **Image beside the form**), **Image** (for the image layout), **Heading** and **Text**.

### Beam and columns

A flexible layout: a headline (the "beam") with columns of content above, below, or beside it.

**Beam settings:** **Subheading**, **Heading**, **Button label**, **Button link**, **Beam position** (**Above columns**, **Below columns**, or **Beside columns**), and **Show beam line**.

**Layout settings:** **Column spacing** (0 to 80 px).

**Blocks (up to 12):** **Column**, plus apps. See [Theme blocks](#theme-blocks) for what goes inside a column.

### Custom Liquid

For app snippets and custom code. Only use code from a source you trust.

**Settings:** **Liquid code**.

## Product page sections

### Product information

The main section of every product page: media gallery, title, price, options, buy buttons, and more. See [Product pages](https://lintelagency.com/support/transom/product-pages.md) for every block.

**Settings:**
- **Media layout:** **Featured first, then two columns**, **One column**, or **Thumbnails under one large image**.
- **Media position on desktop:** **Left** or **Right**.
- **Enable image zoom:** Opens images in a zoom window when clicked.
- **Show sticky add to cart bar:** See [Sticky add to cart](https://lintelagency.com/support/transom/sell-more.md#sticky-add-to-cart).

### Related products

Product suggestions generated from order and product data. They improve over time. Available on product templates only.

**Settings:** **Heading**, **Maximum products to show** (2 to 10), and **Columns on desktop** (2 to 5).

### Other sections that work well on product pages

Trust strip, Image with text, Feature grid, Comparison table, Testimonials, Collapsible content, Timeline, and Recently viewed all appear in the supplied product templates. See [Product pages](https://lintelagency.com/support/transom/product-pages.md#the-six-templates).

## Collection and search sections

### Product grid

The collection page.

**Banner group:** **Show collection description** and **Show collection image**.

**Product grid group:** **Products per page** (8 to 48), **Columns on desktop** (2 to 5), **Columns on mobile** (1 or 2), **Image ratio** (**Square**, **Portrait**, **Tall**, **Landscape**), **Show second image on hover**, **Show color swatches**, **Show quick add**, and **Pagination** (**Page numbers**, **Load more button**, or **Infinite scroll**).

**Filtering and sorting group:** **Filter layout** (**Sidebar**, **Above products**, or **None**) and **Enable sorting.** Customize filters with the Search and Discovery app.

**Promotion tile block:** Puts a tile with an image, heading, text and link inside the product grid, on the first page only. Choose its **Position in the grid** (1 to 24) and **Width** (one or two columns). Up to four tiles.

### Collections list page

The page that lists all collections.

**Settings:** **Heading**, **Collections per page** (6 to 48), and **Image ratio**.

### Search results

The search results page.

**Settings:** **Results per page** (8 to 48), **Columns on desktop**, **Image ratio**, **Show quick add**, **Pagination**, **Filter layout** (defaults to **Above products**), and **Enable sorting**.

Live search suggestions appear as shoppers type in the header search. They have no settings.

## Cart sections

### Cart

The full cart page, used when **Cart type** is **Page** or when shoppers open the cart link directly. It shows cart goals, items, order notes, gift wrapping, cart recommendations, and the checkout button.

### Cart drawer

The slide-in or popup cart. Its settings are in Theme settings > Cart; the section itself only has a **Color scheme**.

## Other pages

### Page

Standard pages such as About or Shipping. Add content with the page editor under **Online Store > Pages**.

### Contact form

A contact form for the contact page template. **Settings:** **Heading**.

### Blog posts and Blog post

The blog list and article pages.

**Blog posts settings:** **Layout** (**Grid** or **Large first article**), **Articles per page** (3 to 24), **Show featured image**, **Show date**, and **Show tags**.

**Blog post settings:** **Show featured image**, **Show author**, and two optional parts under the article:

- **Products in the story:** a grid of products named in an article metafield (default `custom.related_products`, type **List of products**), with its own heading.
- **Questions:** questions and answers from an article metafield (default `custom.faq`, type **JSON**), shown as an accordion and added to search results as FAQ structured data. See [Article metafields](https://lintelagency.com/support/transom/metafields.md#article-metafields).

### 404 page

The "page not found" screen.

### Password page

The page visitors see while your store is password protected.

## Theme blocks

Theme blocks are small, reusable pieces you can place inside sections that accept them (Rich text and Beam and columns' **Column** block).

| Block | What it is | Main settings |
|---|---|---|
| **Heading** | A headline. | **Heading**, **Size** (**Extra large**, **Large**, **Medium**, **Small**), **Heading level** (H1 to H4), **Alignment**. |
| **Text** | A paragraph. | **Text**, **Size** (**Large**, **Medium**, **Small**), **Use muted text color**, **Alignment**. |
| **Button** | A button or link. | **Button label**, **Link**, **Open link in a new tab**, **Style** (**Solid**, **Outline**, **Text link**), **Make button full width**, **Alignment**. |
| **Image** | A picture. | **Image**, **Aspect ratio** (**Original**, **Square**, **Portrait**, **Landscape**, **Wide**), **Link**. |
| **Column** | A column inside Beam and columns. It can hold headings, text, buttons, images, and custom code. | **Column width** (out of 12; columns in a row should add up to 12; they stack on mobile) and **Vertical alignment**. |
| **Custom Liquid** | Custom code or an app snippet. | **Liquid code**. |

Tip on headings: use one H1 per page. Section headings are usually H2.

## Behind-the-scenes sections

A few sections have no settings because they only render content on demand: the cart items inside the drawer, the quick view window, the live search results, the "bought together" rows, and the recently viewed cards. You do not need to add or edit them.