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

TemplateBest forWhat is on the page
Default productMost productsMedia 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 trafficA 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 setsRating, 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 purchasesOne-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 productsVendor, 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 electronicsBenefits 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 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.

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.

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.

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 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.

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.

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.

Still stuck?

Send a support request with your store URL, the page where you see the problem and a screenshot, and we’ll reply by email. You can also write to info@lintelagency.com.

Missing a feature? Request it for a future version.