How to Change Swatch Border Colors on Shopify Product Pages

When a shopper browses your products, the smallest design details can guide their choices, sometimes without them even realizing it. Swatches are a prime example. They show customers the available colors or patterns for a product, and the border around each swatch plays a big role in how clearly those options stand out.

If swatch borders blend into the background or clash with your palette, the result can be visual clutter that dilutes your product presentation. A well-chosen border color frames each swatch clearly, keeps your design language consistent, and makes the shopper’s selection process smoother.

This guide explains practical methods to update swatch border colors in Shopify, covering both theme code edits and app-based solutions.

TL;DR

• Swatch borders can either enhance or weaken your product page design.
• One way to adjust your swatch borders is through your theme’s built-in customization settings, if your theme offers that option.
• Another way is to edit your theme code for full control over swatch border styling.
• An alternative is to use a dedicated swatch app with advanced customization tools and display features.

Why Swatch Border Colors Matter

A color swatch is that little clickable circle or square you see on product pages, showing a color option without making you read a label. They’re one of Shopify’s simplest but most effective tools for making variant selection quick, visual, and even a little fun for shoppers.

Most of the time, swatches just work. However, store owners occasionally notice something amiss, particularly with the border around the swatch. Maybe the edges blend into the background, maybe the selected swatch isn’t standing out enough, or maybe the border color just doesn’t feel on-brand.

You’re not alone if this sounds familiar. In fact, the Shopify Community is full of posts from store owners asking: “How can I change my swatch border color?” It’s a small tweak, but it can make a big difference in how clean, consistent, and easy-to-use your product pages feel.

Here are the most common reasons store owners want to adjust their swatch borders:

• White swatches blend into the background: A white-on-white combo can make the swatch almost disappear.
• No clear cue for the selected swatch: If the border doesn’t change, customers may not know which color they’ve picked.
• Border color clashes with your branding: A default gray or black border might feel out of place.
• Borders get lost on mobile: Thin or faint borders can be hard to notice on smaller screens.
• Patterned or multicolor swatches need more definition: Without a strong border, the swatch edges can be hard to spot.

Here’s an example from a Shopify store owner who shared their swatch border challenge:

Source

The good news? This is a fixable issue, and you don’t need to be a developer to do it. Let’s walk through three ways you can change swatch border colors on Shopify, from quick theme settings to more advanced customization.

How to Change Swatch Border Colors

If your swatch borders don’t look the way you want or they’re making colors hard to notice, there are simple ways to change them.

Below are three popular methods to customize the border color:

Method 1: Change Swatch Borders via Theme Editor

In older Shopify themes, product variants were usually displayed as simple text buttons. But modern themes, especially Online Store 2.0 themes, often include built-in swatch options for store owners. Many of these themes go a step further by offering customization controls, including the ability to change swatch borders directly from the theme editor.

If your theme supports variant pickers with swatches, you can usually adjust their appearance, such as shape, size, and sometimes the border color, right inside the Variant Picker block settings.

Here’s how to check and update it:

1. Go to Online Store → Themes in your Shopify admin.
2. Click Customize on your active theme.
3. In the left-hand panel, open the Product Page section (or any section where your swatches appear).
4. Look for a Variant Picker or Color Swatch block.
5. Check if there’s a Border Color or Swatch Style setting—adjust it to match your design.

Tip: Some themes also let you set a different border color for the selected swatch. This is an easy way to make the chosen option stand out without changing the swatch’s actual color.

Limitations of this method:

• Not all themes include swatch border customization.
• Options may be basic, allowing only one border color for all swatches.

If your theme doesn’t support this level of customization, don’t worry, Method 2 will show you how to achieve it with a quick CSS tweak.

Method 2: Change Swatch Borders with Custom CSS

If your theme doesn’t let you change swatch borders in the Theme Editor, adding a little CSS gives you full control over color, thickness, and even which swatches get special treatment.

The exact CSS you’ll use depends on your theme’s structure, but the process to add it is the same:

How to add CSS to your theme

1. In your Shopify admin, go to Online Store → Themes.
2. Next to your active theme, click … (Actions) → Edit code.
3. In the Assets folder, open your CSS file—this might be base.css, style.css, theme.css, or even theme.min.css.
4. Paste your CSS code at the bottom of the file.
5. Save, then refresh your store to see the changes.

Some themes also allow you to add CSS directly in the Theme Editor:

• Go to Online Store → Themes → Customize → Theme Settings → Custom CSS.
• Paste your CSS there and save.

Common CSS Examples for Swatch Borders

1. Simple border change for all swatches

.swatch__button .swatch__label {

    border: 1px solid #000000; /* black border */

}

2. Using Shopify’s built-in CSS variables

.swatch__button .swatch__label {

    border: var(--BORDER-WIDTH) solid var(--border);

}

Replace var(--border) with your chosen color code if your theme supports overriding it.

3. Universal border styling for all swatch colors

.variations .product-form__input--color input[type=radio] + label {

    box-shadow: 0 0 0 1px #000000 inset; /* black border */

}

Change #000000 to any hex code or color name.

4. Targeting a specific swatch color (e.g., White)

.variations .product-form__input--color input[type=radio][value=White] + label {

    box-shadow: 0 0 0 1px red inset; /* red border for White swatch */

}

Make sure "White" matches exactly the name of your variant in Shopify.

5. Alternative selector for some themes

.color-swatch + label {

    border-color: #000 !important; /* black border */

}

Useful when .swatch__button or .product-form__swatch selectors don’t work.

Tips:

• If the CSS doesn’t seem to apply, try clearing your browser cache and refreshing the page.
• If your theme has a theme.min.css file instead of base.css or style.css, paste the code there instead.
• Different themes use different class names. Right-click a swatch in your store, choose Inspect, and note the HTML/CSS classes to target.

While CSS gives you complete control, it can also require extra setup—especially if you’re hunting for the right file or selector. And if something goes wrong, it could unintentionally affect other parts of your theme’s styling.

One simple and powerful alternative is to use a third-party swatch app. These tools let you change border colors (and much more) with a few clicks, no coding risk, and instant previews, making customization faster, safer, and far more flexible.

Method 3: Use a Third-Party App for Swatch Customization

If you want to go beyond just changing border colors, third-party swatch apps open up a whole world of customization—without touching a single line of code. These apps don’t just style your swatches; they help you manage variants, create richer product displays, and improve the overall shopping experience.

With the right app, you can:

• Change swatch borders instantly.
• Add custom images or textures to swatches.
• Show variant prices directly on swatches.
• Let shoppers preview variants right from collection pages.
• Handle out-of-stock options elegantly.

This is especially useful for stores with large catalogs, grouped products, or B2B requirements—where speed, clarity, and easy navigation are essential.

StarApps Color Swatch King

Color Swatch King is a complete app-based solution for store owners who want full swatch control without any coding. Built by StarApps Studio, it works seamlessly across both product and collection pages, supporting Shopify Markets and even B2B workflows.

Key Features:

• Variant Image Swatches with Price: Let customers compare options instantly with swatches that show both images and prices, making it easier for them to decide and buy faster.
• Color & Custom Image Swatches: Use solid colors, uploaded images, or detailed patterns (like fabrics or textures) to represent each variant visually.
• Dynamic Collection Swatches: Allow shoppers to preview colors, sizes, or styles directly from collection pages, with instant product image, price, and availability updates.
• Out-of-Stock Variant Handling: Choose whether to gray out, strike through, or hide unavailable variants so customers can focus on what’s ready to purchase.
• Extensive Style Library: Pick from dropdowns, circles, squares, buttons, pills, and more, ensuring swatches perfectly match your store’s branding and design.

Each approach to adding swatches in Shopify has its trade-offs. Native options work for simple catalogs but quickly hit limits in design and functionality. Coding offers more control, yet it demands technical upkeep and can break with theme updates.

Third-party apps sidestep those headaches, providing professional-grade swatches, broader customization options, and faster setup without requiring code changes. For most merchants, especially those managing large or evolving product ranges, apps deliver the best mix of flexibility, speed, and reliability.

Also Read: Top Shopify Color Swatch Apps in 2025

Testing & Best Practices for color swatch borders

Once you change the swatch border color, follow these tips and practices to make sure they look great for every shopper. Here are a few things to consider:

• Preview on multiple devices: Swatches might look perfect on your desktop, but appear too small or blurry on mobile. Open your store on a phone, tablet, and computer to confirm size and clarity.
• Pick clear, accurate colors: If you’re using HEX codes, choose ones that match your actual product rather than relying on generic shades. A slight mismatch can lead to disappointed customers.
• Check color contrast: Light colors should have a thin border or outline so they stand out against your page background.
• Match borders across the site: Make sure swatch borders align with other borders in your theme, like product images or buttons, so the design feels consistent.
• Avoid bulky outlines: Borders should frame the color without overpowering it. Thick outlines can distract from the swatch itself.

Real-World Examples and Before/After Visuals

Here are two examples from Shopify stores that changed swatch border colors:

Example 1

Before:

The white color variant blends into the site’s light background, making it nearly invisible to shoppers. This can confuse customers and reduce engagement with that variant.

After:

Source

A subtle dark border is added to all swatches. The white variant is now clearly visible, and all colors look uniform while keeping the design sleek.

Example 2

Before:

On the collection page, swatches appear without defined borders, making lighter colors difficult to distinguish, especially on a white or pale background.

After:

Source

A thin, consistent black border is applied to every swatch. This not only improves visibility but also gives a professional, well-structured look across all variants.

Conclusion

Once you’ve changed your swatch border color, make sure it’s not just visually pleasing but also functional. The right color choice can improve product clarity and make variant selection easier for shoppers. By keeping contrast, brand alignment, and accessibility in mind, you ensure every swatch works across your store’s pages and devices.

Want a faster way to customize and manage swatches across your store? Try Color Swatch King: Variants by StarApps. It works with any Shopify theme, supports collection pages, and gives you full control over swatch styling without touching code.

Try Color Swatch King: Variants by StarApps to style your swatches with full control.

FAQ

1. Can I change swatch border colors in Shopify without an app?

Yes, but it requires editing your theme’s code, which can be complex and may not be supported by all themes.

2. Will changing the border color affect my product images?

No, swatch border color changes only affect the visual outline of the swatch, not the product images themselves.

3. Can I set different border colors for different swatch states?

Yes, with advanced styling tools or apps, you can set separate colors for default, hover, and selected states.

4. Does changing the swatch border color impact website speed?

If done with optimized code or a well-built app, it has a negligible impact on site speed.

5. How do I make swatch borders match my store’s brand colors?

You can define your brand color values in the swatch settings of your theme or app, ensuring consistent branding across your store.

‍