Solved

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

zkd_
Tourist
6 0 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:
lIHszxTSKm.png

 

Desired State:
lIHszxTSKm_222.png

I'd also like to change these 2x buttons on the Product page to the same as the Desired state above please:
1UJeC2HaG8.png

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

Cheers,

zkd_

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
6936 1309 1338

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 8 (8)

websensepro
Shopify Partner
873 117 126

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:

websensepro_0-1701791905628.png

 

websensepro_1-1701792136736.png

 

 

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
zkd_
Tourist
6 0 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.

Dan-From-Ryviu
Shopify Partner
6936 1309 1338

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

zkd_
Tourist
6 0 1

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

Dan-From-Ryviu
Shopify Partner
6936 1309 1338

You are very welcome

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Littleluxebubba
Tourist
7 0 0

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

THANK you

 

IMG_2797.png

Dan-From-Ryviu
Shopify Partner
6936 1309 1338

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Littleluxebubba
Tourist
7 0 0
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?