Jump to content

Change cart icon to text with quantity number text to it for both mobile and desktop - Squarespace 7.1

Recommended Posts

Site URL: https://dekanstudios.com/home

Hi there 

I would like to change the cart bag/cart icon so it says "CART" with the cart quantity in brackets next to it, as in the screenshot "CART (01)" - this used to be an option, however in 7.1 I can't see an easy change - I have tried the custom-css below, however the cart quantity doesn't sit nicely next to the text "CART" on desktop or mobile.

Thank in advance!


This is the code I have used to get to where I am now with the out of line text and quantity:


   .header .header-actions-action--cart .icon {
      height : unset;
      width : unset;
    .icon-cart-quantity {
      all : unset;
    .Cart-inner .icon--cart { /* remove cart icon */ 
      display : none;
  .Cart-inner { /* common settings */
    font-family : 'Univers+LT+55+Roman.ttf';
    color : #151515 ;
    font-weight : 400;
    line-height : 1.3;
    letter-spacing : 0.00;
    font-size : .8rem;
    vertical-align : middle;
    content: "CART";

    .icon-cart-quantity {
      background-color : ;
      padding : px;
    body:not( .header--menu-open ) .header-actions .icon-cart-quantity {
      color : ;
         font-weight : 400;
    letter-spacing : 0.0em;
          font-size : .9em;
    margin-right : 0.5em;
  .Cart-inner:before {   /* cart text */
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.00em;
        font-size : .9em;
    margin-right : 0.em;





Link to comment
  • 6 months later...
On 9/11/2022 at 9:00 PM, abbyleebonny said:

I figured it out - turns out you can change simply change it to from 'icon' to 'text' by selecting 'EDIT SITE HEADER', I'm sure this must be an update I swear it wasn't there a few months ago...


Looks like you cannot do this anymore sigh



Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.