# Template: Product Information

{% hint style="info" %}
**Template -> Product information**
{% endhint %}

## Layout

You can adjust the **Top spacing** to **Small**, **Medium**, **Normal**, or disable it entirely by selecting **None**. Set the pixel value for desktop and mobile through **Theme settings > Layout**.

In the following example, you can view the spacing settings:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fj6SwEbzQGAwdWpQ3MXN4%2Fpr_space.png?alt=media&#x26;token=906a58e3-2b59-4878-bf61-d188325be66e" alt=""><figcaption></figcaption></figure>

Use the **Width** option to set product pages to **Boxed** or **Wide**.

{% hint style="info" %}
The Wide option works for screens with 1440px width and more.
{% endhint %}

**Content width**

Can be set from 30% to 80%

In the following examples, you can view the *Content width* settings:

{% tabs %}
{% tab title="30%" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FCebrhlSR1xaVWIqQ0Es9%2F30.png?alt=media&#x26;token=a98302f7-97b4-4ad6-a521-13ed0c669a5c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="80%" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fq772wrpMKcdAtaDAM9IM%2F80.png?alt=media&#x26;token=80ccc5dd-1405-49b0-83b1-7ca9c4845803" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Desktop gallery position**

Can be set left or right position.

\
**Default variant**

Can be set as Current variant selected or Not selected by default.

In the following examples, you can view the *Default variant* settings:

{% tabs %}
{% tab title="Current variant" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FpgJKacWa7yqLkexuijxZ%2Fpr_cur.png?alt=media&#x26;token=c7685673-8ac5-4f25-b247-529956a92438" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Not selected" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FXuTVLGwZIhtCMtMmRS2s%2Fpr_not_s.png?alt=media&#x26;token=aeb3e69d-6302-4673-ae02-f01f03ffc106" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

***

## Media

{% hint style="info" %}
Learn more about [media types.](https://help.shopify.com/manual/products/product-media)
{% endhint %}

**Enable sticky content on desktop**

Enable this option to fix product images in the viewport, preventing them from scrolling with the product details.

**Desktop layout**

Available options for Desktop layout include:

* Slider without thumbnails
* Thumbnails vertical
* Thumbnails horizontal
* 1 column
* 2 columns
* Stacked

In the following examples, you can view the *Desktop layout* settings:

{% tabs %}
{% tab title="Thumbnails vertical" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F7Cvcp3B1g6JeVVytZxD7%2Fpr_thumb_v.png?alt=media&#x26;token=f9d9db3c-83c4-4b77-98fe-be4d85d00e4c" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Thumbnails horizontal" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FTMuY1d6IDeQT4ntKEPpz%2Fpr_thumb_h.png?alt=media&#x26;token=f4acc1b5-6950-46e4-97bc-fc0063884a34" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="1 column" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2Fjvtjca7HsWJjbAF63vqr%2Fpr_thumb_1.png?alt=media&#x26;token=5bc36b5f-39d9-4db8-878d-beb5172d60e0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="2 columns" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F3b2eDcKao7697fu6lS68%2Fpr_thumb_2.png?alt=media&#x26;token=84d14b96-51a9-43ea-be60-a074ba1a0d0e" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Stacked" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FIwgYdq3um3ooNDP52IIV%2Fpr_thumb_s.png?alt=media&#x26;token=2ec60963-6aeb-41d9-867d-45ca301f1a59" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Mobile layout**

Available options for Mobile layout include:

* Slider without thumbnails
* Thumbnails&#x20;
* Dots

In the following examples, you can view the *Mobile layout* settings:

{% tabs %}
{% tab title="Thumbnails " %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FkM9ClzR9i4ziLLmRTE83%2Fpr_m_thumb.png?alt=media&#x26;token=d190890e-709d-4241-a560-01d78ca8b6f0" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dots" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FhsLMErV7rvY8QrkAOre1%2Fpr_m_dots.png?alt=media&#x26;token=e42c0763-a7ea-41e4-af77-db20a7fb0786" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Image zoom**

Available options for Mobile layout include:

* Open lightbox
* Click and hover
* No zoom

In the following examples, you can view the *Image zoom* settings:

{% tabs %}
{% tab title="Open lightbox" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FZnyQScbAWhxoqYPl0Ihn%2Fpr_zoom_l.png?alt=media&#x26;token=b29f72f4-905d-4af0-8feb-0f824c5b134a" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Click and hover" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FT1mwQTGtgN48F0PployC%2Fpr_zoom_h.png?alt=media&#x26;token=b475d875-2d89-4e84-9659-538c4c5c9865" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Click and hover defaults to open lightbox on mobile.
{% endhint %}

**Image ratio**

To control the size of product images, choose one of the listed options from the drop-down: **Auto**, **Portrait (3:4)**, **Landscape (4:3)**, **Square (1:1),** or **Round (1:1)**. Read about the product image ratio in the initial [documentation](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/image-editor).
