Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Styling the shopping cart icon and quantity



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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

2 answers to this question

Recommended Posts

  • 0

Add to Design > Custom CSS

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


Link to post
  • 0

Is it possible to have a pop up with a preview of the item that has been added to the cart?


Example attached:

Screen Shot 2021-05-06 at 8.07.24 PM.png

Link to post

Create an account or sign in to comment

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

  • Create New...