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

zkd_ · ‎12-04-2023

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_

Dan-From-Ryviu · ‎12-04-2023

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

<style>
.product-form__submit,
.card__content .quick-add__submit {
background: #00aaff !important;
color: #fff !important
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

websensepro · ‎12-04-2023

Hi, @zkd_.

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

4) Add the following code in the bottom of the file above </body> tag.

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

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

Result:

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

zkd_ · ‎12-04-2023

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.

Dan-From-Ryviu · ‎12-04-2023

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

<style>
.product-form__submit,
.card__content .quick-add__submit {
background: #00aaff !important;
color: #fff !important
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

zkd_ · ‎12-04-2023

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

Dan-From-Ryviu · ‎12-04-2023

You are very welcome

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Littleluxebubba · ‎01-20-2024

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

THANK you

Dan-From-Ryviu · ‎01-20-2024

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

<style>
.product-form__submit,
.card__content .quick-add__submit {
background: #00aaff !important;
color: #fff !important
font-weight: bold;
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Littleluxebubba · ‎01-21-2024

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 · ‎06-26-2024

Thanks works perfect and easy to apply

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

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

Community Blog Articles