# Product Detail

## How To Install ?

1. From our app, click **Library.**
2. In the **Sections** tab, search for the keyword **Product detail.**
3. Select the section you want and click **Install** and **Customize.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FOMMVVRXVJiO2iYbRCrR0%2FProduct%20Detail%201.jpg?alt=media&#x26;token=05a8e18c-245a-4900-ab73-278b10e78469" alt=""><figcaption></figcaption></figure>

3. From the Shopify Editor sidebar, click **Add Section.**
4. Search for **Product Detail** section

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F1xE85VIB0vBhthKG1HQY%2FProduct%20Detail%202.jpg?alt=media&#x26;token=dbd45051-6216-464a-80fc-f3aa852f7c49" alt=""><figcaption></figcaption></figure>

> If you are using our theme, you can skip this step install "Product detail" section.

## How To Use The Size Chart ?

Step 1: [Configuring size chart](https://docs.smind.io/guides/configuring-size-chart).

Step 2: Go to the product page and select the correct product for which you just created the size chart.

Step 3: Click **Add Block** and click **Size Chart.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FN2jZx7myOj8dZ3kPYEGX%2FProduct%20Detail%203%20(1).jpg?alt=media&#x26;token=422d6cb4-2f6c-41f3-9d5a-1d20cf3fe765" alt=""><figcaption></figcaption></figure>

Then, you will see the size chart displayed in the product details.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FXawD7ynDh6Q7sd6wHwut%2FProduct%20Detail%204.jpg?alt=media&#x26;token=ba4617ab-667e-4d4f-903a-086b733acebc" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you don't select the correct product for which you set up the size chart, it will not be displayed.
{% endhint %}

## How To Use Variants Picker?

Step 1: [Configuring color swatches](https://docs.smind.io/guides/configuring-color-swatches).

Step 2: Customize the **Variant Picker** block.

* Color selector type "Color swatch"

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FUVRxzuA4zh2BrBd6cg0k%2FProduct%20Detail%205.jpg?alt=media&#x26;token=3a5d8bdb-3660-41b8-8507-4cb9aacd8f6e" alt=""><figcaption></figcaption></figure>

* Color selector type "Pill with color swatch"

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FbAGComcz41RYPhu2ExKS%2FProduct%20Detail%206.jpg?alt=media&#x26;token=ac804951-54cc-41ef-994b-f90bcc4f0d66" alt=""><figcaption></figcaption></figure>

* Color selector type "Image"

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F1M9rPvzBuZtsam1XyHym%2FProduct%20Detail%207.jpg?alt=media&#x26;token=6bec3b15-14ea-4310-a96a-d16006dca96e" alt=""><figcaption></figcaption></figure>

* Color selector type "Dropdown"

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FjyZ6oLdkcx5gpXjI3zKS%2FProduct%20Detail%208.jpg?alt=media&#x26;token=55b51b11-4e59-4383-ac98-d284ae6db907" alt=""><figcaption></figcaption></figure>

* Color selector type "Pills"

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FA1sgYBjlaz9Psm4rgYaP%2FProduct%20Detail%209.jpg?alt=media&#x26;token=ba2255db-c477-4129-9215-429da8b3fef5" alt=""><figcaption></figcaption></figure>

## How To Use Complementary Products  & Product Bundles ?

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FGyMosrJHbNAwi91wLgJg%2FProduct%20Detail.mp4?alt=media&token=f33f3892-7c0f-4de8-8440-574f8705764a>" %}

To set up the 'Complementary products' and 'Product bundles' blocks, you can follow the instructions below.

Step 1: Install the "[Search & Discovery](https://apps.shopify.com/search-and-discovery)" app.

Step 2: Choose the correct product name displayed in the product details and select complementary products.

1. From the **Search & Discovery** app, click **Recommendation.**
2. Select the product you want to add the complementary products or product bundles.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F5UZNMdBe9Nq5fPikjvQQ%2FProduct%20Detail%2010.jpg?alt=media&#x26;token=733ddc48-f1d6-4628-bddd-0121f256623f" alt=""><figcaption></figcaption></figure>

3. Click **Browse** to add the products.
4. Add the product you want and click **Add** and **Save** it

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FBFmHATdGlsRFT5OHZxkz%2FProduct%20Detail%2011%20(1).jpg?alt=media&#x26;token=4ef5034e-e720-4750-be67-24d4d49f24b8" alt=""><figcaption></figcaption></figure>

5. Click **Add Block** and add **Complementary Products.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FzQSLnAtCzA7BxbvAhQ3d%2FProduct%20Detail%2012.jpg?alt=media&#x26;token=4c64afb2-ed09-4ba8-b084-6faf4ad5fa23" alt=""><figcaption></figcaption></figure>

Then, you will see the complementary products displayed in the product details.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FgCF9Sn1xdFGS1zVxYPxz%2FProduct%20Detail%2013.jpg?alt=media&#x26;token=d31c1bb7-cc49-4ba0-b2fd-4f21b553c553" alt=""><figcaption></figcaption></figure>

6. Click **Add Block** and add **Product Bundles.**

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FbOnqYGta6uKk8bkapT47%2FProduct%20Detail%2014.jpg?alt=media&#x26;token=934e64c7-0e17-4656-97cb-072b6f229c5b" alt=""><figcaption></figcaption></figure>

Then, you will see the product bundles displayed in the product details.

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FoQXFyHiVv3JwnmApLGdH%2FProduct%20Detail%2015.jpg?alt=media&#x26;token=c421d271-bac0-4928-8470-e05b801e0e53" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
User can purchase multi-products the same time
{% endhint %}

{% hint style="info" %}
If all items are added to the cart or out of stock, the 'Complementary products' and 'Product bundles' blocks will not display anything.
{% endhint %}

### How To Use Multiple Variant Images ?

{% embed url="<https://youtu.be/2ra2Mrgv5yI>" %}
