A swatch is small. A swatch does a lot of work, communicating to the shopper that an object exists in a certain hue before they’ve read a word of copy. Getting a swatch wrong can make a brand look inexpensive, whereas getting it right can make a collection page feel full of life and vitality.
A merchant in Porto messaged me last week. She has a boutique with hand-dyed scarves that come in 14 colors each. She was using plain text dropdowns but conversion had flatlined. I installed the Combined Listings widget in about 30 seconds. Toggling on the Magic Fill feature magically generated swatches within that timeframe. Within a week Add to cart increased by 19% and it’s the same products and copy with improved swatches.
This post indexes to the full tour, and then continues on themes of all the swatch types it can render, all the presets it comes with, all the customisation you can do, and picks a theme for it all.
In this post
- The 5 swatch types
- Magic Fill AI hex matching
- 19 built-in presets
- 70+ CSS variables
- Picking the right type for your store
- FAQ
The 5 swatch types
1. Solid color
A single hex code displayed inside a circle or square. For the majority of retailers, this is all they need. For example, the red shirt would be listed as #B31212 and the navy shirt would be #0B1D3A.
2. Two-color split
Two hex codes, four split directions:
- Vertical (left/right halves)
- Horizontal (top/bottom halves)
- Diagonal left (top-left to bottom-right)
- Diagonal right (top-right to bottom-left)
For products with additional visible details – such as the soles of sneakers, the handles of tote bags, the bases of mugs. We covered products with multiple visible colors on two-color swatches.
3. Image swatch (from product media)
Uses the product image as the swatch. This option is good for products with patterns, prints, textures, marble, wood grain, etc. Anything that the solid hexes can’t represent well. Since we are using the thumbnail we don’t need a separate swatch image. Rubik will automatically pull the thumbnail from Shopify for you.
4. Uploaded custom swatch
Upload your own image or SVG to use as the swatch. Great for brand-specific textures, custom fabric patterns, or sponsored prints. The image is stored as a metafield and doesn’t count against your Shopify file storage.
5. Auto mode
Rubik; if (/* clean solid color? */) solid; else if (/* “white/navy” etc. in $product_name? */) split; else image; // lazy-mode default for mixed catalogs.
Magic Fill AI hex matching
Selecting hex values for 200 products is very boring. Selecting hex values for 200 products is very boring. From personal experience, I can say that doing this for one client took an entire weekend to get all the values correct.
Magic Fill – An extension by Claude, Magic Fill is a helper app that automatically selects a hex code for your products based on their name, description, image, and alt text. It can select a color for individual products or for an entire collection at once. “Sunset Coral” gets this app spot on with #F4826A, and “Midnight Forest” gets a great match with #1E3A2B. Sometimes it doesn’t match perfectly, but generally it’s accurate about 95% of the time and you can manually change it if you need to.
This is great because otherwise you would be dragging the eyedropper tool and sampling individual pixels, and writing down their hex codes and then filling in text boxes with those hex codes. Until Magic Fill came along, this was a time-consuming process that took up a large chunk of my afternoons. With Magic Fill, it’s accomplished in minutes.
19 built-in presets
Rubik includes 11 presets for a product page and 8 presets for product cards (collection pages, search results etc.). Each preset has its own style in terms of minimalism, boldness, rounded corners and squares, pills, borders and underlines.
Choose the theme from the presets that best resembles your template design. Most online store merchants are not designers and will rarely attempt to alter the css codes. They can browse through the presets, choose the best one and download the template in just a couple of minutes.
For merchants using specific themes we have setup guides: Refresh, Sense, Spotlight, Taste, Shrine Pro.
70+ CSS variables
If the presets in Rubik do not 100% fit your brand name and style, you can easily override the CSS custom properties set for over 70 styles. Including size, border radius, border colors, gaps, active-state rings, hover scales, font styles, label spacings, and where tooltips appear.
Because the swatches render inside a shadow DOM, your overrides do not leak into the rest of the theme, and your theme styles do not leak into the swatches. Clean isolation. That is a design choice we agonized over. Most swatch apps leak styles everywhere and break on theme updates. Shadow DOM fixes that.
Picking the right type for your store
- Apparel with solid colors: solid + Magic Fill
- Apparel with patterns: image swatch
- Footwear with contrast soles: two-color split (diagonal)
- Furniture with fabric/wood: uploaded custom swatch
- Mixed catalog: Auto mode
Most stores display image swatches. I try to avoid these because a plain swatch tends to perform better. A solid color is easy to read and instantly conveys the difference between variants. A small image requires more effort to understand than a solid color and can kill clicks, especially on mobile. When possible, go with a solid color.
See the live demo store, watch the tutorial video, or read the getting started guide.
FAQ
What swatch types does Rubik support?
Five features 9 different modes including solid color, 2 color split, product media, custom swatch upload and a new mode called Auto that lets you assign a swatch per variant.
Can Rubik pick colors automatically?
Magic Fill AI magically reads product and variant names, images, and alt text to automatically select a bunch of matching hex codes for you – all at once!
How many presets are included?
11 presets for product pages and 8 for product cards, so 19 total.
Can I customize the swatch CSS?
Yes. Rubik features over 70 changeable CSS variables that control a wide array of styling from the size of a component all the way down to the rounded edge of a corner. It also includes variables to change the border, the gap between elements, the hover and active states, and even your typography.
Will swatches break on theme updates?
Swatches render inside shadow DOM which means that they won’t be affected by any theme CSS updates, and they will render differently than any normal controls.
Can I use an image as a swatch?
Yes. either automatically pull images from product media or upload custom images and/or SVGs for each variant.
What does Auto mode do?
Automatically selects best swatch type per variant based on product data. Solid for detected colors, split for two color names, image as fallback.
