Hi,
To align the ‘Add to cart’ and’ Quick Add’ buttons, I would like to change their background colour to #1773B0 and make the text white.
I tried several suggestions in this forum, but none of the solutions provided seemed to help. Perhaps a different CSS code is required for the RIDE theme.
If someone can assist, that would be great!
Cheers, Nick
Button style on my site:
Current quick add button style:
Current Add to cart button style:
Hi @nickadl ,
Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?
Hi team. The store URL is securitybase.com.au
Hi @nickadl ,
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
button.button.quick-add__submit,
button.button.product-form__submit {
background: #1773B0;
color: #fff;
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
If it won’t work, try placing a closing curly brace before the code snippet, like this
}
button.button.quick-add__submit,
button.button.product-form__submit {
background: #1773B0;
color: #fff;
}
Hello @nickadl
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Great, that works! Thank you.
Is there also a way to make the text in the button bold so it stands out a bit more??
If you want to make the text in the button bold, you can use this code (I added a CSS line for making the text bold)
button.button.quick-add__submit,
button.button.product-form__submit {
background: #1773B0;
color: #fff;
/* You can adjust this value to your preference */
font-weight: 600;
}
Here is the result
This is great. And final question: is it possible to make the button grey (e.g. #352f36) when you hover over it?
@nickadl Add this
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
