Shopping Cart Page Styler

Customize every part of your Squarespace cart page — item rows, prices, quantity inputs, checkout button, and more. No more guessing at CSS selectors.

Why this matters

Squarespace cart CSS selectors are notoriously hard to find. The default cart page often clashes with carefully designed stores, and the platform gives you zero built-in styling controls. This tool gives you the exact selectors and clean CSS so your cart matches your brand — no trial and error.

/* Shopping Cart Page Styles */
.cart-container {
  background: #ffffff;
}

.cart-title {
  font-size: 24px;
  font-weight: 700;
}

.cart-row {
  border-bottom: 1px solid #e5e5e5;
}

.cart-row .cart-row-title,
.cart-row .cart-title a {
  font-size: 16px;
  font-weight: 600;
}

.cart-row .cart-row-price,
.cart-row-price .sqs-money-native {
  color: #111111;
}

.cart-row-quantity input,
.cart-row .cart-row-quantity input[type="text"] {
  border: 1px solid #cccccc;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  text-align: center;
}

.cart-subtotal,
.cart-subtotal .sqs-money-native {
  font-size: 18px;
  font-weight: 700;
}

.cart-checkout-button,
.sqs-editable-button.cart-checkout-button {
  background: #000000 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  padding: 14px 28px !important;
  border: none !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.cart-checkout-button:hover {
  opacity: 0.85;
}

.cart-row-remove a,
.cart-row-remove .icon {
  color: #999999;
  transition: color 0.2s ease;
}

.cart-row-remove a:hover,
.cart-row-remove .icon:hover {
  color: #111111;
}

.empty-cart-text,
.cart-empty-text {
  color: #888888;
  font-size: 16px;
}

How to add this to Squarespace

1. Copy the CSS above.
2. Go to Design → Custom CSS.
3. Paste the CSS at the bottom of the editor.
4. Click Save. Visit your cart page to see the changes.
5. Tip:If a selector doesn't match your template, right-click the element in your browser, choose Inspect, and check the class name. Some templates use slightly different selectors.