How to Add Shopify Variants to Your Shopify Products

Shopify merchants can diversify their product offerings with Shopify variants.

Variants provide product variations differing from each other in terms of size, color, material, and specs, among other qualities.

An excellent example would be clothing companies selling different sizes for each unique design in their catalog—ranging from XS to XXL. Phone manufacturers may sell 64 GB, 128 GB, and 256 GB storage versions of their smartphone models. These options are called variants.

Different variants give shoppers more control over the item they’re getting, ensuring optimal satisfaction.

Depending on the nature of your product or service, you may even find these variants more necessary than optional.

Common Product Variant Options

Some of the most common product variant types include size, color, and specs.

Size

Source: Gymshark

If you stock different sizes, each size variant must be properly displayed on the corresponding page of the respective product.

Color

Source: Blendjet

You may display differently colored products individually or display colors as variants of a single product. You’ll reduce your catalog listings that way and make your selection more organized and navigable.

Specifications

Source: Plug Tech

Tech companies let customers choose and configure their desired model specs, effectively catering to a wide range of needs and budgets.

Using product variants, Plug Tech lets customers choose the condition of the laptops they'll be buying.

Considering the limitless product possibilities, variants could be pretty much anything. Not just size, color, and specs. They could be the flavor of chips, the grit of sandpaper stock, or the metal used in jewelry.

How to Add Variant on Shopify

Adding variants to your store takes on many forms. This guide will discuss the most basic and straightforward method.

This method will be sufficient for most online businesses.

Step #1: Modify the Shopify Product

From the Shopify admin, go to Products, where you can organize your items by Shopify product type.

Click on the Shopify product you want to add variants to.

Or if you haven’t created the product in Shopify’s system yet, click on Add Product and fill in the necessary details.

Step #2: Add Shopify Variants and Options

In the product’s details, scroll down to the Variants section.

You’ll see a button in this section labeled ‘+ Add options like size or color’ if you haven’t added variants yet. Click on it.

Fill in the Option name (e.g., color, size, material) and Option values (e.g., black, green, yellow).

Once you’re done, click + Add another option if you want to add more variants. Shopify merchants have a maximum of three options. This is the Shopify variant limit.

Important Note: The position of these variants matters! Especially if you have multiple variants.

You’d want to place more prominent variants, such as color, at the top. Then size.

Organize variant options from most prominent features to least prominent. (e.g., Color - Size - Cut).

This will make the shopping experience more organized and allow for more intuitive product management.

Step #3: Edit Shopify Variant Attributes

Once you’ve added the necessary options and variants, you may then edit their respective values and attributes.

Some of the things you may edit for each variant include:

• Image
• Price
• Warehouse details
• SKU
• Weight
• Shopify metafields

You’d want to start by adding images.

Click on the blue add image icon, shown with an image icon with a plus. This lets you add an image for the variant you’re editing.

For example, for the ‘Brown’ variant, you’d want to have an image of the clothing item’s brown option.

Remember to hit Save after you're done adding variants and their featured images. This will finalize your added variants and add them to Shopify's product management.

To edit the variant further, click on the label of the exact variant you want to edit.

You’ll see a dropdown if you have more than one variant option.

Once you click on the exact variant (e.g., Black/XL, Yellow/S, Blue/M) you may change each variant’s price, SKU, inventory location, and add a unique image for each if needed.

Pro tip: You may edit variants in bulk.

For example, you want to make all brown variants $22 instead of $20. To do this, you don’t have to individually select and edit Brown/XS, Brown/S, Brown/M, and so on. Instead, just click on the checkbox for the umbrella variant and click ‘Bulk Edit.’

Here, you may edit variant values as you would a spreadsheet.

Click Save when you're done.

At this point, you should have already added and edited all variants. Go over them again and make sure that all their corresponding details are correct before saving.

Great! Your product variants are now added to Shopify. Do this for every Shopify product you want to add variants to.

How to Display Shopify Variants

After adding your product variants to Shopify’s system, you’ll have to display them on your Shopify website.

By default, it should look like this.

But there are ways to spice up this standard, default look.

Add Unique Photos to Each Variant

As mentioned earlier, merchants can add photos for each variant they add to Shopify’s system.

But if you want to improve buyer confidence and push variant sales, these photos are mandatory.

You can’t just put a “Red” variant and expect buyers to properly visualize a red version of the black shirt currently on their screens.

Also, people will imagine “Red” differently. Some may think of a bright maroon, while others may think of a dark pink. But what if the actual item is a different shade of red?

Adding a photo will eliminate any confusion and help set buyer expectations.

It may also reduce return and refund requests to your store.

Just note, though, that using the Shopify admin, you can only add one photo per variant. So make this photo as exact to the actual item as possible.

Use Color Variant Swatches

It helps to have variant-centered features, such as color variant swatches.

This can make a product page more engaging and premium-feeling.

You may also display variant swatches on the catalog and Shopify collections.

That way, customers know what variants are available at a glance instead of having to visit each product page.

Two main ways to apply color variant swatches to your Shopify site include using Shopify themes and Shopify apps. You may also edit your theme’s code for more custom adjustments.

Use Shopify Themes with Variant Features

By choosing the right Shopify theme, you can equip your store with variant features that make your site feel more premium and authoritative.

Though Prestige is one of the most popular Shopify themes, themes such as Electro, Shine, and Eurus are much more affordable yet packed to the brim with functionality.

We’ll be using Electro for this guide.

Electro’s default configuration recognizes color variant options and displays them as color swatches accordingly. So you don’t need to set anything up after installation.

When using Electro, all products with variants will have variant swatches on their product page and underneath their product card on the catalog page.

You can also display the variants’ featured images on the swatches.

To do that, click on Theme Settings. This is shown as the gear icon on the left.

Then select the Product Information dropdown.

Type in the Variant option box the variant option (e.g., color, size, etc.) you wish to show as swatches. We highly suggest placing ‘Color’ or ‘Style’ in here, as opposed to something like ‘Size.’

Then choose Variant Image.

The swatches should now contain images instead of solid colors.

To maximize Electro’s variant swatches, ensure every variant has a corresponding featured image. You can set this option in Shopify admin - Products.

Note that Electro is a paid theme. If you wish to stick to free themes, such as Dawn, but still want to have color swatches and other variant-centered features, you may turn to Shopify apps for help.

Use Shopify Apps

There are various apps in the Shopify store that can add color swatches to your product page. Simply search for ‘color swatch’ in the Shopify app store and you’ll see loads of options.

For this guide, we’ll be demonstrating using the GLO Color Swatch app.

First, install the GLO Color Swatch from the Shopify App Store.

From the App Embed dropdown, select the theme you wish to add color variants to. Then click ‘Go to theme editor.’

Once you’re in the Shopify theme editor, the GLO Color Swatch embed will be ticked on. So make sure that the previewed product has variants. Otherwise, you wouldn’t see the change.

Without leaving the theme editor, open a new tab and open the GLO Color Swatch app.

Click on the cross wrench and pencil icon corresponding to the variant option you wish to edit.

Select a box from the Color 1 column and choose a color that you want to attribute to the corresponding variant.

To give the swatch more depth and accent, you may enable Color 2 and choose a supplementing color.

Once you’re done, click Save then preview your changes on the Shopify theme editor.

Note that different apps and pricing plans will allow for different features.

[you may embed PageFly video here]

PageFly, for example, lets you add color swatches when you create custom pages via its intuitive drag-and-drop builder.

The page builder also lets merchants have different variant selector types (e.g., dropdown, image swatch, radio buttons) on a single product page. More regarding selection formats will be discussed later in this guide.

So explore your options with different apps.

Add Variant Swatches to the Catalog Page

Having swatches in catalog pages, collection pages, featured product sections, and featured collection sections lets site visitors know that a particular product has different colors and styles, even before clicking on the product and visiting its product page.

When you use Electro or any other theme that supports color swatches, your Shopify products that have variants will automatically have these swatches under their cards.

GLO’s Silver Plan lets you display swatches on catalog and collection pages. You may edit the catalog page swatches separately from the product page swatches as well.

To edit the product page swatches, open the GLO Color Swatch app.

Click on Appearance.

Select Swatch.

Click the On collection page tab and tinker around with the settings until you have your desired color swatch style.

Once you’re done, hit Save.

If everything goes smoothly, your catalog page’s swatches should be updated with the style you want. If not, you may need to update the theme, the app, or contact the app’s support team.

Include Other Variant Selection Formats

There's more than one option when it comes to variant selection formats. These may include:

• Radio box
• Multiple-selection
• Dropdown

A dropdown can be an additional way of gathering variant data from the order. This can break the monotony of using radio boxes for all your product pages. Also, they have their advantages and disadvantages against radio buttons.

How to Add Additional Variant Selection Formats

You may add different variant selection options using Shopify themes and apps.

We’ll use Electro for this guide.

In the Shopify Theme Editor, click on the page template dropdown. It’s labeled ‘Home page.’

Click on ‘Products’ then select a template. Choose a template used by a Shopify product that has templates.

Underneath the Product details section, click on the Variant selector block.

Choose between a button or a dropdown selector type.

Click ‘Save.’

This will turn your non-swatch product options into drop-down selector types.

Use PageFly to Set Up Your Product Variants’ Selector Types

PageFly lets merchants place different variant selector formats on the same product page. So, using PageFly, a product page may have a color swatch, an image swatch, radio buttons, and a dropdown, among other selector types.

• Go to the Extra Functions section of PageFly.
• Click on Manage next to Option Swatches.
• Select a Variant Option.
• Then click on the display type dropdown and choose your desired selector type. Do this for each variant option.
• Hit Save to apply changes.

This will immediately apply your selector format changes to your custom PageFly page.

But if you haven’t created a custom PageFly product page yet, you may do so through the Pages section of the PageFly app.

Dropdowns can be a handy tool for displaying many options underneath a specific option type.

Knowing when to use radio buttons and drop-down menus will help highlight all the products' variants from your store.

Conclusion

Implementing variants, such as different color options, can make individual products more appealing. Customers each have their own specific needs and tastes, so having these options can bring more customer-centric service.

Additionally, you may place different prices for your various product variants, effectively leveraging price psychology. A product with variants will also accumulate a longer browse time compared to the same product without variants.

But you can't add variants for any one product if you don't stock the variants in the first place. So expand your offering and look into diversifying your catalog now.