Product Variants

• How it works
• Templating
  • Adding to cart

Product Variants are a pretty common feature amoung e-commerce stores today, especially for stores that sell physical products, like t-shirts.

How it works

For standard products, you would have a Price field in your Product entries. However, to use variants, you need to remove the Price field and switch it for a Product Variants field. Make sure the handle of the field is product_variants or Simple Commerce won't pick it up.

Templating

You can loop over variants just like you would with any grid of data in Antlers.

1{{ product_variants:options }}
2    {{ variant }} - {{ price }}
3{{ /product_variants:options }}

Adding to cart

To add a variant option to the cart you can use the same workflow you would with normal products. Although, now - you need to also provide the 'key' of the variant option the user wants to add.

 1{{ sc:cart:addItem }}
 2    <input type="hidden" name="product" value="{{ id }}">
 3 
 4    <select name="variant">
 5        <option disabled>Variant</option>
 6        {{ product_variants:options }}
 7            <option value="{{ key }}">{{ variant }} {{ price }}</option>
 8        {{ /product_variants:options }}
 9    </select>
10 
11    <select name="quantity">
12        <option disabled>Quantity</option>
13 
14        {{ loop from="1" to="5" }}
15            <option value="{{ value }}">{{ value }}x</option>
16        {{ /loop }}
17    </select>
18 
19    <button type="submit">Add to cart</button>
20{{ /sc:cart:addItem }}