Shopify themes, liquid, logos, and UX
I need help with changing the color of the ''add to cart'' button in the product page.
i used this code in the custom css section of the product information page
.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}
And got this result
But i want that black line also to be in this color #3bc2c3.
Please help. im using dawn theme
Solved! Go to the solution
This is an accepted solution.
Hello @Xakhil
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit:hover {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit.button--secondary:after {
box-shadow: none!important;
}
Hello @Xakhil
Try this code.
.product-form__submit {
background: #3bc2c3;
color: #ffffff;
border: 1px solid #3bc2c3;
}
.product-form__submit:hover {
background: #3bc2c3;
color: #ffffff;
border: 1px solid #3bc2c3;
}
@devcoders thank you for the code but the black line is still there.
The outline color changed though
i have updated the code to this
.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit:hover {
background: #3bc2c3;
color: #ffffff;
}
and im getting this result
Hello @Xakhil
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?
This is an accepted solution.
Hello @Xakhil
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.product-form__submit {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit:hover {
background: #3bc2c3;
color: #ffffff;
}
.product-form__submit.button--secondary:after {
box-shadow: none!important;
}
Hello @Xakhil
You're very welcome! I'm glad to hear that you're pleased with the outcome. Please feel free to reach out if you need further assistance.
If my assistance was helpful, please consider liking and accepting the solution. Thank you!
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025