DriversRecommendedOutdated drivers can make a good PC feel brokenScan driver issues before chasing fixes manually.Scan NowHalloween DealsAmazon USHalloween week deals: useful picks before month-endAmazon US: current deals, useful picks and tech finds.Check DealsClean PCRecommendedOne scan can reveal what keeps slowing WindowsLook for cleanup and repair opportunities.Run Scan×
FREEDOM251

Freedom251 › Blog › ecommerce

Shopify Swatches: Three Ways to Add Custom Colors and Product Images

By Freedom251 Team · · 9 min read

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Shopify stores can replace plain option text or a select menu with color dots, fabric textures, or product-photo swatches in three practical ways: configure the installed theme, modify the theme code, or add a swatch app. The right route depends on what your theme exposes, whether the swatch represents a true variant option, how much maintenance you can support, and how many variants the product has.

Start with the theme editor because it is the safest change. Move to Liquid customization when the built-in controls cannot express your design or data model. Choose an app when you need configurable behavior without owning theme code. In every case, keep the swatch tied to Shopify’s variant selection, availability, URL, and image behavior rather than treating it as decoration.

As an Amazon Associate I earn from qualifying purchases.

Understand Shopify’s variant model before changing the picker

A swatch is a visual control for a product option value. Shopify allows up to three options per product, such as Color, Size, and Material. Each variant is one combination of those option values. A Color value therefore does more than change a dot on the page: selecting it can change the variant ID, price, inventory state, media, and add-to-cart result.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Shopify’s Liquid swatch object is designed for this visual representation. It exposes a color property and an image property, and Shopify documents it for product option values and filter values. A theme can use a solid color, a supplied image, or a fallback presentation when a value has no swatch asset.

#1 Best Overall
Photo Light Box, 12/16/20/24/32/47 Inch Photography Light Box with CRI>95 120 Light Beads. Dimmable Shooting Tent Kit with White and Warm Light. 6 Backdrops Photo Booth for Studio Products Display
  • Adjustable Brightness and High Color Rendering Index: 12"x12"(30x30cm)Photo light box Built in 120 high-quality LED beads, with a color temperature of 3200-4200-5600K, allowing users to freely choose between cold or warm light. The brightness level can be easily adjusted from 1-10, and the color rendering index (CRI) of the lightbox is up to 95+, product light box providing soft, sufficient, and uniform photography lighting for shooting at any angle, presenting the true color of objects.
  • 6-Color PVC Easy to Clean Background: The light box photography is equipped with a 6-color detachable background (black/white/yellow/blue/red/gray). The PVC material background for photography is durable, long-lasting, wrinkle resistant, and easy to clean. Professional photo light box provide excellent backgrounds for studios, photographers, perfect for capturing small objects such as cosmetics, jewelry, accessories, and toys.
  • Multi Angle Shooting: Professional photo booth offer four shooting positions to choose from, with openings on the sides and top, and no creases on the edges. The design integrates a studio and a softbox, avoiding shadow and reflection issues. You can take photos from different angles according to the desired visual and detail effects.
  • Easy to Install and Carry: The portable photo booth uses a folding design with high-quality velcro on the edge and built -in ring LED light and can be assembled and disassembled in a few seconds. Our mini photo booth can be powered by USB to allow you to use it at home, studio or travel, providing sufficient and uniform photography lighting for your shooting.(If there is a slight odor, it may be caused by the packaging not being breathable, and it can dissipate after opening and leaving for a few days)
  • Package Content and Good After-sales Service: Purchase our product photography light box, you will receive 1 x Photo Studio Light Box, 6 x Color PVC Backdrops, 2 x Light Diffuser, 1 x User Manual and our 1-year warranlty and lifetime friendly customer service. If you encounter any problems while using the white box for photography, please feel free to let us know and we will reply within 24 hours to help you solve them.

Do not assume every theme has the same controls. Shopify documents variant pills as a configurable visual element, but the labels and available settings are theme-dependent. A theme may offer text pills but no custom image upload, or it may expose swatches only in the product form and not in collection cards.

There is also an implementation limit that matters for large catalogs: product.variants returns a maximum of 250 variants. Shopify’s current guidance recommends rendering option values through product.options_with_values and the product_option_value object, then using the selected value’s availability and variant information. Older code that loops through product.variants as though it contains every combination can omit choices on high-variant products.

Method 1: Configure the theme’s built-in picker

Use this method when your installed theme already supports pills or swatches. It requires no Liquid edits and is the least risky way to change a live storefront.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Open the product template and inspect its controls

  1. In Shopify admin, open Online Store, then Themes.
  2. Choose the published theme and select Customize.
  3. Use the page selector to open a product template, then select the product information or variant-picker section.
  4. Look for settings named Variant picker, Variant pills, Swatches, or similar. The exact wording depends on the theme version.

If the section offers a swatch type, choose the visual treatment that matches your data. Color swatches work for values such as Black or Sage when the theme can map those values to colors. Image swatches are better for patterns, finishes, materials, or products whose color cannot be represented accurately by a flat hex value.

Rank #2
Sale
PULUZ Upgrade Light Box & Soft Box, 16"x16" Professional Shooting Tent with 480 LED Lights Photo Studio Light Box Photography with 4 Color PVC Backdrops for Jewelry and Product Photography
  • 【Stepless Dimming & High CRI】 Integrate 480 high-quality LED Light Beads with Dimmable Range 1%-100%, You can easily adjust the brightness to get the desired lighting effect. High Color Rendering Index (95+) and no strobe, create brighter and softer lights, help leave your photos looking more natural and great texture.
  • 【Multi-angle Shooting】The photo light box offers 3 openings enable you to choose any photo shooting position for getting more perfect product features and beauty. When you want to shoot smaller items and with high reflecting light products, just stand up the baffle and open the small window. The light source will be more concentrated and the shooting effect will be better.
  • 【4 Color PVC Backdrops】The photo box comes with 4 color detachable backgrounds(White/Black/ Orange/Green), made of thicker PVC, which are sturdy enough and no wrinkles, so you can easily change background colors and build up various shooting scenes as needs.
  • 【Assembly in Second】The photography box Dimension is 16*16 inch. With particular folding design, the whole assembly of portable ring light box ONLY needs 10 seconds. No bracket. No screws. No complicated lighting layout. With a durable and waterproof carry bag, it’s very compact and convenient to use in many places without taking a lot of spaces.
  • 【Advanced Photography】The design of the shooting box easily solve the shadow problem that cannot be solved by the studio, also can be used for dual purposes (studio + softbox), which is the best practice for fixing the problem of products’ highly reflecting light and performing more details of the contours. Not only for junior photographers, but also for advanced photographers and professionals.

Check how the theme maps option values

Some themes infer a color from the option name; others require a swatch setting, a product-file convention, or a theme-specific data field. Read the setting description and preview several real products. A value called “Blue Heather” may need an image rather than a generic blue color, while “Left” and “Right” should remain text or an icon instead of being forced into a color swatch.

Verify both product pages and cards

Save the setting on a duplicate theme first when possible. Open a product page in the theme preview and select every swatch. Confirm that the selected state is obvious, unavailable combinations are disabled or labelled, the displayed media changes when expected, and the add-to-cart action uses the selected variant. Then inspect collection cards, quick views, featured products, search results, and any recommended-product sections. A theme can support swatches in one component but continue to show text elsewhere.

Publish only after checking desktop and mobile layouts. Long option names, transparent images, low-contrast colors, and a large number of values can expose spacing or readability problems that are not visible in the editor preview.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Method 2: Customize the theme code

Custom Liquid and JavaScript are appropriate when the theme’s controls do not provide image swatches, when swatch assets live in a structured data source, or when the picker must follow a design system that the editor cannot express. This route gives the most control but creates an ongoing maintenance obligation whenever the theme is updated.

Rank #3
PULUZ Mini Photo Studio Light Box, 10"x10" Portable Folding Photography Lightbox with CRI >95 104pcs LED Light & 6 Kinds Double-Sided Color Backgrounds for Small Products
  • 【High Brightness】Portable photography studio is built-in 104pcs high-quality LED light beads, provides enough brightness for shooting.
  • 【Easy to assemble】Use it after three seconds of assembly, you can unfold this LED lightbox studio and place it on any surface to get very good backdrop for small articles business photography, taking pictures for products.
  • 【CRI>95】This photo lighting studio kit Adopt CRI95 color temperature ring light board, built-in stone grain fabric, good light gathering effect.
  • 【Multi-angle Shooting】Photo light box With one front horizontal shooting window and one vertical window, it can meet different shooting demands.
  • 【WIDELY USE】Box photo studio perfect for shooting small items, Such as jewelry, accessories, toys, watches, gadgets and other items.Great for photographers, artists, online sellers, professionals and product advertising projects.

Plan the data and fallback behavior

Decide which product option is visual, where each value’s color or image will come from, and what happens when a value has no asset. A robust design has a text label and an accessible name for every swatch, uses a neutral fallback for missing data, and does not hide the option value from assistive technology.

Keep the visual value connected to Shopify’s option-value objects. Current high-variant guidance favors product.options_with_values and product_option_value rather than assuming a complete list in product.variants. Your picker should preserve the object’s selected state, availability, and associated variant information. It also needs to update the canonical product URL or query state when the theme normally deep-links a selection.

Make a safe copy before editing

  1. In Online Store > Themes, use the theme actions menu and choose Duplicate.
  2. Work only in the duplicate until the full product and checkout flow has been tested.
  3. Record the original snippets and section names you change. Theme updates can replace or reorganize those files.
  4. Use the theme code editor or your normal version-controlled workflow to identify the variant-picker, product-form, and swatch snippets.

Render color and image properties

Use the swatch object’s color property when a value is a true color and its image property for a photo or texture. Render a button or equivalent interactive control rather than a non-interactive span. The control should expose the option name and value to screen readers, show a visible focus indicator, and communicate selected and unavailable states without relying on color alone.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Do not remove the hidden variant input or replace the theme’s selection logic with a cosmetic click handler. When a visitor selects a swatch, the product form still needs the correct variant ID, price, inventory message, media, and purchase eligibility. Test direct links to a preselected variant and browser back/forward navigation if the theme supports them.

Rank #4
PULUZ Light Box Photography, 12"x12" Professional Dimmable Shooting Tent Kit with CRI >95 White Lighting 120 LEDs Lights + 6 Photo Backdrops for Product Display
  • 【High Brightness】Portable photography studio is built-in 120pcs high-quality LED light beads, provides enough brightness for shooting.
  • 【Easy to assemble】Use it after three seconds of assembly, you can unfold this LED lightbox studio and place it on any surface to get very good backdrop for small articles business photography, taking pictures for products.
  • 【CRI>95】This photo lighting studio kit Adopt CRI95 color temperature ring light board, built-in stone grain fabric, good light gathering effect.
  • 【Portable and Foldable】Portable folding structure design, more convenient to install and carry, built-in led light, providing average light and prevents shadows and reflections in your photos.
  • 【WIDELY USE】A box picture studio is ideal for photographing small objects, like watches, gadgets, jewelry, accessories, and toys, and is suitable for skilled persons, internet retailers, photographers, artists, and product advertising campaigns.

Account for products with more than 250 variants

For a product whose combinations exceed 250, audit every loop and conditional in the picker. Code that searches only product.variants may fail to display or identify combinations beyond the returned set. Follow Shopify’s current option-value guidance and test a product near the catalog’s highest variant count. Verify that unavailable combinations remain accurately marked instead of appearing selectable and failing only at add to cart.

Theme-specific example: Horizon community workaround

A Shopify Community answer describes a Horizon-theme workaround that stores swatch imagery in a metaobject, edits the swatch and variant-picker snippets, and enables the theme’s swatches setting. It demonstrates how a theme-specific data source can be wired into the picker, but it is community advice for one theme scenario, not a universal Shopify procedure. File names, schemas, and settings may differ in the current Horizon release. Treat it as a starting pattern, back up the theme, and adapt it to the version installed on your store.

Test the code in a duplicate theme

  • Test one product with a single option and one with Color plus Size.
  • Test a value with a color, a value with an image, and a value with no swatch asset.
  • Choose combinations that are out of stock and confirm the state is clear.
  • Check variant-linked images, price changes, subscription or selling-plan controls, and add-to-cart errors.
  • Resize the viewport and use keyboard navigation and a screen reader before publishing.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Method 3: Add a Shopify swatch app

An app can be useful when the theme lacks the required controls and you do not want to maintain Liquid, CSS, and JavaScript. Apps commonly add an editor for color or image swatches and may offer variant-image behavior, but the exact feature set depends on the app, theme, and product template.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Install and evaluate without committing the live theme

  1. From Shopify’s app marketplace, open the listing for the swatch app you are considering and review its current requirements.
  2. Check whether it works with your theme architecture, product templates, quick views, and storefront language settings.
  3. Install it in the store’s normal app flow, then use its setup screen to choose the option name that should render as swatches.
  4. Map colors or upload images for representative values and preview the product page.
  5. Test the resulting variant selection, inventory states, media changes, cart behavior, and mobile layout.

The Rubik Variant Images & Swatch marketplace listing is one vendor-provided example that describes color and image swatches plus variant-image features. Those statements come from the publisher’s listing; they do not establish superior performance, compatibility with every theme, or permanent pricing. Confirm current terms, support coverage, data handling, and uninstall behavior before deploying it broadly.

Best Value
Sale
DUCLUS Light Box Photography, 12"x12" Photo Booth Box with 120 LED Lights Dimmable & CRI>95, Portable Lightbox with 8 Backdrops for Mini Product Photography: Jewelry, Cards, Watches
  • 【Shoot Like A Pro】With 120 bright LED lights and dimmable lighting from 0–100%, this product photography light box kit delivers clean, professional results instantly. CRI>95 and 5500K daylight help capture true colors, making jewelry, cards, and small products look sharp and premium without complex editing
  • 【Uniform illumination】Designed for shadowless lighting, our light box photography uses built-in ring lights and 5 reflective inner walls to evenly distribute light. No flicker, no harsh shadows—perfect for clean online seller product photos that boost clicks and trust
  • 【Unique Front Cover】Our upgraded photo booth box features a Velcro Front Cover with three modes: fully open (7,900LX) for wide-angle shots, small window (8,400LX) to reduce light loss, and fully closed (8,800LX) for top-hole shooting with maximum brightness. Designed as a professional lightbox for product photography, easily control brightness and angles to highlight fine details and make small items stand out in every shot
  • 【Multi-Angle Shooting】Take stunning snaps from front-on as well as top-down. The photo light box allows you to take pictures from different angles depending on your product’s size and position. Better still, you can adjust the light source direction by flipping the photography light box to easily achieve the effect of the side lighting and front lighting angles, ideal for product photos and short videos on desks, vanities, or small home studios
  • 【8 Photo Backdrops & Quick Setup】Includes 8 photo booth backdrops, with 2 matte backgrounds to reduce glare and 6 waterproof PVC backgrounds that are durable and easy to clean—perfect for creative shots, reflections, and even water-drop effects. The folding light box features an all-in-one design that sets up in just 3 seconds and supports USB power, making this portable photo studio light box ready to use anytime, anywhere

Check for app residue and performance impact

Ask whether the app uses an app block, embeds scripts globally, or edits theme files. Prefer an app-block installation that can be removed cleanly when your theme supports it. After installation, inspect page speed, console errors, structured data, and the product form. If the app injects a second picker, disable the theme’s original visual control so customers do not see two competing selectors.

Which method fits your store?

Decision factor Theme settings Custom code App
Best starting point The theme already offers the desired swatch type The design or data model exceeds built-in settings You need configurable behavior without maintaining code
Implementation effort Low; editor configuration High; Liquid, styling, behavior, and testing Moderate; install, map values, and validate compatibility
Image swatches Only if the specific theme exposes them Can use swatch.image or a theme data source Depends on the app’s current features
Maintenance Theme updates may rename or move settings You own update compatibility and regression testing Vendor and theme updates can affect behavior
High-variant handling Depends on the theme’s implementation Must follow option-value guidance and avoid a 250-variant assumption Verify that the app handles the store’s largest products
Ongoing cost No separate app fee stated No separate app fee stated, but developer time is required Check the app’s current pricing and plan limits

There is no documented universal winner. The available Shopify guidance explains the data model and implementation limits, while app listings describe their own features. No controlled evidence establishes a conversion increase, lower returns, faster setup, or superior performance for one route across all stores.

Troubleshoot common swatch problems

The picker still shows text

Confirm that the product option is the one the theme targets, that the swatch setting is enabled on the correct product template, and that the value format matches the theme’s mapping rules. A theme may expose swatches only for product forms, leaving collection cards unchanged.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

An image swatch is blank or shows the wrong image

Check that the image is attached to the intended option value rather than only to a variant’s gallery. Verify file permissions, transparent-image contrast, and any required naming or metaobject reference. Clear theme-preview state and retest in a private window if cached markup is masking the change.

A swatch selects an unavailable combination

Inspect the variant-selection logic, not just the CSS. Availability must be calculated for the selected option combination. Ensure the code or app updates disabled states after every selection and that the product form submits the current variant ID.

Large products lose options

Look for loops over product.variants and assumptions that the array is complete. Shopify documents a maximum of 250 returned variants. Rework the picker around product.options_with_values and product_option_value, then test combinations near and beyond that threshold.

Customers cannot tell which swatch is active

Add a persistent selected outline or check mark, retain a text label or tooltip, and provide a keyboard-visible focus state. Never communicate availability or selection by color alone; include text, pattern, disabled state, or an accessible announcement.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Pre-launch checklist

  • Every swatch has a meaningful option-value label.
  • Color and image assets match the physical product and have adequate contrast.
  • Selected, focused, unavailable, and sold-out states are distinguishable.
  • Variant ID, price, inventory, media, and add-to-cart behavior update together.
  • Direct variant URLs and browser navigation still work.
  • Product pages, cards, quick views, search, and recommendations show the intended control.
  • Products with many variants do not rely on an incomplete product.variants list.
  • Mobile, keyboard, and screen-reader checks pass.
  • The duplicate theme has been tested before publishing code or app changes.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

ecommerceLiquidproduct variantsShopifyswatchesTheme customization

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Recommended PC Tool
Recommended PC Tool
Windows Errors? Fix Them Before They SpreadFree repair scan
Crashes, No Sound, or Screen Glitches?Free driver scan

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.