How to change the outline of checkout button?

zinle · ‎06-19-2024

https://bycloudy.store
I would like to change the color of checkout button outline or border?

Dan-From-Ryviu · ‎06-19-2024

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.cart__checkout-button:after {
box-shadow: 0 0 0 1px #333 !important;
}
</style>

Change 333 in the code with your hex color code.

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

niraj_patel · ‎06-19-2024

Hello @zinle

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
.button:before{
box-shadow: #000 !important;
}
.button:after{
box-shadow: #000 !important;
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Moeed · ‎06-19-2024

Hey @zinle

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
button#checkout:after {
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(18,18,18, calc(1 - 1.0 )), 0 0 0 var(--buttons-border-width) rgb(0 0 0) !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

Dan-From-Ryviu · ‎06-19-2024

Hi @zinle

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.cart__checkout-button:after {
box-shadow: 0 0 0 1px #333 !important;
}
</style>

Change 333 in the code with your hex color code.

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Team_OSC · ‎06-19-2024

Hi @zinle

what color do you want to set?

Website: Omni Site Creations

How to change the outline of checkout button?

How to change the outline of checkout button?

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications