For POS plan subscribers, please see Notes.
If you want to sell a product in a number of different variants (e.g. the combination of different colors and 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 system |
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 system. 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 switched off by default. If your product comes in multiple variants, first switch on the toggle for the "Variations" feature.
*Note: Once the "Variations" toggle for a Product is switched 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.
*Notes:
- The Option names for the Variations cannot be duplicated.
- Currently, Option images of two Variations will appear under the product at the storefront.
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 variants exceed 50 in quantity, 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
-
Same price as main product: This option is checked by default. If this option is unchecked, you will be able to fill out the Price, Sale Price, Retail Store Price, [Coming Soon] Store-Specific Price, Member Price, Membership Tier Price, Cost, and Quantity fields for each individual Product Variant.
- Retail Store Price only supports merchants using both e-Commerce + Retail POS systems.
- [Coming Soon] Store-Specific Price only supports merchants using the "e-Commerce+Retail POS/ Social Commerce+Retail POS/ e-Commerce+Social Commerce+Retail POS" systems, and merchants must switch on the "Set store-specific prices for products" toggle in the SHOPLINE Admin. For more information, please refer to [Coming Soon] Store-Specific Price｜POS Admin.
- Unlimited Quantity: If the inventory for all product variants is unlimited, then check the "Unlimited Quantity" option to apply this to all product variants.
*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
The display order of Options on the storefront follows the sorting order in the Admin.
To adjust the order of the Options on the Storefront, place your cursor over an Option and a ✥ symbol will appear. Then, 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 switch on the "Publish" toggle 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
- The Display Price Range feature is switched off by default for merchants that have enabled the Custom CSS feature in the "Online Store Design" page 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