How To Change The Following Button Colors?

Technical Q&A
1

I am trying to change the color(HEX) of the following buttons, but having some trouble.

#1: Top-checkout-button

Legend_0-1647180268474.png
Legend_0-1647180268474.png1897×417 37.2 KB

#2: Bottom checkout button (is this a regular ‘continue’ button? I just want this ‘Checkout’ updating)

Legend_1-1647180426789.png
Legend_1-1647180426789.png1901×362 33.8 KB

#3: Pay now button

Legend_7-1647181179415.png
Legend_7-1647181179415.png1790×583 66.1 KB

I have tried adding the following CSS on theme.scss.liquid

.topCheckoutButton {
  background-color: #5600E3; // example did not work
}

Thanks

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hi @Legend ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

/* #1 */
#topCheckoutButton {
    background-color: #fb542b !important;
    border-color: #fb542b !important;
    color: #ffffff !important;
}
/* #2 */
.btn--buy.cart__checkout {
	background-color: #fb542b !important;
    border-color: #fb542b !important;
    color: #ffffff !important;
}

#3: Go to Customize > Theme settings > Checkout > Colors.

Hope it helps!

1 Like
4

Thanks @LitExtension

Solution 1&2 worked like a charm!

For the button #3 is there an alternative to editing from the theme editor? Because the theme editor seems to group and edit all the button colors for Checkout, including:

Information page - ‘continue to shipping’ button and

Shipping page - ‘continue to payment’ button.

It would be great to edit all the three checkout buttons independently if possible, similar to solutions for buttons #1 & #2. Whether that is more complex I don’t know. Thanks

5

Hi @Legend ,

This is not possible, checkout page is managed by Shopify, if you want to edit it you need to use Shopify plus.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.