> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/product-page/page-template-sections/product-information.md).

# Product information

**Product information** is the buying block of your store. It holds the media gallery on one side and, on the other, everything a customer reads before deciding: title, rating, price, variant options, the **Add to Cart** button, and any reassurance blocks you add under it. Customers see it at the top of every product page, above the related products row.

Because this one section carries the whole purchase decision, it is the section worth spending the most time on. The blocks listed further down let you build the right hand column in the order that suits your products.

## How to add a Product information section? <a href="#how-to-add" id="how-to-add"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. Open the template selector and select **Products**, then **Default product**.
3. In the left sidebar, click **Add section** and choose **Product information**.
4. Adjust the settings, then click **Save**.
   {% endhint %}

*Result:* the preview shows the sample product with its gallery and buying column, and the block list for the section appears in the sidebar.

## How to customize your Product information section <a href="#how-to-customize" id="how-to-customize"></a>

<figure><img src="/files/XvfVEe2RX9UrvLeCpWQ1" alt=""><figcaption></figcaption></figure>

### General Settings <a href="#general-settings" id="general-settings"></a>

<figure><img src="/files/BvbafQf8ShHKjKI6fHPQ" alt=""><figcaption></figcaption></figure>

<table data-full-width="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>How far the buying block stretches across the screen.</p><ul><li><strong>Stretch width</strong>: the gallery and the buying column run close to the screen edges whatever the display size.</li><li><strong>Fixed width</strong>: they line up with the rest of your pages, using the width set in <strong>Theme settings > Layout</strong>.</li><li><strong>Full width</strong>: the section fills the whole screen and rescales itself to fit it, which gives the largest possible product photos.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>The background and text colours used behind the buying block, picked from the schemes defined in <strong>Theme settings > Colors</strong>. Keep it the same as your page background unless you want the block to read as a separate panel.</td></tr><tr><td><strong>Enable sticky add cart on desktop</strong></td><td>Keeps the <strong>Add to Cart</strong> button pinned on screen while a desktop customer scrolls through a long description, so they never have to scroll back up to buy.</td></tr></tbody></table>

#### Media <a href="#media" id="media"></a>

These settings control the photo and video gallery, the part customers look at before they read anything. Learn more about [media types.](https://help.shopify.com/manual/products/product-media)

<figure><img src="/files/vbl84aD489LCgXOeMTbw" alt=""><figcaption></figcaption></figure>

<table data-full-width="false" data-search="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Desktop layout</strong></td><td><p>How the product photos are arranged next to the buying column on desktop. Pick the one that matches how many photos your products usually have.</p><ul><li><strong>1 Columns:</strong> photos run down the page in a single column, one under another. Best when every shot deserves full width.</li></ul><p><img src="/files/iivl4n2EtBwn40dpc9SI" alt="" data-size="original"></p><ul><li><strong>2 Columns:</strong> photos sit side by side in pairs, so more of the gallery is visible without scrolling.</li></ul><p><img src="/files/w7xoBr4qRmmHHjGrpRr4" alt="" data-size="original"></p><ul><li><strong>Stack:</strong> the first photo is shown large and the rest follow smaller, which puts the weight on your hero shot.</li></ul><p><img src="/files/fzpC7zLmxq7HXB0lC3p1" alt="" data-size="original"></p><ul><li><strong>Vertical thumbnails (Scroll):</strong> a scrollable strip of thumbnails beside the main photo, so a long gallery stays browsable without taking much space.</li></ul><p><img src="/files/QaNpxvBeVlJd5kXdLvyy" alt="" data-size="original"></p><ul><li><strong>Horizontal thumbnails carousel:</strong> one large photo with a row of clickable thumbnails under it, the layout most shoppers recognise.</li></ul><p><img src="/files/DqXpG6QlbdMr2rvG5XCN" alt="" data-size="original"></p><ul><li><strong>Vertical thumbnails carousel:</strong> the same idea with the thumbnail strip standing to the side instead of below.</li></ul><p><img src="/files/AbYdjs5kI9QR9BeSsw7j" alt="" data-size="original"></p></td></tr><tr><td><strong>Desktop media width</strong></td><td><p>How much of the row the photos take, and therefore how much room is left for the price and buttons. Widen it for visual products, narrow it when your buying column carries a lot of options.</p><p><em>*Note: Media is automatically optimized for mobile.</em></p></td></tr><tr><td><strong>Desktop media position</strong></td><td><p>Which side of the screen the photos sit on.</p><ul><li><strong>Right:</strong> the image is on the right, and the content is on the left, so customers read the price first.</li><li><strong>Left:</strong> the image is on the left, and the content is on the right, the arrangement most stores use.</li></ul><p>*<em>Note: Position is automatically optimized for mobile.</em></p></td></tr><tr><td><strong>Enable image zoom</strong></td><td>Lets a customer enlarge a photo to inspect fabric, finish, or detail up close, which reduces the doubt that stops people buying online.</td></tr><tr><td><strong>Enable video looping</strong></td><td>Replays a product video from the start instead of stopping on the last frame, so a short clip keeps running while the customer reads.</td></tr><tr><td><strong>Enable video autoplay</strong></td><td><p>Starts the video as soon as the page opens, instead of waiting for a click.</p><p><em>*Note: Videos are muted automatically to allow autoplay. Won't work for YouTube/Vimeo.</em></p></td></tr><tr><td><strong>Enable video controls custom</strong></td><td>Shows play, pause, and stop controls on the video, so customers can hold on a frame that matters to them.</td></tr></tbody></table>

#### Section padding <a href="#section-padding" id="section-padding"></a>

<figure><img src="/files/etlkmCw5pc872ZTgbP6H" alt=""><figcaption></figcaption></figure>

| Setting    | Description                                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the buying block. Increase it when the photos sit too close to the header or the breadcrumb. |
| **Bottom** | Adds space under the buying block, separating it from the related products row that follows.                  |

### Block settings <a href="#block-settings" id="block-settings"></a>

The buying column is built from blocks. Add only the ones your products need, and drag them so the information a customer wants first sits highest.

<figure><img src="/files/2hWRyC0Zb3LMeSSWyB9w" alt=""><figcaption></figcaption></figure>

#### **1. Breadcrumb** <a href="#block-breadcrumb" id="block-breadcrumb"></a>

Shows the trail back to the collection the customer came from, for example Home > Collection > Product. It matters most for visitors who land here from an ad or a search result and have not seen your navigation yet. To learn more about the breadcrumb and how to add it to your store, visit the following [link](/velare/customize-your-pages/breadcrumb.md).

#### **2. Product Title** <a href="#block-product-title" id="block-product-title"></a>

The product name, taken from the product in your Shopify admin. Keep it near the top of the column so customers can confirm they opened the right item.

#### **3. Product rating** <a href="#block-product-rating" id="block-product-rating"></a>

The star rating for this product, which gives new visitors a reason to trust the page before they read anything else.

#### **4. Price** <a href="#block-price" id="block-price"></a>

The current price, with the compare at price shown alongside it when the product is on sale.

#### **5. Variant picker** <a href="#block-variant-picker" id="block-variant-picker"></a>

The controls a customer uses to choose size, color, or any other option before adding to cart. To learn more about variants and how to add them to your store, visit the following [link](https://help.shopify.com/en/manual/products/variants).

<table data-search="false"><thead><tr><th>Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Type</strong></td><td>How the options are presented. <strong>Pills</strong> show every choice at once, which suits a handful of sizes. <strong>Dropdown</strong> hides them behind a menu, which keeps the column short when a product has many options.</td></tr><tr><td>Swatch type</td><td>How swatch options are displayed. <strong>Variant image</strong> uses each variant’s assigned image, while <strong>Color</strong> shows a color swatch based on the option value.</td></tr><tr><td><strong>Show size chart</strong></td><td>Adds a link next to the size options that opens your sizing guide, so customers do not leave the page to look for it.</td></tr><tr><td><strong>Size trigger</strong></td><td>The option labels that count as a size, for example <code>Size, Length</code>. Separate several with commas so the theme knows which picker to attach the chart to.</td></tr><tr><td><strong>Size chart label</strong></td><td>The wording of that link, for example <code>Size guide</code>.</td></tr><tr><td><strong>Size chart page</strong></td><td>The page whose content is shown inside the size chart popup. Create the page first in <strong>Shopify admin > Online Store > Pages</strong>.</td></tr><tr><td><strong>Footer content</strong></td><td>A short note under the chart, useful for a returns promise or a link to contact support while the customer is still deciding.</td></tr><tr><td><strong>Custom size chart</strong></td><td>Lets one product or collection show its own chart instead of the shared one. Create a metafield with namespace and key: "custom.size_chart" and the theme reads it for that item.</td></tr></tbody></table>

#### **6. Stock countdown** <a href="#block-stock-countdown" id="block-stock-countdown"></a>

Tells the customer how few units are left, for example *Only 3 left in stock*. It turns a browsing visit into a decision, so use it on products where the scarcity is real.

<figure><img src="/files/orCkyS8t6EuYfVEkx46J" alt=""><figcaption></figcaption></figure>

| Setting             | Description                                                                                             |
| ------------------- | ------------------------------------------------------------------------------------------------------- |
| **Message**         | The wording customers read when stock runs low. Put **\[count]** where the live quantity should appear. |
| **Stock threshold** | The point at which that message starts showing. Set it low enough that the warning stays believable.    |

#### **7. Description** <a href="#block-description" id="block-description"></a>

The full product description written in your Shopify admin. Place it below the buy buttons if it is long, so the purchase decision is not pushed off screen.

#### **8. Buy buttons** <a href="#block-buy-buttons" id="block-buy-buttons"></a>

The **Add to Cart** button and the express payment buttons under it. This is the block the whole page is built around.

<figure><img src="/files/LPCu1l4Vl0uptutmmc8a" alt=""><figcaption></figcaption></figure>

| Setting                                           | Description                                                                                                                                                                                                                                                                                  |
| ------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show dynamic checkout buttons**                 | Adds the express payment buttons under **Add to Cart**, letting a returning customer pay in one step instead of going through the cart.                                                                                                                                                      |
| **Show recipient information form for gift card** | For gift card products, adds fields for the recipient name, email, a personal message, and a delivery date, so the card can be sent straight to the person receiving it. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields) |

You can change the "add to cart" button to an "External/Affiliate" button.

#### **9. Icon with text** <a href="#block-icon-with-text" id="block-icon-with-text"></a>

A small icon with one line beside it, used for the promises that remove hesitation: free shipping, secure checkout, or a money back guarantee. Add one block per promise.

<figure><img src="/files/ZpQoNI5zlIxghWAX5Twn" alt=""><figcaption></figcaption></figure>

| Setting      | Description                                                                                                           |
| ------------ | --------------------------------------------------------------------------------------------------------------------- |
| **SVG Icon** | The symbol shown beside the line. Pick one that reads at a glance, since customers scan these rather than study them. |
| **Text**     | The promise itself, kept to a few words so the row stays on one line.                                                 |

<figure><img src="/files/DZ0U13chobPz80fGNJST" alt=""><figcaption></figcaption></figure>

#### **10. Accordion row** <a href="#block-accordion-row" id="block-accordion-row"></a>

A collapsible row for detail that not every customer needs, such as materials, care instructions, or your returns policy. Folding it away keeps the buying column short while the answers stay one click away.

<figure><img src="/files/DZ0U13chobPz80fGNJST" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/1CkmEV1ri9g6q4FWrI9L" alt=""><figcaption></figcaption></figure>

| Setting                   | Description                                                                                                                          |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Heading**               | The label customers click to open the row. Name the answer, for example `Shipping and returns`.                                      |
| **Row content**           | Text you type here, best for wording that changes from one product to the next.                                                      |
| **Row content from page** | Pulls the text from a page you already wrote instead, so shared policies stay identical across products and are edited in one place. |

#### **11. Ask a question** <a href="#block-ask-a-question" id="block-ask-a-question"></a>

Puts a short form on the page so a customer who still has a doubt can ask you instead of closing the tab. Answers arrive by the same route as your other store enquiries.

<figure><img src="/files/RNxPS1kM5elpQAb8UlOI" alt=""><figcaption></figcaption></figure>

#### **12. Complementary products** <a href="#block-complementary-products" id="block-complementary-products"></a>

Offers the items that go with what the customer is looking at, for example a case with a phone, which raises the value of the order without pulling the customer away from this product.

Which products are offered is decided in the Search & Discovery app, so install it before adding this block.

<figure><img src="/files/XQCHw569HoJQi9APJzot" alt=""><figcaption></figcaption></figure>

You need to create a metafield before displaying this block. See [Complementary products](/velare/buy-and-install/create-required-metafields/metafields/complementary-products.md).

<figure><img src="/files/2YDvj7cCcp5ZKW61xKKf" alt=""><figcaption></figcaption></figure>

#### **13. Highlights** <a href="#block-highlights" id="block-highlights"></a>

A compact list of the product's main selling points, each with an icon and a few words, for customers who scan rather than read.

#### **14. Product meta** <a href="#block-product-meta" id="block-product-meta"></a>

Shows or hides the catalogue details: the collections the product belongs to, its SKU, its product type, and its tags. Useful for stores where customers quote a reference number when they order.

<figure><img src="/files/zJ9P3BquFTBJF8WTn9gJ" alt=""><figcaption></figcaption></figure>

#### **15. Promotion alert** <a href="#block-promotion-alert" id="block-promotion-alert"></a>

A short highlighted line in the buying column announcing an offer, for example 🔥 Limited Time, placed where the customer is already looking at the price.

<figure><img src="/files/Fqiiq0h4TiGL9wYd2i7a" alt=""><figcaption></figcaption></figure>

| Setting         | Description                                                                                                                         |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Text color**  | Sets the text color for this promotion alert. Use a color that stands out against the background while remaining easy to read.      |
| **Heading**     | The title displayed at the top of the promotion alert, used to quickly highlight the offer or important message.                    |
| **Description** | The supporting text shown below the heading. Use it to explain the promotion, discount, shipping offer, or other important details. |

#### **16. Promotion countdown** <a href="#block-promotion-countdown" id="block-promotion-countdown"></a>

A ticking timer showing how long an offer lasts, which gives a hesitating customer a reason to buy today. You need to create a metafield before displaying this block.

<figure><img src="/files/olitzv0uLsXH5pjJef7G" alt=""><figcaption></figcaption></figure>

| Setting         | Description                                                                                                                         |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**     | The title shown above the countdown timer, used to name the offer the timer is counting down to.                                    |
| **Description** | The supporting text shown below the heading. Use it to explain the promotion, discount, shipping offer, or other important details. |

#### **17. Text** <a href="#block-text" id="block-text"></a>

A free text block for anything the other blocks do not cover, for example a delivery notice for one product line.

### Impact outside the theme editor <a href="#impact-outside" id="impact-outside"></a>

Everything set here applies to every product using the **Default product** template, so a block you add appears on the whole catalogue even when only some products have content for it. Blocks that read product data stay empty until that data exists: **Product rating** needs a review app, **Complementary products** needs the Search & Discovery app and its metafield, **Stock countdown** needs inventory tracking turned on for the product, and **Size chart page** needs a page created in the Shopify admin. Media settings depend on the photos and videos uploaded to each product, so a layout built around a hero shot will look thin on products with one image.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Page template sections](/velare/customize-your-pages/product-page/page-template-sections.md): the other sections you can add to a product page
* [Complementary products](/velare/buy-and-install/create-required-metafields/metafields/complementary-products.md): the metafield behind block 12
* [Short description](/velare/buy-and-install/create-required-metafields/metafields/short-description.md): the summary line used with products across the theme
* [Custom product badge](/velare/buy-and-install/create-required-metafields/metafields/custom-product-badge.md): your own badge text on a single product
* [Breadcrumb](/velare/customize-your-pages/breadcrumb.md): the global settings behind block 1
* [Related products](/velare/customize-your-pages/product-page/page-template-sections/related-products.md): the recommendation row placed under this section


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/product-page/page-template-sections/product-information.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.