7.1 Heading Cart: Replace SVG with Text

Site URL: https://tuna-ladybug-3hgy.squarespace.com

Hi there – 

I'd like to replace the cart icon with words that say "Cart" with the number adjacent. 

site: https://tuna-ladybug-3hgy.squarespace.com

pass: brineintopedro

Hi. It looks like you solved this?

Yes, I added a button to the navigation and changed the style – couldn't figure out how to put it to the left of the cart quantity... here's the code for anyone who wants it!

/* Remove cart icon */ 
  header#header span.Cart-inner {

  }
  svg.icon.icon--cart {
    display: none;
    
  }

  /* Style cart quantity */ 
  header#header .icon-cart-quantity {
  
    color: #E3E2E0;
    background-color:#151515;
    text-align:center;
	padding:8px;
    font-size: .7em;
    font-family: 'circular-book';
    position:absolute;
   right:!important;
    left:0!important;
    top:0!important;
    bottom:0!important;

  }

/* Style button */
.sqs-block-button-element, .image-button a, .header-actions .btn, .header-skip-link {
    color: #151515;
  font-family: 'circular-book';
  text-transform: uppercase;
    font-size: .7em;
    letter-spacing: .1em;
    font-weight: 400;
  background-color:transparent!important;
}

Quote

couldn't figure out how to put it to the left of the cart quantity

Try the following code. Make a copy of your code somewhere.

/* Begin style header cart link */

  /* reset to baseline to build our effect */
  
    .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 : circular-book;
    font-size : 0.7em;
    vertical-align : middle;
    
    }
    
  /* cart quantity */ 
  
    .icon-cart-quantity {
    
      background-color : #151515;
      padding : 8px;
      
      }
      
    body:not( .header--menu-open ) .header-actions .icon-cart-quantity {
    
      color : #E3E2E0;
      
      }
      
  .Cart-inner:before {   /* cart text */
  
    content : 'CART';
    color : #151515;
    font-weight : 400;
    letter-spacing : 0.1em;
    margin-right : 0.5em;
    
    }
    
  /* End style header cart link */

This is for v7.1 and specific to the OP's needs.

Let us know how it goes.

@creedon worked like a charm, ty!

@creedon Would you be so kind to let me know how I could get it to appear as "Cart (0)" for example - just with the quantity in brackets? and also make it appear the same on mobile? with the "Cart" text left of the quantity "(0)"? Thank you so so much!

@artisanalies

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hi there,

I'm trying to achieve the same thing here, but the code isnt working for me.

site URL: https://ladybug-chicken-2tp4.squarespace.com/

site pass: *3iRgpCKJ-8@bBZ7

any help would be amazing, thank you

@ivnisigoth316

You have several effects going on at once related to the cart. Modifying the cart icon and adding a cart CTA.

If you could describe what desired effect you are trying to achieve perhaps we can guide you.

Hello everyone,

I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it.

Here is the code:

@media screen and (min-width:100px) {
span.sqs-cart-quantity:before {
    content: "Panier (";
    font-size: 1rem !important;
}
span.sqs-cart-quantity:after {
    content: ")";
}
header#header svg.icon.icon--cart {
    display: none;
}
.header .header-actions-action--cart .icon {
    width: auto !important;
}
.icon-cart-quantity {
    position: static !important;
  font-size: 0.9rem !important;
}}

Thanks for your help!

On 12/22/2021 at 5:50 PM, nicolusse88 said:

Hello everyone,

I've been able to replace the icon with text as well, but my text is stacked now and I can't find how to fix it.

Here is the code:

@media screen and (min-width:100px) {
span.sqs-cart-quantity:before {
    content: "Panier (";
    font-size: 1rem !important;
}
span.sqs-cart-quantity:after {
    content: ")";
}
header#header svg.icon.icon--cart {
    display: none;
}
.header .header-actions-action--cart .icon {
    width: auto !important;
}
.icon-cart-quantity {
    position: static !important;
  font-size: 0.9rem !important;
}}

Thanks for your help!

Can you share link to your site? We can check easier

@tuanphanabsolutely maisonmariet.fr

On 12/26/2021 at 5:41 PM, nicolusse88 said:

@tuanphanabsolutely maisonmariet.fr

Hi. I see it is fine here. Did you solve or which screen size do you see problem?

Hi Tuanphan. No I didn't. On mobile and tablet it doesn't look right when the orientation is vertical

On 12/28/2021 at 7:49 PM, nicolusse88 said:

Hi Tuanphan. No I didn't. On mobile and tablet it doesn't look right when the orientation is vertical

Try adding to Design > Custom CSS

@media screen and (max-width:1024px) {
.header-actions.header-actions--right {
    flex: 0 0 100px !important;
    position: relative;
    left: -50px;
}
}