Make color swatches bigger

Store Design
, , ,
1

Hello, i want to make my color swatches bigger:

Screenshot 2025-03-18 at 15.40.07.png
Screenshot 2025-03-18 at 15.40.07.png602×330 25.6 KB

my website is www.alexandrawestbrook.com . theme is dawn

2

@ads18922 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

it can pixelate the swatch images though

@media screen and (min-width: 750px) {
    .product-form__input--swatch .swatch-input__input+.swatch-input__label {
        --swatch-input--size: 4.8rem !important;
    }
}
3

Hey!

You can make your color swatches bigger by adding a little CSS. Try something like this:

.color-swatch {
  width: 40px !important;
  height: 40px !important;
}

You can adjust the 40px to whatever size looks best on your site. If your theme uses a different class name for swatches, you might need to right-click and inspect to confirm the selector — sometimes it’s something like .swatch__item or .product-form__swatch.

Also, if your swatches are inside a flex container, you may need to add:

.color-swatch {
  flex: 0 0 auto;
}

Hope that helps!

And if you ever want to make quick style changes like this without touching code, I built an app called Easy Edits that lets you do it visually — free to try, and you keep the edits you make: https://apps.shopify.com/easy-edits.

4

Hi @ads18922 :raising_hands:

It sounds like you want to optimize your product page to be more visually appealing and user-friendly, especially by making your swatches bigger. Don’t worry, you can easily do that with Easify Product Options. If you use Easify swatches and want to change the default swatch size, go to the Settings page, open the App Design tab, select the Size tab, and edit the swatch size as needed. Keep in mind that this setting applies to all swatches in the app, not just those in the slider.

image
image928×1180 131 KB

I hope this answer helps you resolve the issue. If you require any additional support, feel free to contact Easify at any time — we’ll be glad to assist you.:blush:

5

Hi there :waving_hand:

If you just want to make your color swatches bigger, you have two easy options:

Option 1 – Add custom CSS:

Go to Online Store → Themes → Edit code → base.css, then scroll to the end and add this code:

@media screen and (min-width: 750px) {
  .product-form__input--swatch .swatch-input__input + .swatch-input__label {
    --swatch-input--size: 4.8rem !important;
  }
}

Option 2 – No-code solution:

You can use Grouptify Combined Listings app, which lets you customize your swatches visually.

In the app, go to Appearance → Shape & Layout, then adjust Width and Height to your liking.

image
image1835×671 128 KB

Here’s the detailed guide: Customizing button/image swatch styles

Both ways work well — just pick whichever fits your comfort level (code or no-code).

Hope this helps,

Sophia - The Tapita team