# Product information Source: Product information is the main section of the product page: the media gallery on one side and, next to it, a narrow column with the title, price, variants, add to cart button and everything else a customer needs to decide. It is used on the product template, and every product that uses that template shows it with its own data. Product recommendations and recently viewed products follow it on the same page. ## Build the product column The column is made of blocks, and you choose which ones to show and in what order. Each piece is a block of its own: **Collection link**, **Title**, **Vendor**, **Text**, **Description**, **Price**, **Variant picker**, **Custom field**, **Quantity selector**, **Buy buttons**, **Pickup availability**, **Delivery estimate**, **Complementary products**, **Collapsible row** and **Custom Liquid**. Apps that support it can add their own blocks here too. - The blocks show the product of the page: you don’t pick a product in this section. Title, price, description and media come from the product in your Shopify admin. - Use one **Title** block and one **Buy buttons** block. The title is the page’s main heading, and screen readers use it to name the section. - A block with nothing to show, such as an empty text or a product without a vendor, is hidden in your store. In the theme editor a notice marks it, so you can still select it. The template ships with a collection link, title, a subtitle text, description, price, variant picker, a “Fit” text, two custom fields, quantity, buy buttons, pickup, delivery estimate, complementary products and two collapsible rows. Remove or reorder them as you like. ## Show different text on each product **Text** and **Collapsible row** blocks can be connected to a product metafield with the dynamic source button next to the setting. Each product then shows its own subtitle, fit note, material or care instructions, and a product with an empty metafield shows nothing. - **Text** shows a short line with an optional **Label** in front, such as “Fit”. **Text style** sets it as body text, a muted subtitle or small uppercase letters. - **Collapsible row** is a heading that opens to show its content, such as “Product details” or “Shipping and returns”. After its own **Content**, it can also show a page you choose in **Content from page**, which is handy for text shared by all products. Turn on **Open by default** to show it open when the page loads. The rows can be reached by heading navigation in screen readers. ## Arrange the media gallery **Desktop layout** sets how photos and videos appear on larger screens: in **2 columns**, in **1 column**, with a **Large first media** and the others in two columns, or as a **Carousel** that shows two at a time with arrows. On phones media is always a carousel that customers swipe, with a counter and arrows. **Media aspect ratio** crops every media to the same shape so the gallery stays even. Add media, and their alternative text, in the product page of your Shopify admin; products without alt text use the product name. With **Image zoom** set to **Open lightbox**, clicking a photo opens it full screen, where customers can move between photos with the arrows or the keyboard and close it with Esc. Videos uploaded to Shopify, YouTube and Vimeo videos and 3D models can all be part of the gallery. They never play by themselves: customers press play. **Loop videos** makes uploaded and embedded videos start again when they end. On phones, 3D models also offer to view the product in the customer’s space where the device supports it. ## Show the photos of the selected variant Assign an image to each variant in the Shopify admin. With **Show selected variant media first** on, choosing a color moves its photo to the start of the gallery. When it’s off, the gallery keeps its order and scrolls to that photo instead. ## Choose how variants are picked The **Variant picker** block shows each option, such as size or color, as a row of buttons. Values that aren’t available with the other choices are struck through, and screen readers hear “sold out” or “unavailable”. Price, SKU, stock, pickup and delivery estimate update as the customer picks, and the page address changes so the chosen variant can be shared. Options connected to a color metaobject in the Shopify admin show swatches instead of words: set the color or a pattern image in the metaobject entry. **Swatch shape** draws them as rectangles or circles. Products with only one variant don’t show the block. Choose how options look in **Options with swatches** and **Other options**: **Swatches** (only for options with swatches), **Buttons** with the value name, or **Dropdown**, a menu that lists the values and says which ones are sold out. For example, colors as swatches and sizes as a dropdown. Combined listings work too: picking a value that belongs to another product opens that product. ## Show colors sold as separate products If each color is a product of its own, the **Linked products** block shows the colors of the group like the variant picker does, with the same swatches or buttons, and each one opens its product. The product being viewed is selected, and sold-out products are struck through. The block is the same on every product that uses the template, so the group has to come from each product: 1. In **Settings > Metafields and metaobjects > Products**, add a definition of type **Product** with **List of products**, for example “Colors”. 2. On each product, list the products of its group in that metafield, itself included, in the order you want them shown. 3. In the theme editor, add the **Linked products** block and connect **Products** to the metafield. **Options with swatches** and **Other options** work as in the variant picker: the first applies when the products’ colors have swatches. **Dropdown** lists the products with their swatches. **Option name** is the option that names each product’s color, “Color” by default: the block shows its value and its swatch, or the product’s featured image when the value has no swatch. Products without that option show their title. The block hides itself for products in a combined listing, where the variant picker already shows the other products. ## Show a size chart Create a page in **Online Store > Pages** with your size chart, tables included. In the **Variant picker** block, choose it under **Size chart** > **Page**, and write the option it belongs to in **Option name**, exactly as the option is named on your products (for example “Size”). A “Size chart” link then appears next to that option and opens the page in a panel at the side of the screen. ## Set up the add to cart button The **Buy buttons** block holds the add to cart button and everything submitted with it. - **Show accelerated checkout buttons** adds buttons such as Shop Pay, PayPal or Apple Pay. Each customer sees the methods available to them; turn them on in **Settings > Payments**. - When a product has purchase options from a subscription app, customers choose between a one-time purchase and the plans above the button. - On gift card products, **Show gift card recipient form** lets customers send the card to someone else by email, with a name, a message and a send date. - A sold-out variant shows a disabled “Sold out” button, and a combination that doesn’t exist shows “Unavailable in this combination”. The **Quantity selector** block shows a quantity field. B2B customers whose catalog has quantity rules or volume pricing see the minimum, maximum and increment, and the price for each quantity. The **Price** block shows the sale price next to the struck-through regular price, the unit price when the variant has one, and whether tax is included. Shop Pay Installments appear below the price when they’re available in your store. ## Collect personalization details A **Custom field** block adds a field customers fill in before adding to cart, such as initials to embroider or a gift message. Choose a **Field type**: one line of text, several lines, a dropdown or a checkbox. The answer is saved with the item in the cart and appears in the order. - The **Label** is also the name of the field in your orders: changing it later separates old and new orders. - **Require this field** stops the add to cart until it’s filled in. - **Product tag** limits the field to products with that tag, so you don’t need a separate product template for a few personalized items. The field can’t add a charge to the price: a paid personalization needs an app. ## Show pickup and delivery information **Pickup availability** shows where the selected variant can be picked up and how soon, with a link to the list of other stores and their addresses. It appears only for locations where you turned on local pickup in **Settings > Shipping and delivery**. **Delivery estimate** shows an estimated date range for delivery. It has no settings of its own: set the cutoff time and the processing and shipping days in [Theme settings](https://docs.ictsviluppo.example/dossier/theme-settings) > **Delivery estimate**, so product page and cart show the same dates. It’s hidden for sold-out variants, gift cards and products that don’t need shipping. ## Suggest products to buy together **Complementary products** shows up to five products to wear or buy with this one. Choose them for each product in the Search & Discovery app; products without any don’t show the block. The block appears once the products have loaded, so it never shifts the page for products without suggestions. For similar products, use the [Product recommendations](https://docs.ictsviluppo.example/dossier/sections/section-product-recommendations) section below this one. ## Keep the column and the button in view With **Keep product info in view on desktop** on, the column stays in place while customers scroll through the gallery on larger screens. **Show sticky add to cart bar on mobile** shows a bar at the bottom of the screen on phones once the add to cart button has scrolled out of view, with the photo, name, chosen variant, price and an “Add” button that adds the same variant and quantity. ## Show breadcrumbs Turn on **Show breadcrumbs** to show the path to the product above the gallery: the collection the customer came from, or the first of the product’s collections found in the **Breadcrumb menu** of [Theme settings](https://docs.ictsviluppo.example/dossier/theme-settings) > **Navigation**. Without either, the path is Home and the product. ## Settings | Setting | Type | Default | Options | | - | - | - | - | | **Media** | | | | | **Desktop layout** — On mobile, media is always shown as a carousel. | Drop-down | 2 columns | 2 columns, 1 column, Large first media, Carousel | | **Media aspect ratio** | Drop-down | Portrait (3:4) | Portrait (3:4), Tall (2:3), Square (1:1) | | **Show selected variant media first** — When off, the gallery scrolls to the selected variant media. | Checkbox | On | — | | **Image zoom** | Drop-down | Open lightbox | Open lightbox, No zoom | | **Loop videos** | Checkbox | Off | — | | **Layout** | | | | | **Show breadcrumbs** — Shows the collection the customer came from, or the first of the product’s collections in the breadcrumbs menu set in Theme settings. | Checkbox | Off | — | | **Use full page width** | Checkbox | On | — | | **Keep product info in view on desktop** | Checkbox | On | — | | **Show sticky add to cart bar on mobile** — Appears when the add to cart button scrolls out of view. | Checkbox | On | — | | **Color scheme** | Color scheme | scheme-1 | — | ## Blocks ### Collection link Links to the collection the customer came from, or to the product's first collection. This block has no settings. ### Title | Setting | Type | Default | Options | | - | - | - | - | | **SKU** — Updates with the selected variant. | Drop-down | Don't show | Don't show, Before title, Below title | ### Vendor This block has no settings. ### Text | Setting | Type | Default | Options | | - | - | - | - | | **Label** — Shown before the text, for example "Fit". | Text | — | — | | **Text** — Connect a product metafield to show different text on each product. | Inline rich text | Free returns within 30 days | — | | **Text style** | Drop-down | Body | Body, Subtitle, Uppercase | ### Description This block has no settings. ### Price Shop Pay Installments appear below the price when they're available in your store. This block has no settings. ### Variant picker | Setting | Type | Default | Options | | - | - | - | - | | **Options with swatches** | Drop-down | Swatches | Swatches, Buttons, Dropdown | | **Other options** | Drop-down | Buttons | Buttons, Dropdown | | **Swatch shape** — Swatches appear on options connected to a color metaobject. | Drop-down | Rectangle | Rectangle, Circle | | **Size chart** | | | | | **Page** | Page | — | — | | **Option name** — The link appears next to the option with this name. | Text | Size | — | ### Linked products | Setting | Type | Default | Options | | - | - | - | - | | **Products** — Connect a product metafield that lists the products of each group. The current product is shown first if it's not in the list. | Products | — | — | | **Option name** — Each product shows its value of this option, with its swatch if it has one. | Text | Color | — | | **Options with swatches** | Drop-down | Swatches | Swatches, Buttons, Dropdown | | **Other options** | Drop-down | Buttons | Buttons, Dropdown | | **Swatch shape** — Swatches appear on options connected to a color metaobject. | Drop-down | Rectangle | Rectangle, Circle | ### Custom field | Setting | Type | Default | Options | | - | - | - | - | | Collects extra information with the product, such as initials to embroider. It's saved with the item in the cart and shows in the order. | | | | | **Label** — Also used as the field name in orders. Changing it later splits the data of past orders. | Text | Initials | — | | **Field type** | Drop-down | Single line text | Single line text, Multi-line text, Dropdown, Checkbox | | **Dropdown options** — Separate options with a comma. Shown when *Field type* is *Dropdown* | Text | — | — | | **Checkbox value** — Saved in the order when the checkbox is selected. Shown when *Field type* is *Checkbox* | Text | Yes | — | | **Maximum characters** — Leave empty for no limit. Shown when *Field type* is *Single line text* or *Field type* is *Multi-line text* | Number | — | — | | **Require this field** | Checkbox | Off | — | | **Help text** | Text | — | — | | **Product tag** — Show only on products with this tag. Leave empty to show on all products that use this template. | Text | — | — | ### Quantity selector B2B customers see their quantity rules and volume pricing here. This block has no settings. ### Buy buttons | Setting | Type | Default | Options | | - | - | - | - | | **Show accelerated checkout buttons** — Customers see the payment methods available to them, such as PayPal or Apple Pay. | Checkbox | On | — | | **Show gift card recipient form** — Shows on gift card products only. Customers can send the gift card to a recipient on a chosen date, with a personal message. | Checkbox | On | — | ### Pickup availability Shows when local pickup is enabled for at least one location. This block has no settings. ### Delivery estimate Shows an estimated delivery date range. Set cutoff time and shipping days in Theme settings > Delivery estimate. This block has no settings. ### Complementary products | Setting | Type | Default | Options | | - | - | - | - | | Choose complementary products in the Search & Discovery app. | | | | | **Heading** | Text | Complete the look | — | | **Maximum products to show** | Slider | 3 | 1–5, step 1 | ### Collapsible row | Setting | Type | Default | Options | | - | - | - | - | | **Heading** | Text | Collapsible row | — | | **Content** — Connect a product metafield to show different content on each product. | Rich text | — | — | | **Content from page** — Shown after the content above. | Page | — | — | | **Open by default** | Checkbox | Off | — | ### Custom Liquid | Setting | Type | Default | Options | | - | - | - | - | | **Custom Liquid** — Paste Liquid code from an app or a developer. It runs only where this is placed. | Liquid | — | — | This section also accepts app blocks.