How to change colour of ‘continue shopping’ text in debut

Store Design
1

Hello again everyone,

I’ve just noticed a few things on my store that are hard to read with the background colour…

  1. Continue shopping link

  2. Remove link (from cart)

  3. View cart button

  4. Add to cart button

I’ve had a look in theme settings but can’t see a way to change these. Any (simple) advice please?!

2

@EandT ,

Please share your store URL.

3

It’s www.elizaandted.co.uk

thanks!

4

@EandT ,

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.css and paste the code at the bottom of the file.

For Add to cart button and View Cart. #000000 is the HTML code of the black color. You can find and replace the code with your desired color code.

.btn--secondary-accent {
    background-color: #000000 !important;
}

For Continue Shopping and the other One.

.text-link--accent {
    color: #000000 !important;
}

Do let me know if it works for you.

1 Like
5

Thank you! The buttons have changed colour BUT the text is now hidden (it was the same colour as what the button now is!). How can I also change the button text colour? When I hover over the button it reverts back to what it was before, is there a way to stop that (no major issue if not).

The three links (view cart, remove and continue shopping) didn’t change colour when I entered the code.

thanks SO much for your help!

6

@EandT ,

Please check now.

7

@EandT ,

I added the updated code you can change the text color and background. Text color is now set to white.

/* For Buttons */

.btn--secondary-accent {
  background-color: #9ecbc8;
  color: white !important;
  border-color: var(--color-btn-primary);
}

/* For Button Hover Effect */

.btn--secondary-accent:not([disabled]):hover, .btn--secondary-accent:focus {
    background-color: #7db9b5;
    color: white !important;
    border-color: var(--color-btn-primary-focus); 
}

.text-link--accent { 
  color: #3a3a3a !important; 
}
1 Like
8

Thank you! That has worked and looks a million times better.

Last thing, in making all of these changes, there is now a large space between product photo and title on mobile. Can you advise how to remove the extra spaces? See here for example: https://elizaandted.co.uk/collections/shop-curated-gift-boxes/products/the-coffee-lover-s-box

thanks SO much again!

9

@EandT ,

Please attach a screenshot.

10

48C4A551-CE22-4B4F-8245-E6BB6EADCBBF.png
48C4A551-CE22-4B4F-8245-E6BB6EADCBBF.png828×1792 95.1 KB

11

Please see below, hopefully you can see what I mean :slightly_smiling_face:

12

@EandT ,

Check now.

1 Like
13

Thank you!!!

14

@EandT ,

Refresh the page and check now.

15

@EandT ,

You’re welcome.