In this video you will learn how to create multiple options for variants of the same product, such as the color. This allows you to create different variants under the same product and give your website visitors a way to choose between them.
Transcription
Creating a Color Option for Product Variants
We have created one mug product with black and green variants, but how can users choose between the two color options? We clearly need a color option that enables the selection of the specific variant.
Options in Webround are specific to single products and represent the choices required to pick one variant or another. The product defines all the options. While every variant defines the specific combination of option values that identify the variant. L
et's create the color option from the Options tab. You can clearly see that the type of the option is tag value. This property is very specific because options reuse tags and tag values to define the characterization of variants.
To define values for this option, we need to create the color tag. Tags are the basic element of characterization for your Webround Commerce catalog and can be used to search products or variants. Tags can also use icons from the React icons library. Let's add a clear icon. Make sure to also enable the role for the tag if there is a match in the list. This helps creating feeds for external marketplaces.
The tag is only a container for values. To define tag values, click on the green plus button. Make sure to set all tag values as visible. We're now ready to access the product option section. Where we can define the product option values. Select the interested option with the yellow checkbox. This opens a model where you can pick tag values used as option values. Pick black and green.
The selection can be matched with the checkbox or with the little tips that can also be dragged to reorder values. Click the green save button to save these options on the product. As you can see, the product now defines black and green color options. This section has more interesting features, but we'll go through these later.
Defining Option Values for Variants
Go back to the product and navigate to its variants. Click the options button on each variant to define the option value. Click on the desired option and save. You can never save the same option for two different variants and you must always define one value for all options set on the product.
As an example, if we had another option for the size, we would have needed to define the value for the size option too, otherwise the save operation would have failed.