How to Add Variants in Shopify like a Pro: Step-by-step Guide


how to use variants in shopify

Table Of Contents

Navigating the digital landscape of e-commerce can often seem daunting, especially when it comes to providing a personalized shopping experience for each customer. Enter Shopify Variants, a powerful tool that allows sellers to offer different versions of the same product based on aspects like size, color, and material. This capability not only enhances your product catalog but also significantly improves your customer's shopping experience.

In this guide, we'll demystify the concept of Shopify Variants, delve into their importance for your online store, and offer a comprehensive step-by-step tutorial on how to use Variants effectively. Before going into the details, make sure you have built an eCommerce store on Shopify!

What are Shopify Variants?

How to use variants in shopify

The essence of successful e-commerce is understanding and meeting the diverse preferences of consumers. One key way to achieve this is through the use of product variants, which offer customers a variety of options for a single product type. Shopify Variants provide the functionality to accomplish this within your online store.

A variant can be any attribute that distinguishes products within the same group, such as size, color, material, or other specific features. For example, a single style of dress might be available in multiple sizes, colors, and patterns, each of which is considered a variant. Likewise, a gadget could have variations in features and specifications.

Why Should You Add Variant to Your Shopify Store?

How to use variants in shopify

In the bustling e-commerce space, standing out is crucial. Adding templates to your Shopify store not only increases the appeal of your products but also enhances the overall shopping experience for your customers. Here's a closer look at why it's important to incorporate variations into your online store:

Increase Product Value

Imagine offering your customers a buffet instead of a set meal. By presenting an array of variants for your products, you allow shoppers to tailor their choices to their unique needs, thereby enhancing the perceived value of your items. Let's consider a clothing store as an instance. By introducing variant options such as size, color, and style, you offer your customers a wider palette to choose from, aiding them in finding that perfect outfit.

Improve Customer Experience

In today's consumer-centric market, a personalized shopping experience is no longer a luxury; it's a necessity. By providing multiple options and variants, you amplify customer satisfaction, which can lead to greater loyalty and repeat business. When customers can tweak their purchases to meet their specific preferences, they feel more connected to your brand and products.

Better Inventory Management

With variants, your inventory management process can also become more efficient and cost-effective. By analyzing which variants are more popular, you can adjust your inventory levels accordingly, avoiding stockouts and overstocks. Taking the example of a handcrafted jewelry store, tracking the popular color, material, and design variants helps ensure you have the necessary materials to create your top-selling products.

How to Add Variants on Shopify?

Step 1: Sign up for your Shopify account 

- If you don't already own a Shopify store, you need to sign up for Shopify (free)

- Log in to your online store using your registered email and password.

Step 2: Edit products

- In your Shopify admin page, select Products. You can either Add a new product or edit your already existing ones.

How to use variants in shopify

Step 3: Edit variants

- Scroll down to the end to find the Variants window and click on the text that says Add options like size and colors.

How to use variants in shopify

- Next, you can choose between Size, Color, Material, and Style options and add the further details of the variants.

- Enter the Option Name and the Option Value that matches it.

How to use variants in shopify

If your variants differ in more than one way, then click Add another option. You can have up to 3 options for each product.

Step 4: Check the variants before going live

By clicking on Preview button, you can preview your online store and see your product variants on your store.

How to use variants in shopify

Step 5: Save 

When you are completely satisfied with your edit, click the Save button in the right corner of the edit screen and your variants will display similar to the image below.

How to use variants in shopify

Customize Variants using EComposer - Shopify Page Builder

While Shopify’s default settings allow you to create variants, they might not always meet your aesthetic expectations. The presentation of these variants is crucial, as it directly impacts your customers' shopping experience. Simply put, the more visually appealing and convenient your variants are, the more likely they are to attract customers.  

How to use variants in shopify

To help you alleviate this headache, we present you EComposer - Shopify page builder. This is the top page builder in Shopify platform. EComposer allows you to build any page type in your website such as Landing Pages, Product Pages, Home Pages, Collections, Blogs, and so on. Moreover, you can freely customize various templates without coding requirements. All you need to do is just drag and drop the elements in the desired location. 

When using EComposer, you have the control to customize the look and function of your variations, making your online store more appealing and thus enhancing the overall customer experience. In these sections, we'll walk you through the process of using EComposer to customize your Shopify Variants like a pro.

Step 1: Install and open EComposer 

- In the Shopify App Store, search EComposer Landing Page Builder then click Add App

- To activate the use of the app, Install the app to your Shopify store.

How to use variants in shopify

- In the Dashboard menu, go to Apps, click EComposer Landing Page Builder.

How to use variants in shopify

Step 2: Add Shopify Variants 

- Click Start Building in the right corner of the dashboard and select Product page.

How to use variants in shopify

- Choose any EComposer template you want or click Blank Template. Then, go to Set up page info and select Start Building.

How to use variants in shopify

- In EComposer's editor, go to Elements, select Single Product, and look for Variants.

How to use variants in shopify

Step 3: Customize your variants 

Now use EComposer's live drag and drop to drag the Variants anywhere you want. Then start customizing Shopify Variants to your liking.

* Content: 

- Picker Type: Pick a type that you wanna use for the Variant here. We have total of 4 types for you to choose: Dropdown, Image picker, Color picker, Radio button.

- Set your color Here: You can install the Custom swatch colors extension and configure the Variant color. Click “Here” link to explore more.

- Option show as swatch: Insert the option name that you wanna show as swatch here. Example: Color. And please keep in mind that this is the Variant name that you configure for your Products in the Shopify backend.

- Other options as: Choose the type for other variants here. You can show those variant options in Dropdown type or Radio type.

How to use variants in shopify

* Design:

- General: 

+ Alignment: Allow you to align the Variant Picker element here. You can choose Align Left, Align Right or Align Center. This option is available for desktop, tablet, and mobile devices.

+ Background: Configure the background color for the Variant Picker element here.

+ Box Shadow: Allow you to add a shadow for the Variant Picker element by changing the Blur, Horizontal, Vertical, etc…

+ Border: Choose border style for the Variant Picker element here. You also can choose None style to disable the border.

+ Border Radius: Allow you to configure the border radius for the Variant Picker element, available for desktop, tablet, and mobile devices, available for desktop, tablet, and mobile devices.

- Variant Name, Variant Value, Color Picker, Dropdown: These all have settings like Typography, Text Color, Text Shadow and Spacing and more. 

How to use variants in shopify

* Advanced: 

You can customize everything related to visible settings like background, animation, and so on.

How to use variants in shopify

Step 4: Save and Publish

Once you are satisfied with your customization, in the right corner of the edit page you have options to save and publish.

How to use variants in shopify

Here is the result: 

How to use variants in shopify


1. How Do I Find the Variant ID for a Product on Shopify?

To find the variant ID for a product on Shopify, you'll need to follow these steps:

- Step 1: Start by logging into your Shopify admin dashboard.

- Step 2: Proceed to the "Products" section, which houses all your listed items.

- Step 3: Choose the specific product for which you wish to find the variant ID.

- Step 4: Scroll down to the section titled "Variants."

- Step 6: Select the "Edit" option next to the variant you're interested in.

The URL of the edit page will now be displayed. At the end of this URL, you'll notice a numerical value - that's your variant ID. So, the variant ID for a Shopify product is essentially the number found at the end of the URL on the variant's edit page.

2. Can I Add More than 100 Variants to a Single Product on Shopify?

While Shopify's default settings allow a maximum of 100 variants for a single product, there are ways to surpass this limit. However, this requires creating separate products with different options, and then using a Shopify app or custom code to interlink these products. Effectively, these interconnected products can be treated as one product with more than 100 variants. So, yes, it is possible to exceed the 100-variant limit on a single product in Shopify, but it requires additional steps and resources.

4. How Can I Hide or Remove Sold-Out Variants From My Shopify Store?

If you want to conceal or eliminate variants of your products that are out of stock, you have a couple of options available. You could use a Shopify app, many of which have built-in features to automatically mask variants that have sold out, or ones that let you establish specific parameters for hiding them. Alternatively, you can delve into your Shopify theme's Liquid code and alter it to prevent sold-out variants from being displayed or chosen by your shoppers. Before making any changes to your theme's code, it's crucial to create a backup to safeguard your original settings.

In a nutshell

In wrapping up our guide on mastering Shopify Variants, it's evident that the strategic use of variants can enhance your product catalog and significantly enrich your customers' shopping experience. Each variant, whether distinguished by size, color, material, or other attributes, adds to your product's appeal, bolsters customer satisfaction, and optimizes your inventory management.

Moreover, it's crucial to consider the visual appeal and ease of use of your store. By presenting your variants in an attractive and user-friendly manner, your online store can make a powerful impression. If you want more information or want to learn more about EComposer, follow us at or click on the message icon located in the right corner of the screen.


Add EComposer Next generation page builder Here

Follow Us on Facebook

Join Official Community