Product variants and options are extending original product information for different variations based on combination of product options (e.g. color, size, style, material, etc.), image, price and description.
In short, there are 3 main steps in using product variants and options
add options to the product category
add variants to the product using these options
add variants placeholder text to the catalog page
To create product options and variants follow the steps below.
1. Navigate to the Product Categories page and add new category or select existing for edit.
2. Add required options for the category and create new options if necessary. Also you can remove options from the category or completely delete them from the system.
Options can be reused between different product categories that can be convenient for the product search and navigation across different categories.
4. Review your options and re-order (if necessary) or remove from the category (that automatically removes this option from the products in this category).
5. Now you can add variants to the product using these options. Go to the product edit and add new variants. In this tab you can edit variant fields or remove variants.
Click on table cell to edit product variant price, image, description and SKU, barcode quantity, etc.
6. You can filter products for specific options on the product list page.
7. Finally, you can use variants for display in your catalog, templates or layouts. Drag and drop a product to a catalog page, add variant placeholder text and format for display. Edit variants placeholder to show what you need, remove what is not required.
Variant placeholder between {{Variants}} and {{/Variants}} will be repeated for each variant and replaced with actual variant values.
You can always paste variant placeholder text using following template ( replace option tokens {{Size}} or {{Color}} if your product option names are different).
{{Variants}}
{{Image:Fit:50:50}} {{Size}} / {{Color}} {{Price}} {{Description}} {{Separator:/}}
{{/Variants}}{{Variants}}
{{Option:1}}-{{Option:2}}{{Separator:;}}
{{/Variants}}
{{Products: VariantCount > 0}}
{{Name}}
{{/Variants}}
{{Variants:OrderBy > SKU}}
{{SKU}} - {{Option}}{{Separator:,}}
Barcode: {{Barcode}}
Quantity: {{Quantity}}
{{BarcodeImageExt}}
{{/Variants}}Read more about variants fields and iteration syntax
Adjust variants placeholder template for your needs. For example
Remove tokens (in brackets {{variant_field}}) that you don’t want to show or reorder them
Change variant image parameters in the token using format {{Image:Position:Width:Height}}, e.g. {{Image:Fit:50:50}}
Put a text where required, e.g. Size: {{Size}} Color {{Color}} Price: ${{Price}}
{{Separator:<symbol>}} token will insert symbol between variants,e.g. {{Separator:/}} for “/”
You can use {{Option:<index>}} for referencing variant option by index instead of name, e.g. {{Option:1}} instead of {{Size}}
Use {{BarcodeImage}} or {{BarcodeImageExt}} to display a barcode image
Advanced formatting
You can format variants using HTML code by switching to the editor code view:
For example, to show varaints in the table replace existing code with following (edit your option names):
<table>
<thead>
<tr>
<td>Color</td>
<td>Size</td>
<td>Price</td>
<td>Barcode</td>
</tr>
</thead>
<tbody>
<!--{{Variants}}-->
<tr>
<td>{{Color}}</td>
<td>{{Size}}</td>
<td>{{Price}}</td>
<td>{{BarcodeImageExt}}</td>
</tr>
<!--{{/Variants}}-->
</tbody>
</table>