# Product

Start by choosing your preferred look or skip to the detailed [section settings](#section-settings) further below:

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Look 1</strong><br>Thumbnails with same color scheme</td><td><a href="/files/je1Iqm8BTWfQJo2I8Ubv">/files/je1Iqm8BTWfQJo2I8Ubv</a></td><td><a href="/pages/9ntxTvolnmZDZGQF8IIz#look-1-thumbnails-with-same-color-scheme">/pages/9ntxTvolnmZDZGQF8IIz#look-1-thumbnails-with-same-color-scheme</a></td></tr><tr><td><strong>Look 2</strong><br>Thumbnails with different color scheme</td><td><a href="/files/s0FFuQjyi0xvmoKWYuUI">/files/s0FFuQjyi0xvmoKWYuUI</a></td><td><a href="/pages/9ntxTvolnmZDZGQF8IIz#look-2-thumbnails-with-different-color-scheme">/pages/9ntxTvolnmZDZGQF8IIz#look-2-thumbnails-with-different-color-scheme</a></td></tr><tr><td><strong>Look 3</strong><br>Slideshow with stretch images</td><td><a href="/files/CwgsuQaA6137qvoFq7dN">/files/CwgsuQaA6137qvoFq7dN</a></td><td><a href="/pages/9ntxTvolnmZDZGQF8IIz#look-3-slideshow-with-stretch-images">/pages/9ntxTvolnmZDZGQF8IIz#look-3-slideshow-with-stretch-images</a></td></tr><tr><td><strong>Look 4</strong><br>Slideshow with "adapt to media" images</td><td><a href="/files/IDa9f3XqBpaBzOp3QOag">/files/IDa9f3XqBpaBzOp3QOag</a></td><td><a href="/pages/9ntxTvolnmZDZGQF8IIz#look-4-slideshow-with-adapt-to-media-images">/pages/9ntxTvolnmZDZGQF8IIz#look-4-slideshow-with-adapt-to-media-images</a></td></tr><tr><td><strong>Look 5</strong><br>Slideshow with "adapt to media" images, media padding, different color scheme</td><td><a href="/files/4LdMZilPXkW4GTqSpkFh">/files/4LdMZilPXkW4GTqSpkFh</a></td><td><a href="/pages/9ntxTvolnmZDZGQF8IIz#look-5-slideshow-with-adapt-to-media-images-and-different-color-scheme">/pages/9ntxTvolnmZDZGQF8IIz#look-5-slideshow-with-adapt-to-media-images-and-different-color-scheme</a></td></tr><tr><td><strong>Look 6</strong><br>Vertical scroll with mobile slideshow</td><td><a href="/files/NKJkiDonVLb0IUBSOPHJ">/files/NKJkiDonVLb0IUBSOPHJ</a></td><td><a href="/pages/9ntxTvolnmZDZGQF8IIz#look-6-vertical-scroll-with-mobile-slideshow">/pages/9ntxTvolnmZDZGQF8IIz#look-6-vertical-scroll-with-mobile-slideshow</a></td></tr></tbody></table>

{% hint style="info" %}
Note that there might be slight visual differences across stores depending on product image ratios and whether the image ratio is consistent for all of a given product's media.
{% endhint %}

### Look 1: Thumbnails with same color scheme

<figure><img src="/files/je1Iqm8BTWfQJo2I8Ubv" alt="Screenshot of thumbnails with same color scheme product page layout"><figcaption></figcaption></figure>

* **Layout**: Thumbnails
* Ensure the **media color scheme** and **product information color scheme** are the same

### Look 2: Thumbnails with different color scheme

<figure><img src="/files/s0FFuQjyi0xvmoKWYuUI" alt="Screenshot of thumbnails with different color schemes product page layout"><figcaption></figcaption></figure>

* **Layout**: Thumbnails
* **Media padding:** This affects just the top and bottom of your thumbnails column on desktop. Adjust so it matches your product information column (especially if it's aligned to the top).
* **Color schemes**: Adjust your **media color scheme** and/or **product information color scheme** to create the split look (they must be different).
* **Product information > Vertical alignment**: Align your product information content to the top if you want it neatly aligned with the top of your thumbnails or keep it centered (resize your browser to see how it feels at different screen sizes).

### Look 3: Slideshow with stretch images

<figure><img src="/files/CwgsuQaA6137qvoFq7dN" alt="Slideshow with stretch images"><figcaption></figcaption></figure>

* **Layout**: Slideshow
* **Media color scheme:** The color scheme only affects the slideshow previous/next buttons (e.g. if you want dark buttons/light buttons) in this look. In the above screenshot, we're using color scheme 1 in Precision with the **primary button style**.
* **Media size:** Stretch

### Look 4: Slideshow with "adapt to media" images

<figure><img src="/files/IDa9f3XqBpaBzOp3QOag" alt="Screenshot of slideshow layout with adapt images"><figcaption></figcaption></figure>

* **Layout**: Slideshow
* **Media padding**: None
* Ensure the **media color scheme** and **product information color scheme** are the same
* **Button style:** Choose primary, secondary or text for your previous/next buttons (and video transcript button, if enabled). In the above screenshot, we're using the primary button style from Precision's color scheme 1.
* **Media size:** Adapt to media

### Look 5: Slideshow with "adapt to media" images and different color scheme

<figure><img src="/files/4LdMZilPXkW4GTqSpkFh" alt="Screenshot of slideshow with different color scheme and media padding"><figcaption></figcaption></figure>

* **Layout**: Slideshow
* **Media padding**: Adjust to your liking. In the above screenshot, we selected XXLarge.
* **Color schemes**: Adjust your **media color scheme** and/or **product information color scheme** to create the split look (they must be different).
* **Button style:** Choose primary, secondary or text for your previous/next buttons (and video transcript button, if enabled). In the above screenshot, we're using the primary button style from Precision's color scheme 4.
* **Media size:** Adapt to media

### Look 6: Vertical scroll with mobile slideshow

<figure><img src="/files/NKJkiDonVLb0IUBSOPHJ" alt="Screenshot of desktop vertical scroll"><figcaption></figcaption></figure>

* **Layout**: Mobile slideshow, desktop scroll
* **Other settings:** The media display style is all you need to achieve the desktop scroll, but you may wish to style the slideshow that displays on mobile. Choose between [look 4](#look-4-slideshow-with-adapt-images) or [look 5](#look-5-slideshow-with-adapt-images-and-different-color-scheme) and adjust those settings accordingly (keeping the layout as desktop scroll!).

### Bonus: Mobile gradient

<figure><img src="/files/auIwTz1FoY77KracEL9l" alt="Screenshot of a gradient effect on the mobile Primavera product page" width="188"><figcaption></figcaption></figure>

* **Layout**: Slideshow OR Vertical scroll (bear in mind if you choose slideshow, the gradient effect will also be on desktop).
* **Media padding**: Adjust to your liking. In the above screenshot, we selected XXLarge.
* **Media size:** Adapt to media
* **Color schemes:** Create a **media color scheme** that is a vertical linear gradient where the color at the bottom matches the **product information color scheme.** Adjust the transparency of the bottom color so it melts into the other color scheme.

***

### Section settings

* **Product**: Choose a product to feature
* **Product media**:
  * **Layout**: Choose between 3 layouts (you can [explore the various looks here](/templates/product.md)):
    * **Slideshow:** If your images have a portrait ratio, consider using this layout with the image aspect ratio set to **stretch** for maximum visual impact
    * **Thumbnails:** Most flexible layout, great for stores that don't have consistent product image ratios
    * **Vertical scroll, mobile slideshow:** This layout is great if you have several product images per product and your product images are focused on visual storytelling
  * **Mobile maximum width**: Keep product media **full width** or choose **page width** or **compact** to shorten the media height and bring important product details higher up on the page.  <mark style="background-color:green;">Available in version 1.2.0 and later</mark>\
    \
    ![](/files/FvBkxCZEf4HvNRpvENGf)\
    \&#xNAN;*To achieve the above look, select a slideshow layout for mobile (**slideshow** or **vertical scroll**) with **compact** product media and **slide** animation style.*<br>
  * **Enable zoom:** Allows product images to be zoomed. On touch screens and with keyboard only users, this appears as a modal popup that can be scrolled, for desktop mouse users this appears via a click and hover mechanism. Please note, in order to properly support zoom, you will need to upload high quality product images, we suggest a minimum width or height of 3000 pixels.
  * **Enable autoplay**: If you have video as a part of your product media, this will autoplay the video when it is navigated to. If you have concerns about **accessibility** or you are using the **vertical scroll** layout, we do not recommend enabling this option. Please note, that by enabling autoplay, your video will be muted. If you need the video to include sound, please disable autoplay.
  * **Color scheme**: This setting controls the color scheme of the background color around the media as well as any buttons that may display. If you are using an **adapt slideshow** or **thumbnail** layout, try using a different color scheme for a split panel effect!
  * **Media padding**:
    * On the **thumbnail** layout,  this adds top and bottom padding to the thumbnail section.
    * On the **slideshow** layout, if the **image aspect ratio** is set to **adapt**, this controls the size of the frame around the media.
    * This setting has no effect in the **vertical scroll, mobile slideshow** layout
  * **Button style:** This applies to slideshow and zoom. Choose between primary, secondary or text.
* **Slideshow**: These settings only apply to the **slideshow** and **vertical scroll, mobile slideshow** layouts.
  * **Media size:** Choose between **adapt** and **stretch**. Adapt will display the media in it's original aspect ratio, with space around it. You can control the level of spacing using the **Media padding** setting (see above).
  * **Animation style:** Allows you to choose between a **slide** and a **fade animation.**
  * **Counter style:** Choose between hidden, counter or progress bar.
    * Progress bars on product media appear directly under the image, a different style to progress bars elsewhere in the theme)
    * The progress bar option works especially well with a stretched slideshow layout or if your media section has a different color scheme.
  * **Enable looping**: Unless enabled, the previous button on the first slide and the next button on the last slide are disabled. Enabling this option allows the smooth cycling through the slides.
* **Product information**:&#x20;
  * **Color scheme**: Choose the color scheme for the product information column. When product media and product information have different color schemes, you can [create interesting looks](/templates/product.md).
* **Sticky add-to-cart:** <mark style="background-color:green;">Available in version 1.6.0 and later</mark>
  * **Enable on mobile**
  * **Enable on desktop**
  * **Show variant image:** Display image of currently selected variant
  * **Show price**
  * **Show product rating**
  * **Color scheme**

{% content-ref url="/pages/NBFcAhZJvt4rpN7om21a" %}
[Why isn't my video autoplaying?](/faqs/why-isnt-my-video-autoplaying.md)
{% endcontent-ref %}

### Blocks

All the product information blocks are grouped under one parent block called **product information**.

In this grouping block, you can set the following settings:

* **Horizontal alignment**: Aligns content to the left, center or right
* **Vertical alignment**: When the product information content is shorter than the product media on desktop, you can align it to the top, middle or bottom.
* **Container width**: This allows you to control the maximum container width. This setting may not have any effect on smaller screens.
* **Top/bottom padding**: This setting controls for padding on the product information only. To adjust padding on the media section, use the media padding setting.

Within the product information block, you can nest all the different types of [product blocks](/templates/product/product-blocks.md).

<a href="/pages/SU1VdIj70I80v4rDTevC" class="button primary">Go to Product blocks</a>


---

# Agent Instructions: 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:

```
GET https://docs.ultramarinastudios.com/templates/product.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.