Store Product Options
Product Options 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 Options go to Apps -> Store -> Product Options.
You would first create the Product Options that you need and then you assign them to individual products. If you have a Product Option that is a select menu, checkbox, or radio button, then you will want to set up all possible values. When you assign the Product Option to a product you can select which values you want to use.
Follow these steps to assign a Product Option to a product.
- Set up at least one Product Option under Store -> Apps -> Product Options
- Go to Apps -> Store Products.
- Hover over the product and click on View product details & edit product options.
- Go to the Product Options tab and click the "Add Product Option" button on the right. This isn't adding a new Product Option, but rather adding an existing Product Option to the product.
- Select the Product Option that you want to add to the product. If necessary select the values to use.
- Save
Product Option Groups
Product Option Groups are a way to organize a set of Product Options 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 Option Group for the shirts that combines the colors and sizes needed for the shirts. Then, instead of assigning individual Product Options to a shirt product, you can simply assign the Product Option Group. Any further changes in the Product Option group will be automatically applied to all products using that Product Option Group.
Displaying Product Options
Below is a code example of how to display Product Options 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 }}