How to change the outline of checkout button?

Solved

How to change the outline of checkout button?

zinle
Visitor
3 0 0

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

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

techlyser_web
Shopify Partner
1770 327 354

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.

Techlyser || 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
Shopify Partner
4304 1105 1354

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:

Moeed_0-1718781910518.png

 

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


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

Dan-From-Ryviu
Shopify Partner
8382 1650 1662

This is an accepted solution.

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 and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

Team_OSC
Shopify Partner
157 18 23

Hi @zinle 

what color do you want to set?