Store Product Variants
Product Variants let you have form fields that will show on the product order form. The common use is to specify "Color" or "Size" but you can also have open-ended text fields and file uploads.
To manage Product Variants go to Apps -> Store -> Product Variants.
You would first create the Product Variants that you need and then you assign them to individual products. If you have a Product Variant that is a select menu, checkbox, or radio button, then you will want to set up all possible values. When you assign the Product Variant to a product you can select which values you want to use.
Follow these steps to assign a Product Variant to a product.
- Set up at least one Product Variant under Store -> Apps -> Product Variants
- Go to Apps -> Store Products.
- Hover over the product and click on View product details & edit product variants.
- Go to the Product Variants tab and click the "Add Product Variant" button on the right. This isn't adding a new Product Variant, but rather adding an existing Product Variant to the product.
- Select the Product Variant that you want to add to the product. If necessary select the values to use.
- Save
Product Variant Groups
Product Variant Groups are a way to organize a set of Product Variants to consistently assign them to products. For example, say that you sell t-shirts and pants. All of your shirts can have the same set of colors and sizes. But the pants have some different colors and sizes. You can create a Product Variant Group for the shirts that combines the colors and sizes needed for the shirts. Then, instead of assigning individual Product Variants to a shirt product, you can simply assign the Product Variant Group. Any further changes in the Product Variant group will be automatically applied to all products using that Product Variant Group.
Displaying Product Variants
Below is a code example of how to display Product Variants in your product order form.
{{ product.orderForm.openTag }}
{% for option in product.orderForm.fields.options %}
<p>
{{ option.label }}<br>
{{ option.tag }}
</p>
{% endfor %}
{{ product.orderForm.fields.quantity.tag }}
{{ product.orderForm.fields.partialQuantity.tag }}
<button type="submit" class="Button">Add to cart</button>
{{ product.orderForm.closeTag }}