How can I alter the color of my 'Shop Now' button?

Store Design
, , , , , , , ,

Topic summary

A user seeks help changing the color of ‘Shop Now’ buttons on their Shopify store, providing screenshots and a store preview link.

Initial Solutions Offered:

  • Two responders suggest adding CSS code to either base.css or theme.liquid files
  • Code targets .banner.banner__content button and .banner__buttons a.button.button--primary classes
  • User can customize colors by modifying values in the CSS (background, border-color, text color)

Issue Encountered:

  • After implementing initial code, white lines/borders appear around the button
  • Solution: Add box-shadow: unset !important; to remove unwanted borders

Final Request:

  • User successfully changes button background to black but needs help making button text white
  • Responder provides updated CSS adding color: #fff !important; for white text

Resolution:

  • Problem appears solved with complete CSS targeting background color, removing box-shadow, and setting text color to white
  • User thanked the helper and was asked to accept the solution
Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hi, tried to do some research but didnt find any information that helped me.

Wondered how i can change the button and text color on these onces, if anyone know this?

Dispomal_0-1703686284193.png
Dispomal_0-1703686284193.png983×231 246 KB

Dispomal_1-1703686303777.png

Heres my link: https://jlo9jmwso3ogncv0-56470536270.shopifypreview.com

Thanks!!

1 Like
2

Hi @Dispomal

Follow this:

  1. Go to Online Store->Theme->Edit code
  2. Asset->base.css → paste bellow code in bottom of file
.banner .banner__content .button { background: red; color: black; border-color: green; }

Note: change your color

3

Hello @Dispomal

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.banner__buttons a.button.button--primary { background: aqua !important; }

techlyser_web_0-1703687370808.png
techlyser_web_0-1703687370808.png616×185 141 KB

4

what color will that make it? Or how do i choose my own color?

5

For this you will have to inspect the page on the browser and you can choose the color from there.
can I know which color you want?

6

Tried it now but still get some white lines around it, why it that?

Dispomal_0-1703687656368.png
Dispomal_0-1703687656368.png807×169 153 KB

7

Let me check.

8

Hello @Dispomal

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.banner__buttons a.button.button--primary { background: black !important; box-shadow: unset !important; }

techlyser_web_0-1703687963025.png
techlyser_web_0-1703687963025.png495×146 89.4 KB

9

Yeah really no idea why it does that

10

Thanks that worked perfectly, now comes my last question how do i make the text white :)?

11

just give me 5min.

12

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.banner__buttons a.button.button--primary { background: black !important; box-shadow: unset !important; color: #fff !important; }

my solution worked then like and accept solution.
Thanks

1 Like