How to set up a product template 'step by step'?
Last updated
Last updated
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products -> template-step-by-step from the dropdown window.
From Product information -> Click Add block -> Choose Step-by-step variant picker.
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.
Click the name of the product that you want to edit.
In the Theme template section, choose template-step-by-step.
Click the name of the product that you want to edit.
In the Variants section, click the image icon next to the variant that you want to add image to.
Select a product image from your existing images or click Add image to upload a new image from your device.
Click Done.
Click Save.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products -> template-step-by-step from the dropdown window.
From Product information -> Choose Step-by-step variant picker.
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.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products -> template-step-by-step from the dropdown window.
From Product information -> Choose Step-by-step variant picker.
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.
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Products -> template-step-by-step from the dropdown window.
From Product information -> Choose Step-by-step variant picker.
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.
From your Shopify admin, go to .
From your Shopify admin, go to .
