Help changing colour of my Checkout button in Flow theme

Store Design
, ,

Topic summary

A user needed help changing the checkout button color in Shopify’s Flow theme.

Solutions Provided:

Multiple support teams offered CSS-based solutions:

  • PageFly-Victor: Add custom CSS in theme.liquid file before the </body> tag, targeting .btn.cart-button--checkout with background color styling

  • GemPages: Modify theme.min.css file by adding CSS for .ajaxcart__footer.cart__checkout class with specific background color (#6581d2)

  • LitCommerce: Edit theme-cart.min.css in Assets folder, adding CSS for .cart-button--checkout with customizable background and text colors

All solutions involve accessing the theme code editor through Online Store → Theme → Edit code and inserting CSS snippets into specific files.

Resolution: The issue has been resolved. The original poster confirmed the problem was sorted and thanked all contributors.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Does anyone know how to change the checkout button colour in Flow theme?

Thanks in advance.

2

Hi @slidingaround

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag → save.

PageFlyVictor_0-1675392527078.png
PageFlyVictor_0-1675392527078.png1365×651 47.6 KB

input.btn.cart--button-checkout { background: red !important; }

PageFlyVictor_1-1675392527213.png
PageFlyVictor_1-1675392527213.png443×130 2.36 KB

Hope that my solution works for you.

Best regards,

Victor | PageFly

1 Like
3

Hello @slidingaround

It’s GemPages support team and glad to support you today.

You can follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.min.css file and paste the following code below:

.ajaxcart__footer .cart__checkout{
   background: #1658d2;
}

Let us know how it works for you.
Best regards,
GemPages Support Team

1 Like
4

Hi @slidingaround ,

Please go to Actions > Edit code > Assets > theme-cart.min.css file and paste this at the bottom of the file:

.cart--button-checkout {
    background: #000 !important;
    color: #fff !important;
}

you can change the color code as you like, it will work fine

1 Like
5

Thank you everyone that posted a solution, appreciated.

This is now sorted.

1 Like