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:

 

//CART FROM ICON TO WORD//
   .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";

    }
    
  // CART QUANTITY // 
  
    .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 TEXT//
  .Cart-inner:before {   /* cart text */
  
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.00em;
        font-size : .9em;
    margin-right : 0.em;
    
    }

 

image.png.c489b598ab48918f402eec5054e5b813.pngimage.png.4136b45999ba50b86029532fa2e3007f.png

 


 

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.