How to change the circle border color of color swatches on product page?

Store Design
, , ,

Topic summary

Goal: change color swatch circle border and “Add to cart” button styling in the Impulse theme, including product page and quick view.

Actions taken:

  • Store preview link shared; helper provided CSS targeting the selected swatch and the add-to-cart button.
  • Swatch border updated via box-shadow to #c19a6b; add-to-cart set to white text with #c19a6b background and border.

Quick view follow-up:

  • User asked how to remove the “Buy It Now” button in quick view (a modal product preview). Preview link expired before further guidance.
  • User resolved by removing the quick view feature entirely, eliminating the “Buy It Now” button.

Outcome:

  • Requested styling changes achieved with CSS for swatch border and add-to-cart button.
  • Quick view issue resolved by disabling quick view rather than adjusting button color.

Notes:

  • Multiple screenshots were shared to show before/after results.
  • No further action items; thread appears resolved.
Summarized with AI on December 19. AI used: gpt-5.
1

Hello everyone.I use Impulse theme and i need to change the circle bolder color from black to be on color code #c19a6b in product pages and in quick view section also who shows the information of products.And the button “Add to cart” on product pages ,how can i change the colors of text and backround button , text to be on white color and backround of the button on color code #c19a6b.

Screenshot_20240913_220224_Chrome.jpg
Screenshot_20240913_220224_Chrome.jpg1078×1205 83.8 KB

Screenshot_20240913_220247_Chrome.jpg
Screenshot_20240913_220247_Chrome.jpg627×975 47.5 KB

Screenshot_20240913_220252_Chrome.jpg
Screenshot_20240913_220252_Chrome.jpg1080×653 41.3 KB

1 Like
2

Hi @VisarK

Would you mind sharing your store URL? Thanks!

1 Like
3

Hello @Made4uo-Ribe

https://a28k0d191vrhx16i-73297297711.shopifypreview.com

Thanks

4

Thanks for the info, check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.variant-wrapper .variant-input-wrap input[type=radio]:checked+label {
    box-shadow: 0 0 0 2px #c19a6b;
}

.payment-buttons .add-to-cart.btn--secondary {
    color: #fff;
    background: #c19a6b;
    border: 1px solid #c19a6b;
}

And Save.

Result:

Made4uoRibe_0-1726259422108.png
Made4uoRibe_0-1726259422108.png639×751 22.6 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

2 Likes
5

Thanks a lot @Made4uo-Ribe

I have one question.To quick view how can i remove buy it now button because it seems the color the same like add to cart its much better to remove

Screenshot_20240913_224145_Chrome.jpg
Screenshot_20240913_224145_Chrome.jpg1080×659 46.7 KB

6

Do you like to remove or change the color? The shared preview is already expire.

7

@Made4uo-Ribe @I removed quick view so for that reason doesnt show but thanks for helping me previous