How can I change the color of 'shop now' buttons on my homepage?

Store Design
, ,
1

Hello,

I’m trying to change the color of ‘shop now’ buttons on ‘Image with text’ section on homepage (without changing the color of header and body text).

I’m trying to change both of these button colors to Black and…their hover state color to Blue.

2

You can do this with CSS but it also looks like you have these colors set in theme settings which would be a better way to change it. Go to online store->customize and choose theme settings and it will likely be a button section or colors.

3

@PageFly-Victor Hey victor, can you help me with this please? If I do what others are telling me in theme setting, it changes colors on button and also all the body text. I just need the button colors changed. Default color and hover color.

4

Hi @jk888 ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-image-with-text.css->paste below code at the bottom of the file:

.image-with-text__text-item.grid__item > div > a[class="button button--primary"] {
    background: black !important;
}
.image-with-text__text-item.grid__item > div > a[class="button button--primary"]:hover {
    background: blue !important;
}
.image-with-text__text-item.grid__item > div > a[class="button button--primary"]:hover:after {
    display: none !important;
}

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
5

Thank you! It worked! You’re awesome

6

Solved!

7

You can add this code to remove:

.image-with-text__text-item.grid__item > div > a[class="button button--primary"]:after {
    display: none !important;
}