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

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.

Block Settings

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

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.

How to select this template for a product?

1. From your Shopify admin, go to Products.

2. Click the name of the product that you want to edit.

3. In the Theme template section, choose template-step-by-step.

How to upload images for variants?

1. From your Shopify admin, go to 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.

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.

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.

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.