Add to Cart & Checkout custom button colour - Spotlight Theme

English Shopify Shopify Design
, ,
1

Hi,

I have been trawling this forum for some days now and am unable to find a solution to customising the “Add to Cart” & “Checkout” buttons to background : #B90000 with White text. With the goal being something like this …

Untitled
Untitled800×212 8.78 KB

I am using the latest Spotlight Theme 15.4.0 and our site is lephonographe.org

Merci

1 Like
2

Hey @LePhonographe

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.product-form__submit {
    background: #B90000 !important;
    color: white !important;
}
.cart__checkout-button {
    background: #B90000 !important;
    color: white !important;
}
</style>

image
image1187×757 67.4 KB

image
image1165×530 34.6 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
3

Hello @LePhonographe

Go to Online Store > Themes > Actions > Edit Code > Assets > base.css
Paste your CSS at the bottom of base.css and click Save

.product-form__submit,
button[name="add"],
button[name="checkout"],
.cart__checkout-button {
  background-color: #B90000 !important;
  color: #ffffff !important;
  border: none !important;
  transition: background-color 0.3s ease;
}
.product-form__submit:hover,
button[name="add"]:hover,
button[name="checkout"]:hover,
.cart__checkout-button:hover {
  background-color: #990000 !important;
}

button .spinner .path {
  stroke: #ffffff;
}
.cart__checkout-button,
.product-form__submit,
button[name="checkout"] {
  background-color: #B90000 !important;
  color: #ffffff !important;
  border: none !important;
}

.cart__checkout-button:hover,
.product-form__submit:hover,
button[name="checkout"]:hover {
  background-color: #990000 !important;
}

image
image1291×592 158 KB

image
image1229×513 22.9 KB

1 Like
4

I added the code as instructed - with no effect on the page display for either Add to cart or Check out.

Could the Spotlight theme be using different variables for these buttons?

Thank you for your suggestion

5

unfortunately this isn’t showing any change. the code is rational but maybe it is being over-ridden elsewhere? i have no idea

6

Maybe you’re not able to add it properly, no worries at all! Feel free to share your collaborator request code in my private messages and I can do that for you!

Best,
Moeed

1 Like
7

Hello @LePhonographe
Please send me the collaborator code. I will send you a store access request and give you a proper update.

1 Like
8

Thank you - it’s 6785

1 Like
10

Hello @LePhonographe
Bro, I’ve sent you the request — please accept it.

11

collaborations not possible on our account. aargh.

thanks for trying.

12

Hello @LePhonographe

Where did you add the CSS? I can’t find it in the base.css file.

image
image1347×621 142 KB

13

base.css where you suggested

14

i’ve added a second time as i was also trying the theme.liquid script version.

if you refresh the page - your code should show

15

@LePhonographe
it working right ?

image
image1290×554 130 KB

image
image1260×619 42.6 KB

1 Like
16

yes indeed!

perfect. thank you for your trouble.

very happy : ))

17

Hello @LePhonographe
Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

1 Like
18

Indeed i will.

Gracias amigo