Add to cart button color - dawn theme

Solved

Add to cart button color - dawn theme

Xakhil
Excursionist
33 0 7

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

Capture.PNG

But i want that black line also to be in this color  #3bc2c3.

 

Please help. im using dawn theme 

Accepted Solution (1)
devcoders
Shopify Partner
1624 190 496

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;
}

 

devcoders_0-1734157336349.pngdevcoders_1-1734157351950.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 7 (7)

devcoders
Shopify Partner
1624 190 496

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;
}
Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Xakhil
Excursionist
33 0 7

@devcoders  thank you for the code but the black line is still there.

The outline color changed though

Capture.PNG

 

Xakhil
Excursionist
33 0 7

@ali768 @devcoders 

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

 

Capture.PNG

devcoders
Shopify Partner
1624 190 496

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?

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Xakhil
Excursionist
33 0 7

@devcoders  i  messaged you the details please look

devcoders
Shopify Partner
1624 190 496

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;
}

 

devcoders_0-1734157336349.pngdevcoders_1-1734157351950.png

 

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
devcoders
Shopify Partner
1624 190 496

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!

Shopify Developer: Helping eCommerce Stores
If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!