Product variations, personalization and colors
Imagine you have a product with multiple variations in color, type or size. Instead of adding separate products for each variation, you can set variations, parameters and colors for each product.
Navigate to Management > Products, add a new product or select a product to edit. Click the Advanced tab in the product editing form so you can edit all product options.
- Variations
-
Variations each have their own article code. They are different products that can vary in price, weight and stock.
For example: a medium size T-shirt is different from a large size T-shirt. - Product personalization (was named Parameters before)
-
With product personalization your customers can personalize your products to their desires. The article code and the price of the product remain the same regardless of the parameters.
For example: a text on a T-shirt can be a parameter. - Colors
-
Colors are actually parameters, but can be set in a very user-friendly way. This feature is added because parameters can be complicated for new users.
If the pre-defined colors are too limited, you can still use variations or parameters to set a color.
Your visitors can choose the variation, parameter or color on the product detail page in your shop.
Setting product variations
Examples
Sizes of clothing:
- Small
- Medium
- Large
- Extra Large
A product which offers the possibility to include an extra service:
- Office chair: € 149
- Office chair + assembly: € 179
Adding a variation to a product
- Navigate to Management > Products and choose an existing product
- Click the Advanced tab and open the Variations section
- Click Add a new variation
You will now see a new product form with orange fields. Only article is a required field. All fields that haven't been filled, will have the same value as the main product.
- Don't forget to click save
View the results
Navigate to the product in your shop and you will see that a drop down menu has been added with the text Select....
Display properties in list format or in a drop down menu
You can change the way product properties are displayed with the Product detail page layout option at Settings > Shop settings.
| Value | Result |
|---|---|
| Variations: list | A clear list of the variations is displayed. Your visitors can add the product immediately to their shopping cart. |
| Variations: drop down menu | The product variations are displayed in a compact way in a drop down menu. Your visitors can select the desired property in this menu. |
Change "Select ..." to "Choose your size"
- Select the product and edit the variation
- Change Drop down menu title (English): this can be set for each language
If you want to add multiple variations, make sure the Drop down menu title remains identical. If this isn't the case, you will create a new drop down menu.
Special features
Every variation can have a different price, weight, photo or different colors. You can also mix product variations with multilingual descriptions, product statuses, discount prices, customer groups and product personalization.
The main product is also a product the customer can purchase. If you don't want this, you can change the product status to Customer has to choose a variation first.
Variations can also have subvariations. They may also have other product characteristics. When the fields are empty, they will receive the value of the parent product, or the product above.
For example, you can let your customer choose between Cotton or Polyester and then choose between sizes.
Product variations are attached to the main product. They are never shown in product lists, in search results or in filter results. Use categories and subcategories if you want your customers to find your products in the product lists.
Edit or delete a variation
You can change the variations or delete them by clicking the icons in the list of added variations.
Product personalization
In product management, click the Advanced tab and open the Product personalization section.
Product personalization are additional properties of a product. This may be a text on a cake, a shoe, or dimensions of contact lenses. Parameters are custom characteristics of your product that are chosen by your customer.
Product personalization doesn't affect the price of a product. If you want a separate price for each parameter, use variations instead.
- Select the language of the parameter
- Select the desired form field
- Enter the name and the values of the parameter
Product parameters are displayed on the product detail page, the customer can set them before he adds the product to his shopping cart.
There is also a checkout fields module which can be used to set parameters for the checkout process.
Edit or delete a parameter
To edit or delete a parameter simply click the icon in the parameter list. Then click Save to confirm.
Setting colors
In product management, click the Advanced tab and open the Available colors section. Select one or more colors in which the product is available.
| White | Ivory | LightYellow | Yellow |
| Snow | FloralWhite | LemonChiffon | Cornsilk |
| SeaShell | LavenderBlush | PapayaWhip | BlanchedAlmond |
| MistyRose | Bisque | Moccasin | NavajoWhite |
| PeachPuff | Gold | Pink | LightPink |
| Orange | LightSalmon | Darkorange | Coral |
| HotPink | Tomato | OrangeRed | DeepPink |
| Magenta | Fuchsia | Red | OldLace |
| LightGoldenRodYellow | Linen | AntiqueWhite | Salmon |
| GhostWhite | MintCream | WhiteSmoke | Beige |
| Wheat | SandyBrown | Azure | HoneyDew |
| AliceBlue | Khaki | LightCoral | PaleGoldenRod |
| Violet | DarkSalmon | Lavender | LightCyan |
| BurlyWood | Plum | Gainsboro | Crimson |
| GoldenRod | Orchid | Thistle | PaleVioletRed |
| LightGrey | Tan | Chocolate | Peru |
| IndianRed | MediumVioletRed | Silver | DarkKhaki |
| RosyBrown | MediumOrchid | DarkGoldenRod | FireBrick |
| PowderBlue | LightSteelBlue | PaleTurquoise | GreenYellow |
| LightBlue | DarkGray | Brown | Sienna |
| YellowGreen | DarkOrchid | PaleGreen | DarkViolet |
| MediumPurple | LightGreen | DarkSeaGreen | SaddleBrown |
| DarkMagenta | DarkRed | BlueViolet | LightSkyBlue |
| SkyBlue | Gray | Olive | Purple |
| Maroon | Aquamarine | Chartreuse | LawnGreen |
| MediumSlateBlue | LightSlateGray | SlateGray | OliveDrab |
| SlateBlue | DimGray | MediumAquaMarine | CornflowerBlue |
| CadetBlue | DarkOliveGreen | Indigo | MediumTurquoise |
| DarkSlateBlue | SteelBlue | RoyalBlue | Turquoise |
| MediumSeaGreen | LimeGreen | DarkSlateGray | SeaGreen |
| ForestGreen | LightSeaGreen | DodgerBlue | MidnightBlue |
| Cyan | Aqua | SpringGreen | Lime |
| MediumSpringGreen | DarkTurquoise | DeepSkyBlue | DarkCyan |
| Teal | Green | DarkGreen | Blue |
| MediumBlue | DarkBlue | Navy | Black |
Because there is a large number of available colors, the window has scrollbars. Don't forget to scroll down.
The available colors are the 256 Web Safe Colors. If you can't find the color you want in the list, or if you want to set a different price per color, use variations or parameters to set the colors yourself.
