# Product pages

Transom comes with six product page templates. A template is a saved page layout. You can give every product the same template or match the template to the product, for example a long story page for your hero product and a simple page for everything else.

## The six templates

| Template | Best for | What is on the page |
|---|---|---|
| **Default product** | Most products | Media gallery plus the buy box (title, vendor, price, options, quantity breaks, quantity, buy buttons, stock message, pickup, bought together, description, specifications, shipping tab, complementary products, share). Related products below. |
| **Landing** (`product.landing`) | Hero products and ad traffic | A long sales page: rating, benefits list, quantity breaks, specifications, then a trust strip, image-with-text stories, a feature grid with figures, a comparison table, testimonials, questions and answers, and related products. |
| **Bundle** (`product.bundle`) | Multipacks and sets | Rating, quantity breaks, bought together, specifications, and shipping tab, with thumbnails under one large image. Below the buy box: a feature grid, a bundle builder, questions and answers, and related products. |
| **Furniture** (`product.furniture`) | Large, considered purchases | One-column gallery, vendor, rating, pickup availability, specifications, complementary products, then an image-with-text craft story, a comparison table, and related products. |
| **Editorial** (`product.editorial`) | Story-led, premium products | Vendor, description high in the buy box, specifications, then an image-with-text story, a timeline of how it is made, recently viewed, and related products. |
| **Lighting** (`product.lighting`) | Lamps and electronics | Benefits list, specifications, bulb and safety tab, then a trust strip, a feature grid of figures, and related products. |

Every template can be edited in the theme editor. Add, remove, or reorder sections and blocks as you like. Changes you make to a template apply to every product that uses it.

## Assign a template to a product

1. In your Shopify admin, go to **Products** and open the product.
2. In the **Online Store** panel on the right side, find **Theme template**.
3. Choose the template from the list. The names above appear there: for example "product.landing" appears as **Landing**.
4. Select **Save**.

To preview, use the **View** link on the product page, or use the preview menu in the theme editor to switch to a product that uses the template you are editing.

Tip: If you want to change a template only for one product, create a new template in the theme editor. Open any product page, select the template name at the top, then **Create template**. Name it, base it on an existing one, and assign it to the product.

## Product information blocks

The **Product information** section holds the buy box. Each item in it is a block. Add, remove, and drag blocks to change what shoppers see.

Most blocks can be used once per page. The **Collapsible tab**, **Text**, **Benefits**, and **Custom Liquid** blocks can be used many times.

### Title

The product name. It is the page's H1 heading.

### Rating

Shows a star rating and review count from the `reviews.rating` and `reviews.rating_count` product metafields. Review apps write these fields. The block is hidden when the product has no rating.

**Setting:** **Reviews section anchor:** Matches the anchor of a reviews section on this page, so the stars link to it. For example, if a [Testimonials section](https://lintelagency.com/support/transom/sections.md#testimonials) has the anchor `reviews`, enter `reviews` here.

The theme does not collect reviews itself. If you want star ratings, install a review app that writes the standard review metafields, or write them yourself. See [Metafields](https://lintelagency.com/support/transom/metafields.md#reviewsrating).

Only show ratings that come from real customers.

### Benefits

A short list with an icon, up to five lines per block.

**Settings:** **Icon** (check mark, truck, return, shield, lock, gift, star, heart, leaf, clock, battery, or chat), and **Benefit 1** to **Benefit 5**. Empty lines are skipped. You can add several Benefits blocks if you want different icons for different groups.

### Vendor

The product's vendor name.

**Setting:** **Link to vendor collection:** Makes the vendor name a link to the page that lists that vendor's products.

### Price

The price, the compare-at price if there is one, and any unit price. It also shows "taxes included" and a shipping policy link when relevant, and installment payment messaging (such as Shop Pay Installments) if you have it enabled.

### SKU

The selected variant's SKU. It updates when the shopper changes variant. Hidden when the variant has no SKU.

### Variant picker

Option choices such as size and color.

**Setting:** **Style:** **Buttons** or **Dropdown**. Options with swatch colors or images always show as swatches.

### Quantity selector

A plus and minus quantity field. It follows the product's quantity rules (minimum, maximum, and increments) if you set them in Shopify.

### Buy buttons

The **Add to cart** button, and the dynamic checkout buttons.

**Settings:**
- **Show dynamic checkout buttons:** Customers see their preferred payment method, such as Shop Pay or Apple Pay.
- **Show recipient form for gift cards:** Customers can send a gift card to someone else with a personal message. Only applies to gift card products.

### Inventory status

A stock message based on your real inventory. It shows "Only N left" at or below your threshold, "In stock" above it, or "Available for pre-order" if the variant sells when out of stock. It shows nothing for products that do not track inventory.

**Settings:** **Low stock threshold** (0 to 20, default 5) and **Show in stock message.**

The theme never invents stock numbers.

### Pickup availability

Shows whether the selected variant can be picked up in store, with a list of locations. It appears only if you have local pickup set up in Shopify. Hidden otherwise.

### Description

The product description from Shopify.

### Specifications

A table of up to six labelled rows, such as material, dimensions, care, and origin. Each row has a **Label**, an optional **Value** you type, and a **Product metafield** setting where you enter a metafield as `namespace.key` (for example `transom.material`). When the product has that metafield, its value replaces the typed value. Rows without a value on the product are skipped, and the block is hidden if every row is empty. The default rows read `transom.material`, `transom.dimensions`, `transom.care`, and `transom.origin`. See [Metafields](https://lintelagency.com/support/transom/metafields.md).

**Settings:** **Heading**, **Show as collapsible tab**, and the six rows.

### Collapsible tab

A heading that opens to reveal text. Use it for shipping and returns, care, ingredients, size guides, and similar.

**Settings:** **Heading**, **Tab content**, **Tab content from page** (pick a page, and its content is shown instead, so you can reuse one shipping policy on many products), and **Open by default.**

### Text

A free text block for notes, guarantees, or reminders.

### Share

A "Share" button. It opens the phone's share menu, or copies the product link on a computer.

### Complementary products

Shows products that go well with this one. To select complementary products, add the Search and Discovery app and use its "Complementary products" settings.

**Settings:** **Heading** and **Maximum products to show** (1 to 6).

### Bought together

"Frequently bought together": the product plus up to three others, added to the cart in one click. Products come from the `transom.fbt` metafield, or from the Search and Discovery app's complementary products. See [Frequently bought together](https://lintelagency.com/support/transom/sell-more.md#frequently-bought-together).

**Settings:** **Heading**, **Savings note**, and **Maximum products to show** (1 to 3, shown beside the product being viewed).

### Quantity breaks

"Buy more, save more" tiers. See [Quantity breaks](https://lintelagency.com/support/transom/sell-more.md#quantity-breaks) before you use this block, because each discount percent shown must match a real automatic discount.

**Settings:** **Heading**, **Layout** (**List** or **Cards** side by side), up to four tiers (each with **Quantity**, **Label**, **Discount**, **Badge** and **Extra line**), and a **Savings note.** A product's `transom.tiers` metafield overrides these tiers.

### Size guide

A link that opens a side panel with the content of a page you choose, such as a size chart table. Create the page in **Online Store > Pages** first. Shoppers close it with the close button or Esc.

### Delivery estimate

Shows when an order placed now should arrive, as real dates: "Order today, arrives Thu, Nov 5 – Tue, Nov 10". You set the **Fastest** and **Slowest delivery** in days, the **Order cut-off** hour, and whether to **Skip weekends**. Keep these in line with your real processing and shipping times.

### Volume pricing

For B2B. Shows the minimum, increments and maximum, plus the price breaks, that Shopify sets for customers on a B2B catalog. Retail shoppers see nothing.

### Quick order list

A table of every variant with its own quantity field, added to the cart in one go. Suits wholesale and products with many sizes or colors.

### Custom Liquid

For app snippets and custom code.

### Apps

App blocks from apps that support app blocks appear in the same list.

## Product media

The gallery shows photos, videos, and 3D models.

**Layouts (Media layout):**
- **Featured first, then two columns:** The selected image is large, with the rest in two columns. On phones, this becomes a swipeable strip with a position counter.
- **One column:** Every image full width, stacked.
- **Thumbnails under one large image:** One image at a time with a thumbnail strip. Use **Thumbnail position** to put the strip **Below**, **Left** or **Right** on large screens; on phones it always sits below.
- **Slider with dots:** One image at a time with arrows and dots.

The image of the selected variant is shown first. Change variants and the gallery follows.

**Zoom:** With **Enable image zoom** on, shoppers can click an image to open it larger.

**Videos:** You can add Shopify-hosted videos and YouTube or Vimeo links to a product's media.

**3D models and AR:** If a product has a 3D model, shoppers can rotate it. On supported phones, a **View in your space** button shows it in their room. Add models in the product's media area. See the [FAQ](https://lintelagency.com/support/transom/faq.md#how-do-i-add-3d-models).

## Sticky add to cart

When **Show sticky add to cart bar** is on in the Product information section, a slim bar appears at the bottom of the screen after the main Add to cart button scrolls out of view. It shows the product image, title, price, and an add button. See [Sticky add to cart](https://lintelagency.com/support/transom/sell-more.md#sticky-add-to-cart).

## Search engine information

Product pages include structured data (product schema) so search engines can show price and availability. Make sure your product titles, descriptions, and images are accurate, as this is what search engines read.

## Gift cards

The gift card page, shown to customers after they buy a gift card, has its own template and needs no setup.