How to add color swatches to Shopify Horizon theme

April 14, 2026
Variant Images
8 min read
How to add color swatches to Shopify Horizon theme

Horizon is one of the Shopify themes with built-in color swatch support, and is the first theme to support swatches without requiring an upgrade to an earlier theme (Dawn required version 14.0 for swatches, and Sense has no native swatches). While having a variant picker that can render these options as swatches is “out of the box,” what’s out of the box isn’t necessarily what you need. The default swatch configuration is a far cry from optimal for most stores, primarily because Shopify doesn’t support custom colors auto-detecting, and there is no native support for image swatches. And while there are some styling options, they mostly revolve around the color, and don’t have the same breadth or depth as what we’ve become accustomed to with other theme swatches.

This guide covers all the aspects of enabling native swatches, fixing the color detection issue, adding image swatches for pattern and texture and using the Rubik Variant Images to get other features that are not available in the Horizon theme.

In this post

Enabling native swatches on Horizon

Horizon comes with 3 different variants for viewing theme colors. It can render the picker in dropdown mode, in a series of “pills”, or as swatches. To view the swatches instead of the pills, add the class of ‘swatches’ to the variant wrapper:

  1. Go to Online Store > Themes > Customize
  2. Navigate to a product page
  3. Click on the Product information section
  4. Find the Variant picker setting
  5. Set the color option to display as “Color swatches”
  6. Keep size and other options as “Buttons” or “Dropdown”

With this option enabled, Horizon will automatically detect for standard CSS color names. So, if you have option values like “Red”, “Blue”, “Black”, “White”, the corresponding swatches will render in the correct colors. ~150 standard CSS color names are detected and supported within Horizon.

Using a side by side layout where an image gallery is to the left of product details means swatches live naturally in the details column next to the title, price and size.

Fixing custom color names

Horizon swatch display incorrectly lists custom color names as grey placeholders. In our copy, we used three custom color names (“Dusty Rose”, “Midnight Noir”, “Heathered Sage”) which appear as three grey circles instead of their actual colors.

Two fixes:

Option 1: Color metafields

This app can read color values from variant metafields. To do it manually, go to Settings > Custom data > Variants. There you can add a metafield with type “Color” and add the exact hex value for each variant. Horizon will pick it up. This is a really easy and clean solution for stores with lots of custom colors.

Option 2: CSS overrides

Add custom CSS in Customize > Custom CSS (scroll to bottom):

/* Custom Horizon swatch colors */
.swatch-input__label[data-value="Dusty Rose"] { background-color: #DCAE96; }
.swatch-input__label[data-value="Midnight Noir"] { background-color: #1a1a2e; }
.swatch-input__label[data-value="Heathered Sage"] { background-color: #9CAF88; }
.swatch-input__label[data-value="Champagne"] { background-color: #F7E7CE; }
.swatch-input__label[data-value="Espresso"] { background-color: #3C1414; }

The selector .swatch-input__label is Horizon-specific. The data-value must match the exact option value (case-sensitive). This works but requires a new CSS rule for every custom color name. Manageable for 10 colors, tedious for 50.

Adding image swatches for patterns and textures

At Horizon you can only create native swatches with flat colors. But as a retailer with products with textures or patterns (such as plaid, or marble, or brushed metal, or wood) you need images as swatch elements instead of flat color circles.

Horizontal images have to be posted in swatches in a non native way. Background image in CSS can be used as a workaround by swatch value. Swatches are not scalable for complex patterns. Upload images to swatch values and reference in Shopify Files and CSS.

For displaying images of Rubik Variant on the Horizon website, Rubik Variant Images adds image swatches through a visual editor. Upload a texture crop, assign it to the option value, done. No CSS needed. Works alongside Horizon’s native layout.

Customizing swatch size, shape, and borders

These colors come pre-loaded into Horizon as rounded squares about 32px in size, but you can change the swatches to fit your brand or enhance usability.

/* Horizon swatch customization */

/* Make swatches larger */
.swatch-input__label {
  width: 40px;
  height: 40px;
  min-width: 40px;
}

/* Circle swatches instead of rounded squares */
.swatch-input__label {
  border-radius: 50%;
}

/* Custom selected state */
.swatch-input:checked + .swatch-input__label {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
  border-color: transparent;
}

/* Hover effect */
.swatch-input__label:hover {
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

/* White swatch visibility */
.swatch-input__label[data-value="White"] {
  border: 1.5px solid #ddd;
}

Add to Customize > Custom CSS These CSS Selectors are Horizon Specific. Instead of doing custom CSS for variant images, you may want to check out the Rubik Variant Images addon which offers 100+ Swatch Styling Variables inside of its own settings panel. Most styles inside of that addon match the style of the Horizon theme. You can customize the border, size, shape and much more.

Using Rubik Variant Images on Horizon

Rubik Variant Images replaces Horizon’s native variant picker with its own swatch system. What you gain over native Horizon swatches:

  • Image swatches (product photo crops as swatches)
  • Automatic color detection from variant names (no manual hex mapping)
  • Mixed swatch types per option (colors for Color, pills for Size)
  • Color name tooltips on hover
  • Sold-out variant handling (hide, grey out, or strikethrough)
  • Gallery filtering (show only selected variant’s images)
  • 100+ CSS variables for styling through a visual editor

Setup: The 5 minute Setup on Setup on Rubik Variant Images 1.0 – Setup on Horizon. This is less than 2 minutes per language. It will take you step by step through the process. If you follow it, you will have it set up in no time. All you have to do is install the app, go to Customize -> Product information -> Product View and add the app block there. You also need to disable native swatches in order to avoid having duplicate pickers.

We have 4 dedicated Horizon + Rubik Variant Images video tutorials, covering different aspects of setup.

Rubik Variant Images swatch customization on Horizon theme

Swatches in Horizon are extremely powerful, especially with the variant images filtering enabled. Swatches are displayed on the product to the right of the image (as shown to the left above). Without filtering, when you click on a color swatch, the main image updates, but the thumbnails on the left of the above gallery still display all the colors. With Rubik Variant Images filtering enabled, clicking on “Blue” updates the images so you now see all views of the “Blue” product.

Using accurate swatches in the color picker and a filtered gallery helps to reduce wrong color returns. This allows customers to have accurate expectations of what the finished product will look like based off the visuals on the site.

For stores where color is a different product, it includes color swatches that link between grouped products on the collection and product pages. See the Horizon + Combined Listings guide for details on how to set this up.

“I use Rubik Combined Listings Along with Rubik Swatch. I went through, no exaggerating, 50 apps before I found what I needed. Theses guys are the real deal, and they will jump on chat and fix your problems ASAP. Definately reccomend.”

Parks Nerd, US, 2026-03-18, Rubik Combined Listings on the Shopify App Store

See the live demo store, watch the Horizon setup video, read the getting started guide.

Try Rubik Variant Images free
Try Rubik Combined Listings free

Frequently asked questions

Does the Horizon theme have built-in color swatches?

Yes. Color swatches can be added to the product variant picker using the Horizon theme. It automatically recognizes standard CSS defined colors, but Horizon recognizes custom defined colors by their name as long as that name exists in a metafield as a metafield color value, or as an inline CSS rule in the theme. For example, the color “Dusty Rose” would be recognized by both of these methods.

Why are my Horizon swatches showing as grey?

Your color option values use custom names that Horizon cannot auto-detect (not standard CSS colors). Fix with a Color metafield per variant or add CSS rules mapping each custom name to its hex value.

Can I use image swatches on Horizon?

Not yet available in native form as Horizon only supports solid color swatches at this time. For image swatches (product photo crops for patterns and textures), use 3D – Rubik Variant Images which adds image swatch support to the product variations dialog but using a visual interface for easier use.

Should I disable Horizon native swatches when using Rubik?

Yes, both apps run at the same time and create duplicate pickers for variant swatches. I disable swatches in the native Horizon theme by setting the variant picker back to “Buttons” or “Dropdown”.

Does gallery filtering work with Horizon’s side-by-side layout?

Yes. Rubik Variant Images filters the whole gallery on the Horizon side-by-side layout, filtering the main image as well as the thumbnail strip. Selecting a colour will update both the main image and the thumbnail navigation to show only the photos of that colour variant.

You may also like