# Featured product

{% hint style="success" %}
**Quick start**

* [Choose a look](https://docs.ultramarinastudios.com/templates/product) and follow the simple setup instructions

* Browse the available [product blocks](https://docs.ultramarinastudios.com/templates/product/product-blocks)
  {% endhint %}

* **Product**: Choose a product to feature

* **Product media**:
  * **Layout**: Choose between 3 layouts (you can [explore the various looks here](https://docs.ultramarinastudios.com/templates/product)):
    * **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>\
    \
    ![](https://3146423938-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZQuVfmt0J7tzTvfBqG6C%2Fuploads%2FfpdNyAELlWIoBkZZv7Pq%2Flinkedin-051325-thumbnail.jpg?alt=media\&token=2b33043f-514b-4d3c-8322-9b1a841dee91)\
    \&#xNAN;*To achieve the above look, select a slideshow layout for mobile (**slideshow** or **vertical scroll**) with **compact** product media and **slide** animation style.*
  * **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](https://docs.ultramarinastudios.com/templates/product).

{% content-ref url="../faqs/why-isnt-my-video-autoplaying" %}
[why-isnt-my-video-autoplaying](https://docs.ultramarinastudios.com/faqs/why-isnt-my-video-autoplaying)
{% 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](https://docs.ultramarinastudios.com/templates/product/product-blocks).

<a href="../templates/product/product-blocks" class="button primary">Go to Product blocks</a>

&#x20;

<br>
