Change Product Card "Choose Options" button to solid colour + white text in Refresh theme

[zkd_1]

Hi all,

New store here: www.levelupprints.net

Trying to change my product card buttons to match my theme a little better. I want them to be solid colour with white text. Please excuse my awful Photoshop. How can I do this in the CSS please? The colour I am using is #008BFF

Current State:

Desired State:

I’d also like to change these 2x buttons on the Product page to the same as the Desired state above please:

Assuming it’s all in base.css but I am unfamiliar with the naming conventions of the theme.

Cheers,

zkd_

[websensepro]

Hi, @zkd_1 .

Go to Online Store
2) Edit Code
3) Find theme.liquid file

4. Add the following code in the bottom of the file above tag.

.quick-add__submit {
    background: #008BFF;
    color: white;
}

.button, .button-label, .shopify-challenge__button, .customer button {
    background: #008BFF !important;
    --border-offset: none;
}

Result:

[Dan-From-Ryviu]

Go to Online store > Themes > Edit code > open theme.liquid file, add this below code after tag

[zkd_1]

Does this go in base.css instead of theme.liquid? I can’t seem to get this solution to work when putting the code in theme.liquid.

[zkd_1]

Hi @Dan-From-Ryviu , thank you! This works!

[Dan-From-Ryviu]

You are very welcome

[Littleluxebubba]

Hello, I also need the same solution but need to make the button text bold, currently looks like this.

THANK you

[Dan-From-Ryviu]

Hi, you can try to use the same code above but add more code to make the text bold like this. Make sure you change color code in background and color to your theme code

[Littleluxebubba]

When I added This cold it didn’t make the font bold it just changed the font to black so the whole button was black which no white text?

[guhan]

Thanks works perfect and easy to apply