Changing checkout button on Cart Drawer

Store Design
, ,

Topic summary

  • Main issue: Changing the checkout button’s color and text in the cart drawer (slide-out mini cart), plus requests to show a “Free shipping” note above the price and display discounted vs previous price in the cart drawer.

  • Guidance provided:

    • Edit theme.liquid and add CSS targeting the cart drawer checkout button; placing the CSS before the closing tag was suggested.
    • To change the button text, edit cart.liquid and modify the button label.

  • Outcome:

    • The styling fix worked after adding the CSS above ; the requester confirmed the issue was resolved.

  • Open items:

    • How to add a “Free shipping” message above the price and how to show discounted (compare-at) price in the cart drawer were not addressed; no implementation details shared.

  • Status: Partially resolved (button styling/text solved); additional display requests remain open.

Summarized with AI on December 14. AI used: gpt-5.
1

I can’t find any code that changes the color/text for the checkout button on my cart drawer. Can someone please help me with this?

Another question: Does anyone know how I can add free shipping above the price and show the discounted price compared to the previous price in the cart drawer?

I really appreciate any help you can provide.

125f7cd536a17af857415eab1d58152f.png
125f7cd536a17af857415eab1d58152f.png509×400 3.66 KB

1 Like
2

Hi @Gioily

Please, share your store URL. Thanks!

3

Hi @Gioily

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

1 Like
4

Hi @Gioily , thanks for your question.

  1. To change the background color of the checkout button, please go to Online Store > Themes > Actions […] > Edit Code > Theme.liquid file > Paste the below code at the bottom of this file:
.cart-drawer .cart__checkout-button { background: color code; color: color code; }
  1. To modify the button text, please go to Online Store > Themes > Actions […] > Edit Code > Cart.liquid file > Find the button and change the text as needed.

I hope my answer will be helpful!

Liz

5

Your solution fixed it!

Thank you so much!!

6

It worked when I put the code above the part of the file!

I appreciate your help in resolving my problem :slightly_smiling_face: