Shopify Variants: The Complete Guide

What a Shopify variant actually is

A variant is one version of a product. One t-shirt, sold in Small Black and Large White, is one product with several variants.

Each variant carries its own price, SKU, barcode, weight and stock count. That is the whole idea. You do not create a separate product for every size.

You build variants from options. Options are the choices, like Size and Color. The values are Small, Medium, Black, White. Shopify multiplies your options together to make the variants.

Three options with five values each gives you 125 variants. That multiplication is where most variant problems begin.

I have answered a lot of variant questions on the Shopify Community. The same ones come back constantly. This page is the map: what variants are, where the limits sit, and where each specific fix lives.

The limits you need to know

Shopify caps variants at 2,048 per product, across a maximum of 3 options.

That 2,048 number is recent. The old cap was 100, and most articles you will find still say 100. If you hit a limit that does not match what you read somewhere, this is usually why.

Three options is the harder cap in practice. If you sell something configurable, three is not many. Size, colour and material uses all three, and then you have nothing left for engraving or length.

I wrote up the full picture, including what to do when three options is not enough: Shopify Variant Limit: 2,048 Variants and 3 Options.

Showing variants on the product page

This is where most of the work is. The variant data is fine; it is the picker that misbehaves.

Images that follow the variant

The single most common request. A customer picks Blue, and the gallery should show the blue one.

Start here if you are setting it up from scratch: How to Add Variant Images in Shopify So Photos Switch. It covers assigning an image to a variant and what Shopify does when you do not.

If images are assigned but the switching behaves oddly, Shopify Variant Image Switching: Show One Image Per Variant deals with showing exactly one image per selection.

And when the wrong photo loads first, the cause is usually image order rather than the variant setup. That one is unpacked in Shopify Product Variant Image Switching, Explained.

Colour swatches

Text buttons that say "Midnight Navy" tell a shopper nothing. Swatches do.

You do not need an app for this. Shopify's own metaobjects handle swatches natively now: How to Add Color Swatches in Shopify Without an App.

The picker itself

Small picker problems cost real conversions, and each one has its own fix.

• Too many buttons crowding the page? Switch the control: Show Shopify Variants as a Dropdown, Not Buttons.
• Colours appearing in no sensible order? Shopify sorts by creation order, not alphabetically: Fix Shopify Variant Colors in Random Order.
• Want them alphabetical instead? Sort Shopify Variant Options Alphabetically.
• Shopify pre-selects the first variant, which can make a shopper buy a size they never chose. To force a real choice: Remove the Default Variant Selection in Shopify.
• If the option label is too faint next to its values: Bold the Variant Option Name in a Shopify Theme.

Hiding variants

Three different jobs get called "hiding a variant". They need three different fixes, so it is worth knowing which one you have.

The variant is sold out. You want it gone from the picker until stock returns. That is How to Hide Out of Stock Variants in Shopify.

The combination never existed. You sell Small in Black but never in White, so White plus Small should not be selectable at all. Nothing is out of stock here; the combination was simply never created. That is Hide Unavailable Variants in a Shopify Dropdown.

There is a catch in that second one. The obvious one-line fix breaks the picker on some themes. The post documents the failure and the version that works.

You want to suspend it. The variant is in stock, you just do not want to sell it right now, and deleting it would lose the SKU and its history. That is How to Hide a Variant in Shopify Without Deleting It.

Variants outside the product page

Variants do not only live on the product page.

By default a collection page shows one card per product. If your colours are the reason people buy, that hides your whole range. How to Show Shopify Variants as Separate Products covers showing each variant as its own card.

If your options depend on each other, so that choosing Leather changes which colours are valid, Shopify has no native rule for that. The workarounds are in Shopify Dependent (Conditional) Product Options.

Theme-specific problems

Variant rendering is theme code, so the same request needs a different answer on each theme. Horizon in particular rebuilt how the media gallery works, and older fixes copied from blog posts often do nothing on it.

• Horizon: Show Only the Selected Variant's Images is the Horizon version of the image-filtering job, written for a gallery that re-renders itself.
• Shopify Craft Theme: Sync Thumbnails to the Variant Picker fixes Craft, where clicking a thumbnail does not update the selected variant.
• Shopify Quick Add Button Broken on Out-of-Stock Variants is a verified one-line fix for a real Quick Add bug.

When there are simply too many

Past a certain count, nothing is broken and the page is still unusable. Forty size buttons stack into a wall, and the Add to Cart button ends up below the fold.

That is a layout problem, not a variant problem, and it is handled in Shopify Too Many Variants? Fix the Tall Product Page.

What to check when a variant fix does not work

Most of the time the fix is fine and something upstream is not. Work through these first.

Check your theme. Nearly every variant fix is theme code. A snippet written for Dawn will not work on Horizon, because Horizon renders the picker with web components. Find your theme name under Online Store, then use the guide written for it.

Check whether the variant exists. Hiding an out-of-stock variant and hiding a combination that was never created are different jobs. Applying the wrong one looks like a broken fix.

Check the option, not the variant. Sorting and naming problems usually live on the option (Color), not on the individual variants. Editing variants when the option is the issue changes nothing.

Check for a second app. If a variant app is already rewriting the picker, your theme edit and the app will fight. Turn the app off and retest before assuming your code is wrong.

Check on a duplicate theme. Always. Duplicate the live theme, make the change on the copy, preview it, and publish only when it works. Every fix linked from this page assumes you are working on a copy.

Terms people mix up

Product vs variant. The product is the t-shirt. The variant is Small Black. Stock, price and SKU live on the variant.

Option vs variant. The option is Size. The variant is the actual combination Shopify builds from all your options. You edit options to change the choices, and variants to change price or stock.

Unavailable vs out of stock. Out of stock means the variant exists and has zero inventory. Unavailable means the combination was never created. Shopify treats them differently and so should your fix.

Hidden vs deleted. Deleting a variant loses its SKU, its inventory history and any orders reporting tied to it. Hiding keeps all of that. If you might sell it again, hide it.

Variant image vs product image. Every image belongs to the product. Assigning one to a variant only tells the theme which to show first. That is why unassigned images still appear in the gallery.

Do you need an app for this?

Often not, and it is worth checking before you install anything.

Shopify has moved a lot of variant work into the platform itself. Colour swatches are native through metaobjects now. Image-per-variant is native. Sorting and hiding are usually a few lines in the theme.

Every fix linked from this page is a theme edit or a setting. None of them needs a paid app.

An app earns its place when you need something Shopify genuinely cannot do. Real examples: more than three options, per-variant rules that change which options are valid, or a picker rebuilt around inventory in real time. That is a different class of problem from "my swatches are in the wrong order".

The order I would work in is simple. Check whether Shopify does it natively. If not, try the theme edit. Only then look at an app, and read its reviews for your specific theme before installing, because variant apps that rewrite the picker are the ones most likely to break on a theme update.

One more thing worth saying plainly. Install one variant app at a time. Two apps both rewriting the same picker is the single most common cause of a variant page that worked yesterday and does not today.

Where to start

If you are setting variants up for the first time, read the variant limit page before you build your options. Choosing badly at the start is the expensive mistake, because restructuring options later means recreating variants and losing their history.

If something is already broken, find the job above that matches yours and go straight to it. Each one was answered for a real merchant on the Shopify Community and reproduced on a test store before it was written down.