Dawn 15.2 | Change the border radius and the color of the checkout button.

Ell_Soll · ‎01-09-2025

Hi,

How I can change the color and the border radius of this button?

It's in the checkout page.

Address: ellsoll.com

Ell Soll Fashion
ellsoll.com

rajweb · ‎01-09-2025

To change the color and border-radius of the button on the checkout page, you can add custom CSS in your theme's stylesheet or through the theme customizer.

Follow These Steps:

1. Online Store

2. Themes

3. Edit Code

4. In the Layout section, find and open theme.liquid

5. Add the CSS code inside a <style> tag before the closing </head> tag, like this:

<head>
  ...
  <style>
    .cart-drawer .cart__checkout-button {
        background-color: red !important;
        --border-offset: 0 !important;
        --border-opacity: unset !important;
        color: #fff !important;
        border-radius: 12px !important; /* Adjust to your desired radius */
    }
  </style>
</head>

result:

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

Rajat | Shopify Expert Developer
Need a reliable Shopify developer for your next project?
Our App: Productify Groups App
Email: rajat.shopify@gmail.com
Portfolio: https://rajatweb.dev

Ell_Soll · ‎01-09-2025

Thanks but I was talking about the checkout page not the cart drawer.

Ell Soll Fashion
ellsoll.com

rajweb · ‎01-09-2025

@Ell_Soll ,

Ah, I see! For customizing the checkout page, Shopify restricts direct access to the checkout's HTML and CSS for stores using the basic plan. However, you can customize the checkout page if you're on the Shopify Plus plan.

To modify the checkout button's style on a Shopify Plus store, you can add custom CSS within the checkout.liquid file (available only on Shopify Plus). Here's how:

1. Online Store

2. Themes

3. Edit Code

4. Add your CSS within the <style> tag inside the checkout.liquid file, like this:

5.

<style>
  .checkout-button {
      background-color: red;
      border-radius: 12px; /* Adjust to your desired radius */
      color: #fff !important;
  }
</style>

If you're not on Shopify Plus, the checkout page cannot be customized directly using Liquid, but you can customize the cart page and checkout settings via Shopify's admin settings (for example, changing button styles via the theme settings or using apps).

Rajat | Shopify Expert Developer
Need a reliable Shopify developer for your next project?
Our App: Productify Groups App
Email: rajat.shopify@gmail.com
Portfolio: https://rajatweb.dev

hasbi_expatify · ‎01-09-2025

Are you a shopify plus user? It is impossible for a regular shopify user to modify the checkout page. A regular shopify user will not be able to do it. If you are plus you can use some apps available in the App store, or if you are good enough at coding you can refer to the shopify checkout api, definetly will need some coding skills

If you like our solution, please like and mark it as a solution.
Don't hesitate to reach us for more Shopify solutions. Thanks 
Website: Expatify Indonesia
Email: hasbi@expatify.co.id

Ell_Soll · ‎01-09-2025

I understand.

Thanks anyway.

Ell Soll Fashion
ellsoll.com

websensepro · ‎01-09-2025

Hi @Ell_Soll
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.cart-drawer .cart__checkout-button {
    border-radius: 12px !important;
    color: #ffff !important;
    background: gray !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

ZestardTech · ‎01-09-2025

Hello @Ell_Soll ,

Here are the steps to apply the necessary changes in your Shopify store:

In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
Locate Asset > base.css and paste the following code at the bottom of the file:

.cart__ctas .cart__checkout-button {
    border-radius: 10px !important;
    background-color: skyblue !important;
}

Let me know if you need further assistance!

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 15.2 | Change the border radius and the color of the checkout button.

Dawn 15.2 | Change the border radius and the color of the checkout button.

Community Blog Articles