Skip to content
All Answers
Commerce

How do I add a count badge to the cart icon on Squarespace?

Squarespace 7.1 shows a cart count inside the .sqs-cart-quantity element next to the cart icon in the header. By default it's minimal, but you can turn it into a bold notification-style badge.

Position it as an overlay on the cart icon using absolute positioning within the .header-actions-action--cart container for a modern e-commerce look.

.header-actions-action--cart {
  position: relative;
}
.sqs-cart-quantity {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #e74c3c;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
Generate this with our Cart Page StylerTry it free →

Related Questions

Commerce

How do I change the Add to Cart button style in Squarespace?

Commerce

How do I style the product price in Squarespace?

Commerce

How do I hide the quantity selector on Squarespace product pages?

Commerce

How do I style the product variant dropdown in Squarespace?

A little over your head?

No shame — this stuff is hard. Let the pros handle it.

Long Drive MarketingTalk to Long Drive Marketing →