24 Jun 2025 12.00 AM I 14 Views
Are there any color options available in variants?
- This Article is for stores running on Solo plan or higher
Yes, Commmerce allows you to add color options as part of product variants.
When creating or editing a product, you can define variants based on attributes such as color, size, material, etc. This enables customers to view and select their preferred color directly from the product page.
Step 1. Log in to your Commmerce’s Admin Panel by entering the
Registered mail ID and Password. To log in
click here
Step 2. After successfully
creating the category, you can either click on Dashboard on the left side of the admin panel and then click on the
Add Product option
(as shown in “1”) or navigate to the
'Products' section located under 'Catalog' in the dashboard (as shown in “2”).
Step 3. Click the "Add Product" button on the right side (as shown in “3”).
Step 4. Once you enter the Products page, update all the necessary details and navigate to the Variants section. Then, click on 'Add Variants' to proceed.
Step 5. While creating a variant, you will have the option to change variant display mode under the 'Option Name' section.
Step 6. A pop-up will appear where you can choose the variant display mode based on your preference, such as
Tabs with Color Swatches or
Drop Down with Color Swatches.
Here are the available Display Mode options:
- Tabs – Shows variant options as clickable tabs.
- Drop Down – Presents options in a drop-down menu.
- Tabs With Images – Each tab shows an image for visual representation.
- Drop Down With Images – Combines dropdown functionality with preview images.
- Tabs With Color Swatches – Shows color options as swatches in tab format.
- Drop Down With Color Swatches – Displays swatches inside a drop-down format.
Step 7. Once you select the preferred color swatch display mode, you’ll be given the option to choose the specific colors you want to display on your website’s frontend.
Step 8. Once you've updated your details, click the Save button at the top right corner to apply the changes.
