How to make the cart change color when customers add items to it

Tourist
17 0 2

I was reading a few forums and I got the idea from some shopify marketing articles. On that making the 'cart' change color when a costumer adds items to the cart, so they dont forget they added stuff and it will remind them to complete thier checkout.

How do I go about making my cart in my store change color when people add items to the 'cart' ?

for example if cart (0) then the text stays black, but when someone adds an item i want it to say, cart (1) but in red letters. How do I do that?

D.H.C
0 Likes
Shopify Staff
Shopify Staff
288 0 45

Hi Damany!

We can adjust the code of the cart icon to recognize the number of items in the cart, and turn the display to red if it is above 0. Here is my simplest suggestion:

  • Visit your theme file by going to Online Store > Themes
  • On your active theme, click the [...] button, and select Edit HTML / CSS
  • We will edit the theme.liquid, under Layouts
  • On line 196, you will find the line we should edit. This is what you should replace the whole line with:
  • <a href="/cart" class="cart-toggle site-nav__link" {% if cart.item_count > 0 %}style="color:red"{% endif %}>
  • This is very similar to what exists there already, but there is an if clause added to make the styling red, when there is more than 0 items in the cart.

What will happen is when smoeone adds something to the cart, they will see the cart pop up from the right side and have the chance to checkout right away. If they decide to minimize the cart, and navigate to another page (continues shopping), the cart icon will be red.

I hope that helps! Please let me know if you have any other questions about this.

Hugh

Happy selling! :)
1 Like
Tourist
17 0 2

YESH! it works perfectly thanks Hugh

D.H.C
0 Likes
Tourist
3 0 2

I am using the Atlantic theme and also need to know how to do this. I would like the cart icon to turn to my color code: ff1493 once items are added to the cart. I would also like to have a mini pop up for instant checkout, if they would like. Right now, it just adds to the cart but nothing happens and it doesn't show anything in the cart until you change pages so you're not even aware if it added without clicking on the cart to verify and then going back out to start shopping again.  It's just too many steps and I'd appreciate the help, if someone is willing to help a girl out. Thank you! ? XOXO

0 Likes
Tourist
42 0 1

I would also like to do this, but i can't find the bit of code that needs editing. It is not in "theme.liquid". (my theme is: Minimal)

The most relevant code I can find is:

<span class="cart-count header-bar__cart-count{% if cart.item_count == 0 %} hidden-count {% endif %} ">{{ cart.item_count }}</span>

which is in "header.liquid", but I can't figure out to change it.

0 Likes
Highlighted
Tourist
17 0 2

Did you guys try to put in the code as Hugh suggested? I did it and it worked perfectly for me. I dont think the theme type shoutld be a problem, I didnt even tell Hugh wht type of theme I had.

As far as the cart pop out / pop up, I suggest just find a theme that has that built in, that would be waaayyy easier.

D.H.C
0 Likes
Tourist
42 0 1

Like i said, i want to use the code that Hugh suggested but I can't find the relevant line of code to edit. My theme.liquid doesn't contain that line or anything similar (it only has 97 lines of code in total) so I'm still looking for where to actually put it. Any ideas? Thanks

0 Likes
Shopify Partner
2522 25 549

Hi David!

You can do it by changing your header.liquid in Sections. Locate the </style> tag at the beginning of the file, and insert this code just above it

  {% if cart.item_count > 0 %}
 	 a.cart-page-link {
    	color: red;
	} 
  {% endif %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
Tourist
42 0 1

Brilliant! That works fine. Thanks a lot Tim

0 Likes
New Member
1 0 1

Do we have an updated solution to this?

1 Like