Jump to content

Styling the shopping cart icon and quantity

Recommended Posts

Site URL: https://capriva.shop


is it possbile to style the shopping cart icon without actually replacing it? I know you can add custom icons with CSS but this just brings me more trouble because I would need seperate versions for dark and ligth backgrounds. 

The standard shopping cart icon is fine for me, I just would like to have a bold version of it.

I also want change the color and background of the little quantity numbers besides the shopping cart. I want to have a circle around the number (still deciding on the color) and want the text to be white.

I managed to kinda get the circle right with the following CSS, but I dont now how to edit the text. 

.icon-cart-quantity {
  display: inline-block;
  background-color: green;
    vertical-align: top;
    min-width: 1em;
    margin-top: 0em;
    margin-left: 1em;
    border-radius: 1em;
    padding: .5em;



Would be greatly appreciated if someone could help out with this!

Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Design > Custom CSS

/* bold cart icon */
svg.icon.icon--cart {
    stroke-width: 3;
/* quantity color */
span.sqs-cart-quantity {
    color: red;


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

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.