Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Shopify swatches replace text-only option values with visual color chips or product images. You can enable them in your theme, build them into the theme code, or install a swatch app. The right choice depends on your theme’s controls, the kind of options you sell, and whether you can maintain Liquid and JavaScript.
First, understand what a Shopify swatch controls
A swatch is a visual control for a real product option value. If a product has a Color option with values such as Black, Ivory, and Green, each value belongs to the product’s variant system. Selecting a swatch must therefore select the corresponding variant, not merely change a decorative label.
Shopify products support a maximum of three options. Each variant is one combination of those option values. For example, a product with Color and Size options can have Black/Small, Black/Large, Ivory/Small, and Ivory/Large variants. A swatch interface should preserve that relationship so price, inventory, image, SKU, availability, and the checkout variant all stay synchronized.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsShopify’s Liquid swatch object provides two visual properties: color and image. The same type of visual representation can be used for product option values and filter values. Shopify’s theme requirements describe option swatches as showing either a hexadecimal color or an image, which is why a robust implementation should support both rather than assuming every option is a flat color.
#1 Best Overall
- Read Before You Buy — No Video Output: These adapters support charging and USB 2.0 data transfer, but cannot transmit video signals. Except for standard USB webcams (which use USB data only), they are not compatible with HDMI/DisplayPort cables, video-capable USB-C hubs, or docking stations with video output.
- Convert USB-A Ports to USB-C: Designed to connect USB-C earphones, cables, flash drives, card readers, and other USB-C accessories to standard USB-A ports. Plug-and-play with no drivers or software required.
- Aluminum Alloy Housing: Built with a sturdy aluminum alloy shell that aids in heat dissipation and protects against daily wear and scratches. Designed to maintain a stable and secure connection.
- Compact & Travel-Friendly: The ultra-compact design allows the adapter to stay plugged into your device without blocking adjacent ports or adding bulk, reducing wear and tear on your original USB ports.
- 12-Month Warranty: Backed by a 12-month manufacturer warranty for peace of mind. Designed to meet strict quality control standards for reliable everyday performance.
Compare the three ways to add swatches
| Method | Best fit | Work involved | Main trade-off |
|---|---|---|---|
| Theme editor | A theme that already includes variant pills or swatch controls | Configure settings and product data in the admin | Available controls differ by theme and may not include custom image behavior |
| Custom theme code | A unique design, custom image mapping, or a developer-maintained storefront | Edit Liquid, JavaScript, CSS, and sometimes metafield or metaobject data | Most control, but you own testing, maintenance, and compatibility work |
| Shopify app | A merchant who wants configurable behavior without maintaining Liquid | Install, grant permissions, configure, and test the app on the store’s templates | Features, compatibility, support, performance, and pricing depend on the app |
None of these methods has a documented universal conversion lift, setup-time guarantee, or return-rate reduction. Choose based on the behavior your catalog requires, not on an assumed business outcome.
Method 1: Use the theme’s built-in variant picker
Check whether your theme supports the swatch type you need
- In Shopify admin, open Online Store > Themes.
- For the published theme, choose Customize.
- Open the product template and select the Variant picker block or section.
- Look for controls named Swatches, Variant pills, Option display, or similar. Labels vary between themes and versions.
- Check whether the control supports color values, image swatches, or only pill-shaped text buttons.
Shopify documents variant pills as a configurable visual element, but the exact settings exposed in your store are theme-dependent. A theme may offer a color swatch toggle while another offers only text or pills. Do not assume that installing a Shopify theme guarantees image swatches on every product template.
Configure the product data the picker reads
Use a consistent option name such as Color and consistent values such as Forest Green or Natural Linen. Keep spelling, capitalization, and spacing consistent across products if the theme maps swatches by value name. Attach the correct variant images and inventory to each variant in Products; a swatch cannot repair a variant that has no image or is unavailable for sale.
Rank #2
- 5-in-1 USB-C Hub: Experience comprehensive connectivity featuring a Power Delivery input, two USB-A 2.0 ports, a USB-A 3.0 port, and an HDMI port. (Note: The USB-C power delivery input port is only for connecting an external wall charger to power your laptop and cannot power peripheral devices.)
- 90W Pass-Through Charging: Achieve optimal charging with 90W pass-through power to your laptop, supported by a total input of 100W, with the hub reserving 10W for operational efficiency. (Note: Wall charger not included.)
- Quick Data Transfers: Accelerate your productivity with rapid data transfers using a high-speed 5Gbps USB 3.0 port and two 480Mbps USB 2.0 ports.
- 4K HDMI Display: Enhance your visual experience with a hub capable of delivering 4K resolution at 30Hz in both mirror and extend modes. Please note that this hub is compatible with MacBook (macOS 12 and newer), Windows 10 and 11, ChromeOS, and laptops equipped with DP Alt Mode and Power Delivery. Note: This device is not compatible with Linux.
- What You Get: Anker USB-C Hub (5-in-1, 4K HDMI), welcome guide, 18-month warranty, and our friendly customer service.
If the theme provides a place to assign a swatch color or image, set it for each value. For a photo-based option, use a clear, square crop that remains recognizable at a small size. For a solid color, use the theme’s color field when available rather than relying on a text name that could be interpreted differently by the theme.
Verify every place the picker appears
- On the product page, select each swatch and confirm that the selected variant, price, inventory message, SKU, and main image update together.
- Test combinations in products with more than one option. An unavailable size should become unavailable after a color is selected if that combination does not exist.
- Open collection, search, and featured-product cards. Some themes use a separate card swatch setting, so a product page can work while cards still show text.
- Check the mobile layout, keyboard focus, visible selected state, and contrast against the page background.
- Open a variant URL or refresh the page after making a selection. The chosen value should remain identifiable and should not silently revert to another variant.
If the required swatch control is missing, or if the theme cannot associate an image with an option value, stop changing settings and use the custom-code or app route instead.
Method 2: Customize the theme code
When custom code is justified
Code is appropriate when you need a design that the editor does not expose, image swatches for non-color options, value-specific labels, custom availability states, or tighter control over variant-linked images and URLs. It is also the route for a store that wants to avoid adding an app but has someone responsible for theme maintenance.
Rank #3
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
Duplicate the live theme before editing. Make and test changes in that duplicate, record which snippets and assets you changed, and publish only after testing real products on desktop and mobile. Theme updates can replace or alter snippets, so keep a short change log for future upgrades.
Recommended Free Tools
Use Shopify’s current option-value model
Current high-variant guidance favors iterating through product.options_with_values and each option’s option-value objects rather than assuming that a complete list of variants is available in product.variants. Shopify returns a maximum of 250 variants through product.variants. Older pickers that search that array for every combination can therefore fail on products with larger catalogs.
The visual part of a custom picker should read the option value’s swatch data. The Liquid object exposes swatch.color and swatch.image; your theme’s existing picker determines the exact attributes and JavaScript events used to select a value.
Rank #4
- Dual Converters, Infinite Potential：Includes 2× USB C male to USB A female adapters and 2× USB A male to USB C female adapters. Perfect for a wide range of uses—tablets with Bluetooth keyboards, expand USB ports on macbook, and more. Two different converters for all your daily needs
- Next-Level 10Gbps & 3A Charging: No more slow 480Mbps, this usb to usb c adapter has a transfer speed of up to 10Gbps, allowing you to do more transferring in less time. This usb adapter fits both USB A and USB C charger, supporting up to 3A fast charging
- Upgraded Exquisite Craftsmanship: With an aluminum alloy housing and metal connector, the usbc to usb adapter is extremely durable and sturdy. Rigorously tested to withstand more than 10,000 times of plugging and unplugging, ensuring long-lasting performance
- Broad Compatible: The usb c to usb adapter widely supports all USB C/ USB A devices like laptops, tablets, cellphones, car chargers, and phone chargers. Such as compatible with MacBook Pro/Air 2023/2022, Thunderbolt 4/3 Devices,Apple MagSafe Watch 9/8/7/SE/Ultra, iPad Pro 2022/2021, Samsung Galaxy S23/S20/S10, and iPhone 17/16/15 Pro. Plug and play
- Please Note: To reach 10Gbps speed, keep the cable under 3.3 ft. For USB A Male to USB C adapters, try flipping the USB C connector. USB C Male to USB A adapters support bidirectional 10Gbps transfer within 3.3 ft
{% raw %}{% for option in product.options_with_values %}
<fieldset class="custom-option">
<legend>{{ option.name }}</legend>
{% for option_value in option.values %}
<button type="button"
class="custom-swatch"
data-option-value="{{ option_value.value | escape }}"
{% unless option_value.available %}disabled{% endunless %}>
{% if option_value.swatch.image %}
{{ option_value.swatch.image | image_url: width: 80 | image_tag: alt: option_value.value }}
{% elsif option_value.swatch.color %}
<span class="custom-swatch__color"
style="background-color: {{ option_value.swatch.color }};"></span>
{% endif %}
<span>{{ option_value.value }}</span>
</button>
{% endfor %}
</fieldset>
{% endfor %}{% endraw %}This fragment illustrates the data flow, not a drop-in replacement for every theme. Preserve the attributes and event hooks used by the theme’s existing variant-picker snippet. In some themes, the option value property is named differently or the picker expects a URL, variant identifier, or hidden input generated by another snippet.
Keep the behavior that makes a picker a variant picker
- Write the selected variant identifier into the product form’s hidden input so the correct variant reaches the cart.
- Update the selected state, price, compare-at price, inventory message, selling-plan availability, and SKU when the combination changes.
- Disable or mark impossible values after a selection. Do not leave a swatch looking selectable when no matching variant exists.
- Update the main product media when the selected variant has a linked image.
- Preserve deep links and browser history behavior if the original theme changes the URL for a selected variant.
- Give every visual control an accessible name. Keep a visible text label or an accessible label even when the chip itself is an image.
Do not build availability by looping through product.variants and assuming it contains every variant. For high-variant products, follow the theme’s current option-value and availability pattern, and test combinations near the edges of the catalog as well as common ones.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →A theme-specific workaround needs adaptation
Shopify Community discussions include a Horizon-theme-specific image-swatch workaround that uses a metaobject, edits to swatch and variant-picker snippets, and the theme’s swatches setting. Treat that as an implementation example for that theme scenario, not as a universal Shopify procedure. Snippet names, settings, and data structures can change with a theme version, so inspect the current theme before applying any community code.
Best Value
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
Method 3: Install a Shopify swatch app
When an app is the practical choice
An app can be useful when the theme lacks the required controls, the merchant needs image swatches across many products, or no one on the team wants to maintain Liquid and JavaScript. The app typically adds its own block, app embed, or theme integration and provides an admin interface for mapping colors and images.
- Review the app’s current listing and confirm that it supports your product templates, theme version, and required swatch type.
- Check the permissions it requests and whether it edits theme files, uses an app embed, or relies on a storefront script.
- Install it on a duplicate theme or a controlled test product first when the app supports that workflow.
- Map a few color values and image values, then test variant selection, inventory states, cart behavior, and product-card displays.
- Review current pricing, support terms, performance impact, and what remains after uninstalling. These details are app-specific and can change.
For example, the Rubik Variant Images & Swatch marketplace listing describes color and image swatches along with variant-image features. Those are claims from the app publisher’s listing, not an independent performance comparison or a guarantee that the app will work with your theme. Confirm compatibility and behavior on your own product templates before committing to it.
How to choose among the three methods
Choose the theme editor when
- Your installed theme already displays the required color or image swatches.
- You want the lowest maintenance burden and can accept the theme’s appearance and behavior.
- Your products fit normal variant counts and do not need unusual option logic.
Choose custom code when
- You need a design, data source, or availability rule the editor does not provide.
- You need image swatches for materials, patterns, finishes, or other non-color options.
- A developer can maintain the implementation through theme updates and catalog changes.
Choose an app when
- You need configurable mappings without owning the Liquid and JavaScript.
- The app explicitly supports your theme and product templates.
- The recurring cost and app dependency are acceptable in exchange for faster administration.
In every case, the decisive question is whether the visual control remains synchronized with the actual variant. A beautiful chip that selects the wrong image, leaves an unavailable combination clickable, or adds the wrong item to cart is not a successful swatch implementation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Common problems and fixes
| Symptom | Likely cause | What to check |
|---|---|---|
| No swatches appear | The theme has no swatch setting, the setting is disabled, or the option name/value does not match the theme’s mapping rules | Recheck the product template’s variant picker, the theme setting, and the exact option values |
| A color chip is blank or wrong | The value has no valid color data, or a theme-specific mapping expects a different format | Inspect the value’s swatch color and test a known hexadecimal color |
| An image swatch shows the wrong picture | The image is attached to the wrong value or the app/theme is using the variant’s featured image instead | Check the value mapping and the variant media assignment separately |
| Unavailable combinations remain active | Availability logic is not being recalculated after each selection | Test every option combination and ensure disabled states are updated after selection |
| The swatch changes visually but cart receives another variant | The visual control is not connected to the product form’s variant input | Inspect the hidden variant ID and test the cart line-item details |
| Large products lose options | Custom code assumes product.variants contains every variant |
Refactor around option-value guidance and account for the 250-variant return limit |
| Product page works but collection cards do not | Cards use a separate snippet or app block | Configure or customize the card picker independently |
| Keyboard and screen-reader users cannot identify choices | Image-only buttons lack names or a visible selected state | Use accessible labels, focus styles, text alternatives, and clear selected/disabled states |
Pre-launch swatch checklist
- Every swatch corresponds to a real option value and variant.
- Color swatches use accurate color data; image swatches use sharp, appropriately cropped images.
- Selecting a swatch updates the variant ID, price, inventory, media, SKU, and URL behavior expected by the theme.
- Impossible combinations are visibly disabled or otherwise explained.
- Products with one, two, and three options all behave correctly.
- A product with more than 250 variants has been tested without code that assumes the full variant array is present.
- Product pages, collection cards, search results, quick views, mobile layouts, keyboard navigation, and screen readers have been checked.
- The duplicate theme has been tested before publishing code or an app integration to the live theme.
Bottom line
Start with the theme editor because it is the simplest route when the installed theme already supports the swatches you need. Move to custom code for precise visual, data, or availability behavior, and choose an app when you want configurable functionality without maintaining the implementation yourself. Whichever route you use, treat swatches as variant controls: preserve availability, linked media, accessible labels, deep links, and correct cart selection.
Quick Recap
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.
