# 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>


---

# 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://halosoft.gitbook.io/ella-documentation/how-to-set-up-a-product-template-step-by-step.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.