# 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>" %}


---

# 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.smind.io/sections/product-detail.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.
