Change color of shopping cart when quantity exceeds 0

squarespace will add a class cart-quantity-zero when there are no items in it so all you really need to do is include that. The SVG icon they use has its border and fill inheriting the current colour so you just need to set colour. 

there's something else going on on your site though, and that's that you have a dark background on your header, so the other thing you should do is set squarespaces variable that determines the navigation colour for a solid background

.cart-style-icon {
  color:blue;
  --solidHeaderNavigationColor: blue;
}

.cart-style-icon.cart-quantity-zero {
  color:red;
  --solidHeaderNavigationColor: red;
}

On 8/29/2023 at 9:47 AM, iamdavehart said:

squarespace will add a class cart-quantity-zero when there are no items in it so all you really need to do is include that. The SVG icon they use has its border and fill inheriting the current colour so you just need to set colour. 

there's something else going on on your site though, and that's that you have a dark background on your header, so the other thing you should do is set squarespaces variable that determines the navigation colour for a solid background

.cart-style-icon {
  color:blue;
  --solidHeaderNavigationColor: blue;
}

.cart-style-icon.cart-quantity-zero {
  color:red;
  --solidHeaderNavigationColor: red;
}

 

I seem to be getting syntax errors when I try to set the header variable.

you're right! if you're putting it in the websites custom css section then you will see a syntax error. that is because the Custom CSS function in SQSP is actually a LESS compiler not pure CSS and SQSP have some rules that you can't specify css variables with mixed case, they have to be all lower case. That's the syntax error that's being reported.

if you put the rules inside a style block in your site header injection it will work just fine. or in a code block in your header

<style>
.cart-style-icon {
  color:blue;
  --solidHeaderNavigationColor: blue;
}

.cart-style-icon.cart-quantity-zero {
  color:red;
  --solidHeaderNavigationColor: red;
}
</style>

and just because I don't like leaving things like this, and I can't see any other answers out there, I'm going to add this little post-script about putting mixed case css variables in your Squarespace site's custom Css.

For educational purposes only! I would just reference these variables in the site header injection in a style block... 

so as mentioned above the custom css you fill in is actually run through a custom LESS compiler, which is a fairly ancient version (1.3.3). this does mean that you can do some cool LESS related things in there if you wanted to, but it does also mean that you get into all sorts of bother as more modern CSS features trip over the LESS features. 

You might have seen this problem when you try to put in a css calc() and you get a syntax error, the solution to which is often to escape the calc's body. something like this for example.

max-width:calc(~"var(--sqs-site-max-width,1000px) + calc(2 * var(--sqs-site-gutter,3vw))")

Well in this case our syntax problem is because SQSP have added a rule (I don't think it's a standard LESS rule anyway) that says that css variables MUST be lower case. This means that you can't set some of their css variables - as we have found out in this post. (it's only some, there are plenty of their own variables - usually the newer ones - that are all lower case and ok, e.g. the two properties in my calc example above).

so.... to get round the rules, we can use features of LESS (v1.3.3 anyway) that allow us to inject code dynamically, as long as the general rules of css are adhered to. To do this, we'll create a mixin (a sort of function that allows us to inject code into another class) that takes the variable name as a string and injects it.

the slight hack here is that you do have to have it inject in the standard format of property:value so we need a dummy css variable that gets set first and the rest of our dynamic code appends a second css variable on the end. the mixin gets declared once then you can use that throughout your css to inject css variables inside your classes. Note that this isn't CSS we're putting in here. this actually gets processed and rendered as pure css in your final site css.

/* this is a LESS mixin that takes the css prop name
and value and injects it after our dummy value */
.sqspvar(@prop,@value) {
  --dummy:(~"0; --@{prop}: @{value}");
}

/* you can then refer to the mixin inside other classes
by calling it with the property name you want and the value) */
.cart-style-icon {
  .sqspvar("solidHeaderNavigationColor","blue");
  color: blue;
}

and TADA! this then outputs our css with our mixed case css variable in it (and our dummy one which doesn't matter).

/* below this line is the output that appears in your site.css */
/*! Squarespace LESS Compiler  (less.js language v1.3.3)  */
.cart-style-icon {
    --dummy: 0;
    --solidHeaderNavigationColor: blue;
    color: blue
}

I think this would be worth the hacky nature of it if you were trying to override lots of SQSPs css variables in your custom css although I'd probably advise against that in general as most of them can be changed in the main theme colours anyway, but you never know. someone might find this useful!