# Product summary

Accurate, reliable, and in-depth product details help customers find the information they need to make buying decisions.

{% embed url="<http://shopify.pxf.io/gb_rok_prosettings>" %}

You can change the product information by re-ordering, removing, and adding block

We have two templates for the product page that you can choose from.

* Default product
* Layout-2

You can change the product template by following these steps:

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

1. Login to your Shopify store, go to **Online Store > Products**
2. Select the **product** you want to change the theme template
3. In the product settings, navigate to '**Online Store**' and then select the '**theme template'** you want to change
   {% endhint %}

To customize the template layout, you can follow these steps:

{% hint style="success" %}
Steps

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

## Product summary settings

**Layout:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Thumbnails position:** Adjust the placement of thumbnails to best fit your layout and design preferences.

**Disable skeleton loading effect:** Opt to remove the skeleton loading animation, which serves as a placeholder while content is loading.

**Enable sticky product information on large screens:** Activate this feature to keep product information visible and fixed in place as the user scrolls on larger screen devices, enhancing visibility and accessibility.

<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/lyGdAZf4v4LwjG6eDIf5/image.png" alt=""><figcaption></figcaption></figure>

**Image click action:** Choose between enabling a hover zoom effect on images or using an icon to trigger zoom.

**Hover image zoom type:** Select the type of zoom effect that will be applied when hovering over an image.

**Hidden zoom icon on mobile:** Opt to hide the zoom icon on mobile devices for a cleaner look.

**Enable video looping:** Activate looping for videos, allowing them to play continuously.

**Thumbnails on mobile:** Decide whether to display thumbnails or show navigation options on mobile devices for easier browsing of images or videos.

<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/7eIizC1Q5vL8jdtpoiY1/image.png" alt=""><figcaption></figcaption></figure>

**Color swatch:** Activate the color swatch feature to allow users to view product options in different colors.

**Swatch size:** Set the size of the color swatches to ensure they are easily viewable and accessible for selection.

{% hint style="info" %}
Follow this link to know what [**variant image grouped**](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/variant-image-grouped) is and how to set up.
{% endhint %}

<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/XzfWxikHzZaZrThC9h6j/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/OfyLHVSP1VnFZT6SmVIs/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/niVteMYkc5VfE2wdYlOK/blobs/uetcpKK01Syt6BHfSvbA/image.png" alt=""><figcaption></figcaption></figure>

## Blocks in the Product summary option <a href="#blocks-in-the-product-summary-option" id="blocks-in-the-product-summary-option"></a>

The **Product summary** option has total of 24 **blocks** for you to add to the sidebar:

* [Product price](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-price)
* [Product review & sold](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-review-and-sold)
* [Short description](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/short-description)
* [Product title](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-title)
* [Visitors counter](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/visitors-counter)
* [Product custom fields](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-custom-field)
* [Custom HTML](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/custom-html)
* [Trust badge](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/trust-badge)
* [Delivery & Return](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/delivery-and-return)
* [Pickup availability](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/pickup-availability)
* [Product form](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-form)
* [Product addons](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-addons)
* [Stock countdown](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/stock-countdown)
* [Product meta](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-meta)
* [Product swatch](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-swatch)
* [Product label](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-label)
* [Custom text](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/custom-text)
* [Custom liquid](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/custom-liquid)
* [More products color](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/more-products-color)
* [Countdown timer](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/countdown-timer)
* [360° Product viewer](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/360-product-viewer)
* [Product vendor logo](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/product-vendor)
* [Subscriptions](https://blueskytechco.gitbook.io/rokan-shopify/product-page-settings/product-summary/subscriptions)
