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

# Product information

How to customize your product information in product pages

This article guides you through the process of adding, editing, or removing information on your product pages. Providing accurate, reliable, and comprehensive product details empowers customers to make informed purchasing choices.

## How to add a Product information section?

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), open the template selector.
2. Select **Products**, then **Default product.**
3. On the left-sidebar, add **Product information.**
4. Make necessary changes > **Save.**
   {% endhint %}

## How to customize your Product information section

### General Settings

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Section width</td><td><p></p><p>3 options for container</p><ul><li>Stretch width: span the section width regardless of screen size.</li><li>Fix width: depends on your page content width in <strong>Theme settings</strong> <strong>-></strong> <strong>Layout</strong>.</li><li>Expand full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.</li></ul></td></tr><tr><td>Show breadcrumb</td><td>Display breadcrumb</td></tr><tr><td>Enable sticky content on desktop</td><td>When you enable it, the product content will be fixed in position</td></tr></tbody></table>

### Media

Learn more about [media types.](https://help.shopify.com/manual/products/product-media)

<table data-full-width="false"><thead><tr><th width="143">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Desktop media width</td><td><p>3 options for desktop media width</p><ul><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul><p>*Media is automatically optimized for mobile.</p></td></tr><tr><td>Desktop media position</td><td><p>2 options for desktop media position</p><ul><li><strong>Right:</strong> The image is on the right, and the content is on the left</li><li><strong>Left:</strong> The image is on the left, and the content is on the right</li></ul><p>*Position is automatically optimized for mobile.</p></td></tr><tr><td>Desktop layout</td><td><p>3 options for desktop layout</p><ul><li><strong>Stack:</strong> The first image will be highlighted and larger than the remaining images</li><li><strong>2 Columns:</strong> The product images will be divided into two columns</li><li><strong>Thumbnail carousel:</strong> The product images are displayed in a carousel format with small thumbnail images</li></ul></td></tr><tr><td>Enable variant image group</td><td><strong>Variant image group</strong> is a feature that allows only the images of the chosen variant to be displayed at a moment. Follow <a href="https://nextsky.gitbook.io/agile-theme/collections-and-products-pages/products/page-template-sections/product-information#how-to-set-up-variant-image-group"><strong>this link</strong></a> to learn how to set up <strong>Variant image group</strong> for a product.</td></tr><tr><td>Desktop thumbnails position</td><td><p>3 options for desktop thumbnails position</p><ul><li><strong>Left</strong></li><li><strong>Bottom</strong></li><li><strong>Hide</strong></li></ul></td></tr><tr><td>Image zoom</td><td><p>4 options for desktop thumbnails position</p><ul><li><strong>Lightbox:</strong> When you click on a product image, it will display a popup with larger images</li><li><strong>Inner zoom:</strong> When hovering over a product image, the image will zoom in</li><li><strong>External zoom:</strong> When hovering over a point on the product image, a zoomed-in image of the hovered point will appear next to the product image</li><li><strong>Hide:</strong> Do not display the zoom function</li></ul></td></tr><tr><td>Enable video looping</td><td>When enabled, the video will loop if the product has a video</td></tr><tr><td>Enable video autoplay</td><td>When enabled, the video will autoplay if the product has a video</td></tr><tr><td>Mobile layout</td><td><p>2 options for desktop thumbnails position</p><ul><li><strong>Hide thumbnails</strong></li><li><strong>Show thumbnails</strong></li></ul><p>*Mobile thumbnail only shows when desktop layout is thumbnail carousel.</p></td></tr></tbody></table>

#### How to set up Variant image group

{% hint style="success" %}
**Step 1:** Choose the product you want to set up **Variant image group**. Select an image that you uploaded for the product.
{% endhint %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FjQm0MweUli8FEEVkYS2H%2FScreenshot%202024-08-02%20141223.png?alt=media&amp;token=8902f8f6-6589-4f3b-810e-79f2c9fee4ef" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Step 2:** Fill the **Alt text** with the corresponding variant
{% endhint %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F4uCaqpjBZydcLZ6o6ArY%2FScreenshot%202024-08-02%20141610.png?alt=media&amp;token=b9d3feda-4027-4ab6-aad5-544a4a7ca85b" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Step 3:** Enable **Variant image group** on the product page.
{% endhint %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FivmxYL8KQRlnyUpTZnZ2%2FScreenshot%202024-08-02%20141358.png?alt=media&amp;token=c4ed3855-9013-440e-ad1f-648980237ec9" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Step 4:** Experience the **Variant Image group** in your store.
{% endhint %}

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FkVb7SY6TCo9BaDThzi8E%2FScreenshot%202024-08-02%20141307.png?alt=media&amp;token=44be0c58-5df1-49f4-a3ca-160f29840456" alt=""><figcaption></figcaption></figure>

### Section padding

* **Top padding:** Customize the top margin of the section
* **Bottom padding:** Customize the bottom margin of the section

### Block settings

#### **1. Text**

Add the custom content you want

#### **2. Product title**

Display product title

#### **3. Price**

Display product price

* **Show sale badge:** Display product badges such as discounts, out of stock, in stock, and more

#### **4. Product rating**

Display the product's rating

#### **5. Buy buttons**

* **Show dynamic checkout buttons:** Toggle the ''Show dynamic checkout buttons" option to include a direct checkout button
* **Show recipient information form for gift card:** Enables users to schedule gift card deliveries with personal messages. [Learn more](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-gift-card-recipient-fields)

#### **6. Variant picker**

Products with variants provide customers with more choices. 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).

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FU4pXEpU1G388rgkBY6Yi%2Fimage.png?alt=media&amp;token=a0897b00-1280-4823-9f9a-4f33be6c6c8f" alt="" width="207"><figcaption></figcaption></figure>

* **Type :** Pills and Dropdown
* **Show size chart:** Display size chart
* **Size chart label:** Title of size chart
* **Size chart page:** Select the page to display the size chart you've created
* #### Custom size chart

  Using specific size charts for each collection or product.

  To use a custom size charts for product or collection, create metafield with namespace and key: "custom.size\_chart". [Learn more](https://nextsky.gitbook.io/agile-theme/collections-and-products-pages/products/page-template-sections/pages/vbwJSuGhPiWcumROmFyV#1.-size-chart).

#### **7. Collapsible row**

Add a heading and extra information on the tabs.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FnLdANK02NuPM5lcVJ6t8%2Fimage.png?alt=media&amp;token=c8b25899-2ba6-4d6c-ae5a-de91834d88ff" alt="" width="202"><figcaption></figcaption></figure>

* **Heading:** Include a heading that explains the content.
* **Row content:** The content, as you've written
* **Row content from page:** The content is get from the selected page

#### **8. Pop-up**

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F4c9BlX61SZVMut2JngIp%2Fimage.png?alt=media&amp;token=3a8a2a9d-6223-4508-a37b-6126940f8834" alt=""><figcaption></figcaption></figure>

* **Link label:** Content link
* **Icon:** Selected icon display
* **Page:** Selected page will display content

#### **9. Share**

The option to display social networks for sharing or copying links to share.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FUqSDZAJNpI5uc71LLeo6%2Fimage.png?alt=media&amp;token=918ad640-13be-4d98-b325-96dc3c9b43a0" alt="" width="205"><figcaption></figcaption></figure>

#### **10. Custom liquid**

Add app snippets or other Liquid code to create advanced customizations.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FMbhpQQkfsHoFOSxCZTpQ%2Fimage.png?alt=media&amp;token=486b4a79-368e-486c-b80f-e59fe4e41ac3" alt="" width="202"><figcaption></figcaption></figure>

#### **11. Complementary products**

To select complementary products, add the Search & Discovery app. [Learn more](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations)

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FGJJjyUHr5GLV83o9NlTn%2Fimage.png?alt=media&amp;token=63b16bef-da38-4b5a-a3f8-46e02a3ee558" alt="" width="203"><figcaption></figcaption></figure>

#### **12. Promotion**&#x20;

Display the promotion countdown. &#x20;

You need to create a metafield before displaying this block. Please see how to create a metafield [here](https://nextsky.gitbook.io/agile-theme/collections-and-products-pages/products/page-template-sections/pages/vbwJSuGhPiWcumROmFyV#3.countdown-timer)

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FWkj8tW7kFwBEcUNoZYXb%2Fimage.png?alt=media&amp;token=b9976aca-7309-4e6d-b948-40bf2639c890" alt="" width="207"><figcaption></figcaption></figure>

#### **13. Description**

Display the product description.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FQc8RZzj9F47PkZZOn5aW%2Fimage.png?alt=media&amp;token=f53adb07-ef22-4a34-8164-3b5e4f9c134c" alt="" width="197"><figcaption></figcaption></figure>

#### **14. Ask a question**

Display a form for users to submit questions to the seller about the product.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F4R60USw5vJt6wLzflcgt%2Fimage.png?alt=media&amp;token=8a33cd0a-3fa2-4097-bfdd-00224312fe5f" alt="" width="375"><figcaption></figcaption></figure>

#### **15. Trust seal**

Upload the image you want

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FZxsbpwjqaVuzHQEoTwj6%2Fimage.png?alt=media&amp;token=cab94c76-7e79-4ce4-87b2-d401043b2512" alt="" width="202"><figcaption></figcaption></figure>

#### **16. Product meta**

Show/hide collections, SKU, product type, and product tags.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FivFMCteDyhidLiXzI6nl%2Fimage.png?alt=media&amp;token=a37f1b50-734d-4111-97d5-b83287ab1585" alt="" width="203"><figcaption></figcaption></figure>

#### **17. Inventory status**

**Inventory status** signifies the availability of a product. It's vital for ensuring products are in stock, managing inventory efficiently, and informing customers about availability on your website

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2FRrCwkECJHbT2ZMLkjQi0%2Fimage.png?alt=media&amp;token=77710b0a-8329-4265-8a9d-7dbcf07abb75" alt="" width="204"><figcaption></figcaption></figure>

#### **18. Divider**

Creates a straight line with customizable colors.

<figure><img src="https://2603381870-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzHrRp9fYeFj0SVV6k2dP%2Fuploads%2F3gMdcVIdvXETZKHDl84H%2Fimage.png?alt=media&amp;token=866e9c52-c18e-4b5f-9ed6-12fb47221d36" alt="" width="205"><figcaption></figcaption></figure>