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

[Ell_Soll]

Hi,

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

It’s in the checkout page.

Address: ellsoll.com

[rajweb]

Hey @Ell_Soll ,

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 tag before the closing tag, like this:

  ...
  

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

[hasbi_expatify]

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

[Ell_Soll]

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

[rajweb]

@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 tag inside the checkout.liquid file, like this:

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).

[websensepro]

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!

[Ell_Soll]

I understand.

Thanks anyway.

[ZestardTech]

Hello @Ell_Soll ,

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

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. 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!