# How to set up a product template 'step by step'?

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F0hYhwzozmQi6g3PyAKUw%2Fimage.png?alt=media&#x26;token=586db04d-a7a7-48bd-89dc-e54d4443d699" alt=""><figcaption></figcaption></figure>

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products -> template-step-by-step** from the dropdown window.
4. From **Product information ->** Click **Add block** -> Choose **Step-by-step variant picker**.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2Fkyi0odrJkMEnE7IgyAhD%2Fimage.png?alt=media&#x26;token=179066bd-2105-47f3-a3bd-1032f83f6487" alt=""><figcaption></figcaption></figure>

## Block Settings

<table><thead><tr><th width="290">Settings</th><th>Meaning</th></tr></thead><tbody><tr><td><strong>Color</strong></td><td></td></tr><tr><td>Text/Icon</td><td>Set the color for the icon and text of the uncompleted step.</td></tr><tr><td>Text/Icon active</td><td>Set the color for the icon and text of the completed step.</td></tr><tr><td>Variant background color</td><td></td></tr><tr><td><strong>Size chart</strong></td><td></td></tr><tr><td>Enable size chart</td><td>Enable the size chart for 1 of the steps.</td></tr><tr><td>Tab item</td><td>Enter the name of the tab item you would like to apply to this size chart.</td></tr><tr><td>Size chart type</td><td><p>There are 5 options for the size chart:</p><p></p><p><mark style="color:orange;"><strong>Product type</strong></mark>
<br><mark style="color:orange;"><strong>Product vendor</strong></mark>
<br><mark style="color:orange;"><strong>Metafield</strong></mark>
<br><mark style="color:orange;"><strong>Custom image</strong></mark>
<br><mark style="color:orange;"><strong>Custom page</strong></mark></p></td></tr><tr><td>Custom image</td><td>Select an image to display the size chart (only for the custom image option)</td></tr><tr><td>Custom page</td><td>Select a page to display the size chart (only for the custom page option)</td></tr><tr><td>Image type</td><td><p>Select the image format to display the size chart (only for the product type or product vendor option) </p><p></p><p><mark style="color:orange;"><strong>Use image with PNG format</strong></mark> </p><p><mark style="color:orange;"><strong>Use image with JPG format</strong></mark></p></td></tr><tr><td><strong>Color comparison</strong></td><td></td></tr><tr><td>Enable color comparison</td><td>Enable the color comparison for 1 of the steps.</td></tr><tr><td>Tab item</td><td>Enter the name of the tab item you would like to apply to this color comparison.</td></tr><tr><td><strong>Customization option</strong></td><td></td></tr><tr><td>Tab item</td><td>Enter the name of this Customization option step.</td></tr><tr><td>Text option's name</td><td>Enter the name of the Customization option you want to display in the sidebar cart and cart page.</td></tr><tr><td><strong>Block padding</strong></td><td></td></tr><tr><td>Top padding</td><td>Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr><tr><td>Bottom padding</td><td>Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).</td></tr></tbody></table>

{% hint style="warning" %}
**Step-by-step variant picker** only works for the following cases:

* The product has 2 or more variant options.
* The product has only 1 variant option and uses the Customization option.
  {% endhint %}

## How to select this template for a product?

1. From your Shopify admin, go to [**Products**](https://admin.shopify.com/products).
2. Click the name of the product that you want to edit.
3. In the **Theme template** section, choose **template-step-by-step.**

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FN9dbMmzuixGuhMtfcDiS%2Fimage.png?alt=media&#x26;token=41a96901-c663-4b99-a810-e816563d097c" alt=""><figcaption></figcaption></figure>

## How to upload images for variants?

1. From your Shopify admin, go to [**Products**](https://admin.shopify.com/products).
2. Click the name of the product that you want to edit.
3. In the **Variants** section, click the image icon next to the variant that you want to add image to.
4. Select a product image from your existing images or click **Add image** to upload a new image from your device.
5. Click **Done**.
6. Click **Save**.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FPLW2kBty37NyPIGA7qgm%2Fimage.png?alt=media&#x26;token=12ee390b-1e7e-4abf-8a51-7fded2d72655" alt=""><figcaption></figcaption></figure>

## How to set up the Size chart?

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products -> template-step-by-step** from the dropdown window.
4. From **Product information ->** Choose **Step-by-step variant picker**.
5. On **Step-by-step variant picker** block scroll down to **Size chart - Tab item** and enter the name of the tab item you would like to apply to this size chart.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FA9BaHZXjxMKaF7OXM24r%2Fimage.png?alt=media&#x26;token=5d9f9fcb-ca37-4294-b8c0-245b4fe9c283" alt=""><figcaption></figcaption></figure>

## How to set up the Color comparison?

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products -> template-step-by-step** from the dropdown window.
4. From **Product information ->** Choose **Step-by-step variant picker**.
5. On **Step-by-step variant picker** block scroll down to **Color comparison - Tab item** and enter the name of the tab item you would like to apply to this color comparison.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2F8BN8UGUKqDk4i5D4pZpR%2Fimage.png?alt=media&#x26;token=976a55f9-dd74-44ef-8d13-9fb29e42e863" alt=""><figcaption></figcaption></figure>

## How to set up the Customization option?

1. From your Shopify admin, go to **Online Store** -> **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Choose **Products -> template-step-by-step** from the dropdown window.
4. From **Product information ->** Choose **Step-by-step variant picker**.
5. On **Step-by-step variant picker** block scroll down to **Customization option - Tab item** and enter the name of the tab item you would like to apply to this color comparison.

<figure><img src="https://3284033180-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fag3h7ZduRGWlquTgGUHi%2Fuploads%2FKhJyet50dHXd4Uw4wbus%2Fimage.png?alt=media&#x26;token=ae596344-b3ba-476b-bfa1-58229d210627" alt=""><figcaption></figcaption></figure>