Solved

Dawn Theme - Cart Page | Collection Page | Check-Out Page Buttons

remoh123
Excursionist
12 0 8

Button.png

 Hi, I'm using dawn theme and I want to make all the buttons look like the one with orange button. How can I do it? 

 

Thanks

Accepted Solutions (3)
ZestardTech
Shopify Expert
5601 1019 1346

This is an accepted solution.

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.product-form__submit {
background: #fc4000;
color: #fff;
border: none;
}
.quick-add__submit {
background: #fc4000;
color: #fff;
border: none;
}
button::before {.button:
before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before;
box-shadow: none!IMPORTANT;
border: navajowhite;
}
.button--secondary:after {
box-shadow: none!important;
}

 

ZestardTech_0-1716469275399.pngZestardTech_1-1716469284779.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech
Shopify Expert
5601 1019 1346

This is an accepted solution.

Hi @remoh123 

 


1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.cart__ctas button::after {
box-shadow: none!important;
}
.cart__ctas button {
background: #fc4000;
color: #fff;
border: none;
}


#cart-notification-button {
background: #fc4000;
border: none;
color:#fff;
}
#cart-notification-button::before {
box-shadow: none!important;
}

button.button.button--primary.button--full-width {
background: #fc4000;
}

button.button.button--primary.button--full-width::after {
box-shadow: none!important;
}

 

ZestardTech_0-1716470940431.png

ZestardTech_1-1716470968894.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech
Shopify Expert
5601 1019 1346

This is an accepted solution.

Hi @remoh123 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:

 

<style>
.quick-add__submit {
background: #fc4000;
color: #fff;
border: none;
box-shadow: none;
}
.button--secondary:after {
box-shadow: none;
}
.quick-add__submit::before {
box-shadow: none;
}
</style>
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 18 (18)
remoh123
Excursionist
12 0 8

ok will contact you through email. thanks

ZestardTech
Shopify Expert
5601 1019 1346

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
remoh123
Excursionist
12 0 8

ThePrimeWeb
Shopify Partner
2138 614 487

Hey @remoh123

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
remoh123
Excursionist
12 0 8
ThePrimeWeb
Shopify Partner
2138 614 487

Hey @remoh123,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.quick-add__submit.button {
    background-color: #f13d22 !important;
    color: #fff !important;
    width: 100% !important;
    font-size: 14px !important;
    border-radius: 20px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-family: Poppins !important;
    font-weight: 400 !important;
}

.quick-add__submit.button:before,
.quick-add__submit.button:after {
    display: none !important;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1716468990480.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
remoh123
Excursionist
12 0 8

Thank you so much this helped me. Lastly, I also wanted to change the button background of the check-out button on cart page to orange. 

remoh123_0-1716469851507.png

 

ZestardTech
Shopify Expert
5601 1019 1346

This is an accepted solution.

Hello There,

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.product-form__submit {
background: #fc4000;
color: #fff;
border: none;
}
.quick-add__submit {
background: #fc4000;
color: #fff;
border: none;
}
button::before {.button:
before, .shopify-challenge__button:before, .customer button:before, .shopify-payment-button__button--unbranded:before, .shopify-payment-button [role=button]:before, .cart__dynamic-checkout-buttons [role=button]:before;
box-shadow: none!IMPORTANT;
border: navajowhite;
}
.button--secondary:after {
box-shadow: none!important;
}

 

ZestardTech_0-1716469275399.pngZestardTech_1-1716469284779.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
remoh123
Excursionist
12 0 8

Thank you so much this helped me. Lastly, I also wanted to change the button background of the check-out button on cart page to orange. 

 

remoh123_0-1716469953822.png

 

ZestardTech
Shopify Expert
5601 1019 1346

This is an accepted solution.

Hi @remoh123 

 


1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.cart__ctas button::after {
box-shadow: none!important;
}
.cart__ctas button {
background: #fc4000;
color: #fff;
border: none;
}


#cart-notification-button {
background: #fc4000;
border: none;
color:#fff;
}
#cart-notification-button::before {
box-shadow: none!important;
}

button.button.button--primary.button--full-width {
background: #fc4000;
}

button.button.button--primary.button--full-width::after {
box-shadow: none!important;
}

 

ZestardTech_0-1716470940431.png

ZestardTech_1-1716470968894.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
remoh123
Excursionist
12 0 8

It worked. Super thanks @ZestardTech 

ZestardTech
Shopify Expert
5601 1019 1346

Hi @remoh123 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful then please Like and Accept Solution.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
remoh123
Excursionist
12 0 8

Hi @ZestardTech I would also like to change in mobile view. How can I do this pls?. Thank you

 

remoh123_0-1717475905550.png

 

ZestardTech
Shopify Expert
5601 1019 1346

Hi @remoh123 

 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

 

.quick-add__submit {
background: #fc4000;
color: #fff;
border: none;
box-shadow: none;
}
.button--secondary:after {
box-shadow: none;
}
.quick-add__submit::before {
box-shadow: none;
}

 

ZestardTech_0-1717479340856.png

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
remoh123
Excursionist
12 0 8

hi @ZestardTech tried to add these codes but nothing happens on mobile view. 

remoh123_0-1717480240701.png

 

ZestardTech
Shopify Expert
5601 1019 1346

This is an accepted solution.

Hi @remoh123 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find layout > theme.liquid and paste this at the bottom of the file:

 

<style>
.quick-add__submit {
background: #fc4000;
color: #fff;
border: none;
box-shadow: none;
}
.button--secondary:after {
box-shadow: none;
}
.quick-add__submit::before {
box-shadow: none;
}
</style>
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
remoh123
Excursionist
12 0 8

Hi @ZestardTech it worked. Thanks again. Marked as solution.

ZestardTech
Shopify Expert
5601 1019 1346

Hi @remoh123 

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful then please Like and Accept Solution.


Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing