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

remoh123 · ‎05-23-2024

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

ZestardTech · ‎05-23-2024

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

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 · ‎05-23-2024

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

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 · ‎06-04-2024

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

remoh123 · ‎05-23-2024

ok will contact you through email. thanks

ZestardTech · ‎05-23-2024

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 · ‎05-23-2024

https://89dd9e-27.myshopify.com/

pw: Brinnova10950!

ThePrimeWeb · ‎05-23-2024

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 · ‎05-23-2024

https://89dd9e-27.myshopify.com/

ThePrimeWeb · ‎05-23-2024

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.

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 · ‎05-23-2024

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.

ZestardTech · ‎05-23-2024

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

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 · ‎05-23-2024

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.

ZestardTech · ‎05-23-2024

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

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 · ‎05-23-2024

It worked. Super thanks @ZestardTech

ZestardTech · ‎05-24-2024

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 · ‎06-04-2024

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

ZestardTech · ‎06-04-2024

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

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 · ‎06-04-2024

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

ZestardTech · ‎06-04-2024

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 · ‎06-04-2024

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

ZestardTech · ‎06-04-2024

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

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