Dropdowns are ugly, obscuring vital information, hindering customer experience and looking woefully outdated. For any product which exists in colours swatches are arguably the biggest visual bang for your buck on a Shopify product page. Yet so many stores continue to use the default dropdown, often due to a poorly explained tutorial or because the theme they’ve chosen doesn’t include swatches by default.
This post explores three ways to display colour swatches on your Shopify product pages. The first way is free but is limited in functionality. The second way is free but requires you to edit your Shopify theme (i.e. add code) but gives you almost unlimited flexibility. The third way is paid but gives you great flexibility and is designed to make the whole process for the user as smooth as possible. By the end of the post you should have a clear idea of the best method to add colour swatches to your store and know exactly how to set them up within the next hour.
In this post
- Why swatches beat dropdowns
- Three ways to add swatches
- Method 1: Shopify native color swatches
- Method 2: Edit your theme code
- Method 3: Install a swatch app
- Comparison table
- Common issues and fixes
- Frequently asked questions
- Related reading
Why swatches beat dropdowns
Drop-downs make customers read what they might recognize in a swatch. This difference seems trivial until you watch the replay of a customer searching for “black” when no black is available. Click, scroll, click again, then they’re gone. Swatches save loops with a glance.
Swatches are easier to click on (especially on mobile with larger touch targets) and look more complete when well made (e.g. clear focus state). Swatches make hover state on product view more premium. Product options page conveys colour meaning to non-English speakers so they understand what each option represents. Swatches are consistent with other stores that you probably shop at, making your store seem less broken.
Three ways to add swatches
You have 3 good options, each of which has some costs and trade-offs regarding expense, time to setup, and versatility.
- Native Shopify swatches using metaobject taxonomy. Free. Limited customization.
- Theme code edit using Liquid. Free. Requires developer comfort.
- Swatch app from the Shopify App Store. Paid (some have free tiers). Zero code.
Method 1: Shopify native color swatches
Shipping a swatch system based on product variations organized by Color taxonomy was one of the features I was looking to get done when I started. It’s natively available in Shopify now, and for Dawn-based themes that are recent enough, it’s even enabled by default.
- Open your Shopify admin and go to Settings, then Custom data, then Metaobjects.
- Find the Color metaobject under Shopify definitions. It is preloaded.
- Open a product, scroll to the Color option, and link each option value to the matching color entry (or create a new one with a hex code).
- Go to Online Store, Customize, open the Product template, and in the variant picker block switch the style from Dropdown to Buttons or Swatches.
- Save and preview. Your swatches now render on the product page.
This native method is free and will be future proof. It’s weakness is that you can’t customize the swatches as much as you can with other methods (for example, you can’t change the shape of the swatches, add a border, omit sold out values, make two-tone swatches, or use images instead of swatches, photos). If these options are important to you, skip to method 3.
Method 2: Edit your theme code
You can if you’re going for full control and you own the theme. You can add the swatches in Liquid. The idea is to loop through the option values and for each value, map it to the corresponding hex code whether it’s a metafield, CSS class, or a config file. Then, render out a button for each that toggles the variant.
- Back up your theme (Online Store, Themes, Actions, Duplicate).
- Open snippets/product-variant-picker.liquid or the equivalent in your theme.
- Detect the color option by name (if option.name == ‘Color’).
- Render a button per value with inline background-color from a metafield or slugified color name.
- Add CSS for active state, hover, and focus. Test keyboard navigation.
By using a path you have full control over the output. But the path becomes yours to maintain when the theme updates, a new variant type is released or a page builder overrides your class selector. And if your honest with yourself, how many hours are you willing to spend maintaining a swatch preview snippet? Swatch preview allows you to test hex combinations before they ever get written into code.
Method 3: Install a swatch app
Apps handle the parts that the native system and the theme edit doesn’t handle. Custom shapes, image swatches, sold-out handling, mobile behavior and automatic color detection from product names. An app pays for itself if you sell more than twenty SKUs in multiple colors because it saves hours of theme edit time.
For product page swatches we recommend using Rubik Variant Images, which supports shapes, custom colors, images, hide sold out, and native Shopify dropdown selector. See our collection page swatches guide for help with collection swatches, which is a slightly different problem than product swatches that Rubik Combined Listings solves.
- Install the app from the Shopify App Store.
- Enable the app embed in your theme customizer.
- Pick a swatch shape and size in the app settings.
- Map color names to hex codes or upload image swatches.
- Preview a product page and publish.
Comparison table
| Factor | Native | Theme edit | App |
|---|---|---|---|
| Cost | Free | Free | Free to $75 |
| Setup time | 30 min | 2-6 hrs | 10 min |
| Custom shapes | No | Yes | Yes |
| Image swatches | No | Yes (hard) | Yes |
| Hide sold-out | Partial | Yes (hard) | Yes |
| Theme-update safe | Yes | No | Yes |
Common issues and fixes
things that break sometimes. Swatch not updating variant selected in product variant select? Theme selector is probably hidden instead of replaced, and click handler attached to wrong element. Swatches are tiny instead of small? Theme CSS is capping width of theme preview? Color swatch has wrong color? metafield hex is missing or color name does not match value in product metafield. See: color swatch accuracy fix post for full list.
_variant_image_checker_sees_if_swatches_render_and_variant_images_are_linked–use it on any product URL.
Video walkthrough
Try it on your store
Want to see the Swatches in action at a live store before you install the plugin? Rubik Demo is live at: http://rubikdemo.com/ Tutorial for creating Variant Images with Rubik: http://michaeltomany.com/blog/rubik-variant-images-tutorial Video Transcript at: http://michaeltomany.com/rubik-variant-images-tutorial Transcript Free Installation & Setup Video Docs: http://rubikvariant.com/docs
Frequently asked questions
Does Shopify support color swatches natively?
Yes. There are recently released themes that support color swatches in Dawn based themes. You can link the value of the color options to the hex code for the color and switch the variant picker to swatches in the customizer.
Do I need an app to add color swatches?
You can do this natively or in your theme for free. But there are apps because native and theme editing don’t handle a lot of common things, like image swatches for icons, handling sold-out products, and custom shapes.
Can I show a product photo as a swatch instead of a color circle?
Not Native – Native swatches require Native Swatch app. However, Image swatches require theme code edit or swatch app like Rubik Variant Images which we support.
Will swatches work on my current theme?
Any theme with a normal variant picker can have swatches. Many Dawn-based themes support swatches natively, older or heavily customized themes may need the app to embed swatches for you or a tiny code tweak. Rubik Variant Images supports 304+ themes including most popular ones.
How many variants and options does Shopify allow?
Shopify now allows up to 2048 variants per product (was 100 variants per product in 2024) and a max of 3 options per product with various option types such as size, color and material.
Do swatches hurt page speed?
Properly built ones do not. Rubik apps load from product metafields with no external API calls, so swatches render with the page itself. A poorly coded theme (especially if it’s heavy on scripts) or an app could add weight.
Can I hide sold-out colors with swatches?
Yes, with an app or a theme edit. Native swatches can make sold out values disabled but not hide them.
