For POS plan subscribers, please see Notes.
If you want to sell a product in a number of different variants (e.g. different colors or different sizes) you can use the Product Variations feature to create "Variations" and "Options". Combined, these create "Product Variants" (e.g. small-red, medium-yellow). This article will introduce how to use this feature, as well as how to create and set up Product Variations.
1. Introduction
Before we start the setup, it is important to understand the differences among Variations, Options, and Product Variants.
Variations: The system offers at most 3 types of Variations. You can select "Size", "Color", or create their own variation using the Custom option.
Options: If "Color" is selected as a variation, examples of options could be "Red", "Navy", "Florescent green", etc. For "Size", the options could be "Small", "Medium", "Large", etc.
Product Variants: Combinations of Variations and Options. For example: "Red, Large"; "Navy, Medium"; "Brown, Small" etc.
Taking suit jackets for example,
- Variation: 3 variations - Color, Size, and a custom variation Fitting
- Options: "Black" and "Brown" for Color; "S", "M", and "L" for Size; "Male" and "Female" for Fitting
- Product Variants: After combining the options from the three variations, there will be a jacket which is "Brown, S, Male".
Each product can have a maximum of three Variations. Commonly used variations include "Color", "Size", "Weight", etc. However, the total number of Product Variants you can make available in your store is limited according to your plan. For more information, please see the table below:
|
e-Commerce, Social Commerce, POS plan |
Up to 100 Product Variants
|
|
Advance Shop Management module
|
Up to 400 Product Variants
|
- New version of Product Variants: You can set a sale price, cost, and weight for each Product Variant individually and have it appear in the price area on your storefront. In addition, you can also create Variations and Option combinations tailored to a product's features for more Product Variants.
2. Step-by-step setup
Step 1. Check your plan
In the top right-hand corner of SHOPLINE Admin, go to Hello, (Your Name) > My Subscription & Billing to view the store's plans and modules.
- There are Plans and Modules under the "Paid Subscription". Please check if your store has the e-Commerce, Social Commerce, or POS plan. If you have one of these plans, please skip to Step 2. Go to the Variations tab.
- If you are using the Basic, Advanced, Premium, O2O, Enterprise, or Cross Border plan (as shown below). Please confirm whether your store is using the O2O or Enterprise plan.
- If you have a suitable plan, you may in SHOPLINE Admin go to [Apps] > [Apps Store] and install the "Increase Product Variants by 400" application.
Step 2. Go to the Variations tab
In SHOPLINE Admin, go to [Products & Categories] > [Products] and then click Edit next to a product and then go to the Variations tab.
Step 3. Enable product variation
After entering the Edit page, select. the Variations tab. The Variations feature is turned off by default. If your product comes in multiple variations, first turn the switch in the Variations toggle to YES.
*Please note: Once the Variations switch for a Product is turned on, the delivery fee for each Product Variant will be calculated according to the weight of the Variant and not the weight of the main product. The weight of the main product will not be able to be modified.
Step 4. Set Variation names
Click on Add Variation to create a new Variation. You can either choose one of the two presets ("Size" and "Color") or create your own by selecting "Custom" and filling in a name.
Enter the Option names in the box on the right, separating each with a comma.
To add a second or third Variation, click Add Variation and enter the Option names in the box on the right, separating each with a comma.
*Note:
- The Option names for the Variations cannot be the same.
- Currently, Option images of two Variations will appear under the product at the storefront.
- Creating products with 3-type variations is currently not supported on the POS APP.
When creating two Variations, adding a new Option for a Variation will result in the system automatically creating a Product Variant.
Note: If the product variant exceeds 50, the products will be cut into 50 variants per page. The pages can be flipped by clicking the page number at the bottom.
Step 5. Language settings
You can edit the Variation and Option names for different languages by clicking on Edit Variation/Option Name. In the pop-up window, you can choose to enter Option names for all languages, or in your store's default language only.
Note: You can change your store's default language by going to [Settings] > [Basic Settings].
Step 6. Quantity & price settings
- Unlimited Quantity: If the inventory for all Product Variants is unlimited, then check the [Unlimited Quantity] box to apply this to all Product Variants.
- Same price as main product: This box is checked by default. If this box is unchecked, you will be able to fill out the Price, Member Price, Special Price, Cost, and Quantity fields for each individual Product Variant.
*Bulk apply main product details to Product Variants
You can select multiple Product Variants and apply the following Main Product details in bulk: regular price, sale price, member price, cost, location ID, product SKU, and weight.
To do this, check the Product Variants you want to bulk apply details to, then select the fields you want to apply in the "Apply main product info" drop-down menu.
Step 7. Add single Product Variant
Click Add Variant to create a single Product Variant. You can use this when there is only one Product Variant (i.e. only one Variation-Option combination).
For example, if the "Wheat type" Option "Rye" is only available in "Size" Option "Large," and not in any other wheat type-size combinations, then you can create a single "Large-Rye" Product Variant.
Step 8. Changing Option/Product Variant order
You can drag and drop Options in the input field to change the order they will appear on your storefront. A ✥ symbol will appear when you place your cursor over an Option. You can use this to drag and drop Options and rearrange their order. When Options are rearranged, the Product Variant list will automatically update to reflect the changes.
Step 9. Save your settings
Remember to slide the "Publish" toggle switch to YES and click Update to save your changes.
Step 10. Check Variations on the storefront
For the product with Variations, there are three ways in which a Product Variant can be displayed, depending on the prices of the Product Variants.
i. Single-price display
When you have checked the Same price as main product box, the prices of Product Variants will be displayed as follows:
Strikethrough: Regular price
No strikethrough: Sale price
| Product Variant | Regular price | Sale price |
| Large | 100 | 90 |
| Medium | 100 | 90 |
| Small | 100 | 90 |
ii. Price range + highest price struck out
When each Product Variant has its own price, but none of these prices are the highest possible price (i.e. all of the Product Variants have a sale price):
Strikethrough: Highest Product Variant price
No strikethrough: Product Variant sale price range (lowest price–highest price).
| Product Variant | Regular price | Sale price |
| Small | 70 | 65 |
| Medium | 80 | 75 |
| Large | 95 | 90 |
3. Price range display
If each Product Variant price is different, and the highest possible price for a product is included in that range, only the price range will be displayed.
| Product Variant | Regular Price | Sale Price |
| Medium | 70 | 70 |
| Large | 100 | 100 |
3. Error messages & troubleshooting
It is recommended that you back up all Variation information before altering or refreshing any related settings.
Step 1
When the language settings for a Variation or Option are not valid or contain errors, the system will mark the offending Option and Product Variant in red (see below). Please click on Edit Variation/Option Name to identify and correct any errors.
Step 2
After clicking on Edit Variation/Option Name, the fields with errors will be marked in red, alongside an error message explaining why the information entered is not valid (e.g. two fields have the same name).
4. Notes
- This feature does not currently support bulk import of new products. Bulk import of the following product information is also not supported: Product Variant sale price, cost, and weight.
- The following fields are available to merchants with a POS plan:
- EC + POS plan: The "Sale price", "Cost", and "Weight" fields can be edited for all Product Variants in SHOPLINE Admin. This plan also supports storefront Price Range display; POS APP supports "Regular price" and "Sale price" display for Product Variants.
- POS Plan: Only the "Cost" field can be edited for each Product Variant in SHOPLINE Admin. The POS APP only supports "Sale price" display for Product Variants.
- The Display Price Range feature is turned off by default for merchants that have enabled the Custom CSS feature in [Online Store Design] to customize their storefront. This is to avoid creating syntax errors.
- If you want to use the Display Price Range feature, go to [Settings] > [Product Settings]. Find the "Be first to experience: Display Price Range in Storefront Product List Page" section and click preview mode to see how the Price Range feature will look at your storefront.
- If the storefront display does not meet your expectations, you can edit the existing code by going to [Online Store Design] > [Design] > Advanced Settings tab > Custom CSS. To preview how it will look on your storefront, set the [Be first to experience: Display Price Range in Storefront Product List] toggle switch to "Currently using".
- If the switch is set to [Currently using] but the Product's price range is still not being displayed at your storefront, please contact our Online Merchant Success Team for further assistance.
Read more
For more information on Product Variations and related settings, please visit the links below:
- Upload photos for Product Variations
- Customized Variant Selector with Image
- Customize Variant Selector with Label Swatches
- Custom CSS
Comments