> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/how-to-set-up-a-product-template-step-by-step.md).

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

<figure><img src="/files/xCwBKbhkc0L0M69R9EgI" 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="/files/0uiPRdvuhqxb8ImDMARx" 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="/files/07yksaTQ93GfRuTponi0" 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="/files/L7uJK0rzKUha5mM1zuEO" 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="/files/96GvOyIhzX3r9WZJpKWx" 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="/files/Q00tbqRSA8B7PwOyBekN" 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="/files/dyVvoIDZP01D5kOFQgwG" alt=""><figcaption></figcaption></figure>