Jump to content

Adjust spacing between cart and quantity in header

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.ariellazoelle.com/store

I'm getting ready to launch my store and I'm having some trouble with my quantity sizing and the position of my custom icon for the cart. If someone adds 20 or more items to the cart, the number touches the cart. I'd like to introduce a little spacing between them to make it easier to read and so I can make the quantity number a bit bigger as well since that's really tiny. 


This is the code I'm currently using on the website:

// Custom Cart Icon //

.header .header-actions-action--cart .icon {
  background: url(https://static1.squarespace.com/static/5e8fc901cd14a73a8f1347b3/t/62d97302475e0e3628b75aad/1658417923056/Cart+Thicker.jpg) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;

// Text Under Cart Icon //

.header .header-actions-action--cart .icon:after {
  content: "CART";
  color: #FF61D7;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 100% !important;
  display: inline-block;

// Cart Item Number //

.icon-cart-quantity {
  font-size: 1em !important;
  font-weight: 900;
  text-align: right;
.sqs-cart-quantity {
  color: #FF61D7;

Any advice on how to fix the cart quantity spacing with the icon would be very much appreciated! Thank you!

Link to comment
  • Replies 2
  • Views 389
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.