How to add options for your products, like different sizes or colors

by

In this guide we describe how to add options for your products, like different sizes or colors.

You will use two different elements to create products of different sizes or colors:

  1. Product options, like the option “Size”, with the choices S, M and L.
  2. Product variants, like the product “Dress” of size L and color Red. A product variant is a specific product associated to a specific set of options.

You will also find a video guide at the bottom of the article and directly on youtube.

What to know about the product options

The product options are shared among the products. This means that you can reuse them for different products, to save time. However, it also means if you update or delete an option or a choice in an option, it will reflect on all the products that use this option. You can also use the same label for different options.

For example, let’s create 3 options for our products:

  • option 1: Size, with choices S, M, L (we will use it for clothes),
  • option 2: Size, with choices 4, 5, 6 (we will use it for shoes),
  • option 3: Color, with choices Red, Blue, Grey, Black and White (we will use it for both clothes and shoes).
Example of product options: sizes and colors

We have created 3 different options: 2 different options both labelled “Size” , and 1 option “Color”

How to create your product variants

Once you have created one or more options, you can create products variants based on them. You do not have to use all the options’ choices for each product, you can use only some of them.

You could for instance have the product “Dress”, and create the following variants:

  • Size S, color Red
  • Size M, color Red
  • Size L, color Red
  • Size M, color Blue

In that case, the color Blue will only be available in size M, and the colors Grey, Black and White are not available (and will be automatically hidden for the customer).

Example of product options and variants

We then create the variants of the product, using the options we have defined

Conclusion

The product is then displayed with its different choices on our site.

 

Product with options example

The product as it appears on our site, with the available options

Video guide

Also see the video guide below. It illustrate in more details how to create different options and reuse them between two different products.