§17 / SECTIONS
REF: TG–DOC–17 · REV. 1.7
Main product
Product information is the main section of the product template. It shows the product media gallery on one side and a column of blocks (title, price, variant picker, buy buttons and more) on the other. It is available only on product templates and cannot be added to other pages.
TANGENT 1.7 / SHOPIFY OS 2.0 / UPDATED 2026-10-19
How it works
- Gallery. Shows images, Shopify-hosted videos, YouTube or Vimeo videos and 3D models. Each item sits in a 4:5 frame and is fitted inside it, so images are not cropped. On desktop, choose a stacked column, a two-column grid or a carousel.
- Images per color. With Show only the selected color's images on, the gallery shows only the images that belong to the selected color. Each color's images start at that color's variant image. Images placed before the first variant image show for every color.
- Zoom. Images can open full screen on click and can be magnified on hover on desktop.
- Details column. Can stay in view while the shopper scrolls the gallery. On mobile, an add to cart bar can appear at the bottom of the screen.
- Variant picker. Shows options as buttons or dropdowns. Color options can show as swatches. Swatch colors and images come from the option values in your product catalog. Sold-out values stay visible and are marked as sold out.
- Size guide. Choose a page in the variant picker block. It opens in a side panel next to the size option. Connect the setting to a product metafield (page type) to show a different chart per product. Tables with cm or inch columns get a cm/in switch.
Section settings
| Setting | Type | Default | Options / notes |
|---|---|---|---|
| Show breadcrumbs | checkbox | Off | |
| Breadcrumb middle label | text | empty | Overrides the middle breadcrumb item. Uses the collection when empty. |
| Breadcrumb middle link | url | empty | |
| Color scheme | color scheme | scheme-1 | |
| Media | |||
| Desktop layout | select | Stacked | Stacked, Two-column grid, Carousel |
| Media width | select | Large | Half, Large |
| Show thumbnails with carousel | checkbox | On | Applies to the Carousel layout. |
| Show only the selected color's images | checkbox | Off | See "Images per color" above. |
| Open images full screen on click | checkbox | On | |
| Magnify images on hover (desktop) | checkbox | On | Works only when full-screen zoom is also on. |
| Product details | |||
| Keep details in view while scrolling | checkbox | On | |
| Show add to cart bar on mobile | checkbox | On |
Blocks
Blocks appear in the details column in the order you set. Blocks marked "1" can be added once per section.
| Block | Limit | Settings (default) |
|---|---|---|
| Text | — | Text (New season); Style: Label, Body, Subtle (Label) |
| Title | 1 | None |
| Vendor | 1 | Suffix (empty). Appended after the vendor name. |
| Product rating | 1 | None. Shows ratings from a product reviews app. |
| Price | 1 | Show tax and shipping note (on) |
| Variant picker | 1 | Style: Buttons, Dropdown (Buttons); Color options: Swatches, Same as other options (Swatches); Size guide page (empty) |
| Buy buttons | 1 | Show quantity selector (on); Show dynamic checkout buttons (on) |
| Pickup availability | 1 | None. Shows pickup options when local pickup is set up for a location. |
| Inventory status | 1 | Low stock threshold: 0–20 (5). Uses real inventory counts. Shows nothing for products that don't track inventory. |
| SKU | 1 | None |
| Delivery estimate | 1 | Fastest delivery: 1–20 days (3); Slowest delivery: 1–30 days (5); Same-day dispatch cutoff: 0–23 h (14); Ship and deliver on weekends (off); Non-shipping dates (empty, YYYY-MM-DD, one per line or comma separated); Link to shipping policy (on) |
| Model info | 1 | Model height (empty); Size worn (empty). Can be connected to product metafields. |
| Stock inquiry form | 1 | Heading (Ask about availability) |
| Complete the look | 1 | Heading (Complete the look); Products (product list, up to 4); Show "Add the whole look" button (on) |
| Quick order grid | 1 | Heading (Order by size); Only show to customers tagged (empty); Note (empty) |
| Description | 1 | None |
| Fit and feel | — | Heading (Fit and feel); Style: Scale with labels, Bars (Scale with labels); four rows of Label, Rating (1–5), Low end label, High end label |
| Icons with text | — | Four rows of Icon and Text. Icons: Truck, Return, Shield, Water drop, Leaf, Check mark, Location, Star, Chat, Size guide, Gift, Price tag, Sparkle |
| Collapsible row | — | Heading (Materials and care); Open by default (off); Content source: Custom content or page, Product description (Custom content or page); Content (richtext); Content from a page |
| Pop-up | — | Link label (Shipping and returns); Page |
| Share | 1 | None |
| Complementary products | 1 | Heading (Pairs well with); Maximum products: 1–6 (3) |
| Custom Liquid | — | Custom Liquid |
| App blocks | — | Blocks from installed apps |
Block notes
- Delivery estimate shows an estimated delivery window from your typical shipping times. It is labeled as an estimate. Orders placed after the cutoff hour (store time zone) ship the next business day. Set the cutoff to 0 to hide the countdown.
- Stock inquiry form shows on sold-out variants. Shoppers send you a contact message with the product, variant and SKU, tagged
stock-inquiry. It does not send restock emails. For that, add a back-in-stock app and its app block. - Complete the look can be connected to a product list metafield to set looks per product. With the "Add the whole look" button, shoppers pick a size for each piece and add everything at once.
- Quick order grid is a color × size table where buyers enter a quantity for each variant and add everything at once. It shows on products with one or two options and up to 250 variants.
- Fit and feel rates a product on a 1–5 scale. Connect each rating to a product metafield to vary it by product.
- Collapsible row is hidden on the storefront until it has content or a page.
- Complementary products uses complementary products set up in the Search & Discovery app.
Default template
The default templates/product.json uses these blocks in order: Text, Title, Price, Description, Variant picker, Buy buttons, Stock inquiry form, Pickup availability, Delivery estimate, Fit and feel, Icons with text, Complete the look, three Collapsible rows, Share. The template also includes the Related products and Recently viewed sections.
For developers
Last updated for Tangent 1.7