How to change the text color of button Shop Now on image banner?

Store Design
, , ,

Topic summary

A user working with the Impulse theme needs to change the “Shop Now” button text from black to white on an image banner, and also wants to display cart item numbers which currently aren’t visible.

Initial Solutions Attempted:

  • Suggestion to modify color schemas in theme settings and create a new color scheme for that specific section
  • Attempt to add CSS code in theme.liquid file changing color: #000 to white - this approach didn’t work

Working Solution:
The issue was resolved by adding CSS code to the main.css file (or base.css/style.css/theme.css) at the bottom:

.slideshow__slide .a.btn {
  color: black !important;
}

Changing “black” to “white” in this code successfully updated the button text color.

Outstanding Issue:
The cart number display problem remains unresolved. An attempt to fix it with CSS appears to conflict with existing JavaScript, suggesting a more complex solution may be needed.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,i need to change the color of the text from black to white color in button shop now,i use impulse theme and also in cart homepage icon how can show the numbers because its just a color without numbers on it

Screenshot_20240831_124427_Chrome.jpg
Screenshot_20240831_124427_Chrome.jpg1080Ă—791 47.5 KB

Screenshot_20240831_124452_Chrome.jpg
Screenshot_20240831_124452_Chrome.jpg1076Ă—223 8.42 KB

2

Hey @VisarK

It seems like it’s a draft theme which you’re working on, so can you share a preview URL of the draft theme?

Best Regards,

Moeed

3

In your theme settings, you can define your color schemas. You can change the button text color to white there and it will automatically update for all the components that are using that schema.
If you only want to change it for this section, create a new color schema that matches the current one only with the button color changed. Then assign it in the section settings.

4

Yes @Moeed

https://pawshubs.com/?_ab=0&_fd=0&_sc=

1 Like
5

Hey @VisarK

The URL you shared isn’t the preview URL of the draft theme. To share the preview url, Preview your website on the draft theme and in the bottom you will see a button called “Share Preview”. Copy that link and share here.

Best Regards,

Moeed

1 Like
6

Ah okay i didnt know @Moeed

https://ylkn7380n2x0fnt5-73297297711.shopifypreview.com

1 Like
7

Hey @VisarK

There’s already a coded added in your theme, try searching for that code in theme.liquid file and if you find it then replace #000 with “white”.

.slideshow__slide--1524769873765-0 .btn {
    background: #c19a6b !important;
    border: none;
    color: #000 !important;
}

RESULT:

Moeed_0-1725220891961.png
Moeed_0-1725220891961.png1873Ă—821 167 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

8

It doesnt work @Moeed

9

Hi @VisarK

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.

.hero .slideshow__slide a.btn {
    color: black !important;
}

And Save.

Result:

Made4uoRibe_0-1725221910670.png
Made4uoRibe_0-1725221910670.png339Ă—237 8.42 KB

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

1 Like
10

Thanks a lot @Made4uo-Ribe i just changes word black to white and its changed,and for cart to show the numbers can you help me

11

I already checked it, but it can’t be changed with simple CSS. It seems to conflict with the JavaScript.