Squarespace Commerce CSS — The Complete Guide

Squarespace Commerce gives you a functional online store out of the box, but the default styling rarely matches your brand. This guide covers every CSS selector you need to customize your product pages, cart, badges, grid layout, and checkout elements. Each snippet goes in Design → Custom CSS unless noted otherwise.

These 15 techniques cover the most common commerce customization requests we see from Squarespace store owners. Every snippet is tested on Squarespace 7.1 and uses !importantwhere necessary to override the platform's built-in styles. Copy, paste, adjust the values to match your brand, and you're done.

1. Style the Add to Cart Button

The Add to Cart button is the single most important conversion element on any product page. Squarespace 7.1 renders it with the .sqs-add-to-cart-button selector, and by default it inherits whatever button style your template provides. That is almost never optimized for conversions. A high-contrast background color, generous padding, and bold typography make the button impossible to miss. Studies consistently show that making your primary CTA visually dominant increases click-through rates.

The hover state matters just as much. A subtle color shift, slight upward movement, and soft shadow give visitors tactile feedback that the button is interactive. The width: 100% declaration stretches the button to fill its container, which works well on mobile where tap targets need to be large. If you prefer a narrower button on desktop, wrap it in a max-width container or remove the width property.

The text-transform: uppercase and letter-spacing combination gives the label a confident, retail feel. Adjust the border-radius value to match your brand — 0px for sharp modern edges, 40px for a fully rounded pill shape, or the 8px shown here for a balanced soft corner.

.sqs-add-to-cart-button {
  background-color: #e63946 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 16px 40px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  width: 100%;
}

.sqs-add-to-cart-button:hover {
  background-color: #c1121f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

Result: Your Add to Cart button becomes a bold, full-width red CTA with smooth hover animation. The color shift and shadow on hover give clear interactive feedback to shoppers.

2. Style Product Prices & Sale Prices

Product pricing is the second thing shoppers look at after the product image. Squarespace 7.1 renders prices inside the .product-pricecontainer, and by default they tend to be understated — small font, muted color, easy to overlook. Increasing the font size and weight makes the price prominent and builds confidence. Shoppers who can immediately see the price are more likely to add to cart than those who have to hunt for it.

When you run a sale, Squarespace splits the display into two elements: .product-price .original-price for the crossed-out original and .product-price .sale-pricefor the discounted amount. Styling these with contrasting colors creates visual tension that draws the eye to the savings. A muted gray with a strikethrough for the original price paired with a bold red sale price is the retail industry standard for a reason — it works.

Consider bumping the sale price size to match or exceed the original price font size. This ensures the discounted number is what the shopper registers first, reinforcing the perceived value of the deal.

.product-price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
}

/* Original price (strikethrough during sale) */
.product-price .original-price {
  color: #999 !important;
  font-size: 20px !important;
  text-decoration: line-through;
}

/* Sale price */
.product-price .sale-price {
  color: #e63946 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

Result: Regular prices display large and bold in near-black. During sales, the original price shrinks and grays out with a strikethrough while the sale price appears in bold red at full size, drawing immediate attention to the discount.

3. Hide the Quantity Selector

Not every product needs a quantity selector. If you sell services, digital downloads, one-of-a-kind items, or subscription products, the quantity input adds unnecessary friction to the purchase flow. It takes up space, introduces decision fatigue, and can confuse customers who only need to buy one unit. Removing it simplifies the product page and pushes shoppers toward the Add to Cart button faster.

Squarespace 7.1 wraps the quantity input in .product-quantity-input and sometimes shows an accompanying label through .product-quantity-label. Hiding both with display: none removes them cleanly without affecting the rest of the product form. The product still adds with a quantity of one, and customers can adjust quantity in the cart if needed.

If you only want to hide the quantity selector on specific products rather than site-wide, use the product page's URL slug as a body class prefix. Squarespace adds a unique class based on the page URL, so you can scope this CSS to individual product pages.

/* Hide quantity selector on product pages */
.product-quantity-input {
  display: none !important;
}

/* Also hide the quantity label if visible */
.product-quantity-label {
  display: none !important;
}

Result: The quantity picker and its label are completely removed from product pages. Customers add one unit at a time and can adjust in the cart before checkout.

4. Style Product Variant Dropdowns

Variant selectors let customers choose size, color, material, or any other product option. Squarespace 7.1 renders these as native HTML <select> elements inside the .product-variants container. The default browser select styling looks dated and inconsistent across platforms, which undercuts the polished feel of your store. Restyling these dropdowns to match your brand typography and color scheme creates a cohesive shopping experience.

The key to custom select styling is the appearance: noneproperty, which strips the browser's native dropdown arrow. You then add your own arrow using a background SVG image positioned to the right of the input. This gives you complete control over the arrow's size, color, and spacing. The inline SVG data URI in the example below renders a clean chevron that scales with the input.

A visible focus state is essential for accessibility and usability. The :focus rule changes the border color to signal which dropdown is active, helping keyboard users and touchscreen shoppers navigate the form. Choose a focus color that contrasts with your background for WCAG compliance.

.product-variants select {
  border: 2px solid #ddd !important;
  border-radius: 6px !important;
  padding: 12px 40px 12px 16px !important;
  font-size: 15px !important;
  background-color: #fff !important;
  color: #333 !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.product-variants select:focus {
  border-color: #e63946 !important;
  outline: none !important;
}

Result: Variant dropdowns display with clean borders, custom padding, and a branded chevron arrow. The focus state highlights the active dropdown with your accent color for clear visual feedback.

5. Customize Product Image Zoom

Product images are the primary driver of online purchase decisions. Squarespace 7.1 includes a built-in lightbox zoom that activates when shoppers click a product image. The default behavior works, but the transition can feel abrupt and the overlay background may not match your brand aesthetic. Customizing the zoom interaction makes product photography feel more intentional and professional.

The .ProductItem-gallery-slides-item-image container handles the image zoom interaction. Adding a subtle scale transform on hover gives shoppers a visual cue that the image is interactive before they click. A cursor: zoom-in declaration reinforces this affordance. The .sqs-lightbox-meta selector controls the expanded lightbox overlay — darkening it to rgba(0, 0, 0, 0.85) creates a cinematic backdrop that focuses attention entirely on the product image.

Keep the hover scale subtle — 1.03 is enough to signal interactivity without distorting the layout. Larger values can cause content to jump or overlap neighboring elements, especially on product pages with tight spacing between the gallery and details panel.

.ProductItem-gallery-slides-item-image {
  cursor: zoom-in;
  transition: transform 0.4s ease;
}
.ProductItem-gallery-slides-item-image:hover {
  transform: scale(1.03);
}
.sqs-lightbox-meta {
  background: rgba(0, 0, 0, 0.85);
}

Result: Product images show a zoom-in cursor and subtly enlarge on hover. The lightbox overlay uses a darker background that puts full focus on the product image when expanded.

6. Style the Sale Badge

When you mark a product as on sale in Squarespace, a badge automatically appears on the product image using the .product-mark.saleclass. The default badge is functional but generic — a small red rectangle with white text. Restyling it to match your brand makes sales feel intentional rather than like an afterthought. A pill-shaped badge with uppercase tracking feels modern and premium, while a sharp rectangle feels more utilitarian.

This badge appears in two contexts: on the individual product detail page and in the product grid on your shop page. Both use the same .product-mark.sale selector, so one set of CSS rules styles both locations. If you need to differentiate, target the grid badge specifically with .ProductList-filter-list-item .product-mark.sale for grid-only overrides.

The border-radius: 20px value creates a pill shape. Set it to 0 for a sharp rectangle or 4px for subtle rounding. The letter-spacing: 0.1em combined with text-transform: uppercasegives the “SALE” label a typographic presence that matches high-end retail conventions.

.product-mark.sale {
  background-color: #e74c3c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 10px;
  border-radius: 20px;
}

Result: Sale badges display as bold red pills with uppercase white text. The styling applies to both product detail pages and product grid thumbnails for a consistent sale presentation across your store.

7. Style Out of Stock Products

Sold-out products present a design challenge. You want to keep them visible in your catalog for SEO and social proof, but you also need to clearly communicate that they are not currently available. Squarespace 7.1 adds a data-product-sold-out="true" attribute to sold-out product list items and disables the Add to Cart button with a [disabled] attribute and the .sqs-editable-button-state-disabled class. These hooks give you precise CSS targeting.

Applying a grayscale filter and reduced opacity to the product image is the most universally understood visual pattern for unavailability. Shoppers immediately recognize a grayed-out item without needing to read any text. The disabled button styling reinforces this with a muted background color and a cursor: not-allowed state that prevents accidental clicks and communicates the disabled state.

The transition property on the image filter ensures that if you later restock the item, the change animates smoothly rather than snapping. This is a small polish detail, but it matters when products move in and out of stock frequently.

.ProductList-item[data-product-sold-out="true"] img {
  filter: grayscale(100%);
  opacity: 0.5;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.ProductItem .sqs-add-to-cart-button[disabled],
.sqs-editable-button-state-disabled {
  background-color: #ccc !important;
  cursor: not-allowed;
  opacity: 0.6;
}

Result:Out-of-stock product images turn grayscale and fade to 50% opacity. The Add to Cart button becomes gray with a “not-allowed” cursor, making it instantly clear the product is unavailable.

8. Change Product Grid Columns

The default Squarespace 7.1 product grid typically displays 3 columns on desktop. Depending on your product catalog size and image aspect ratios, you may want 2, 4, or even 5 columns. The .ProductList-grid container uses CSS grid, which makes column overrides straightforward with the grid-template-columns property. Four columns work well for stores with many products, while two columns are better for high-end brands that want to showcase large product images.

Mobile responsiveness is critical for commerce. More than half of online shopping happens on phones, so your grid needs to collapse gracefully. The example below uses a @media query at 767px to switch to 2 columns on tablets and phones. This keeps product thumbnails large enough to see detail without requiring horizontal scrolling. The gap property controls spacing between grid items — 20px on desktop provides breathing room, while 12px on mobile conserves screen real estate.

If you want different column counts on tablet versus phone, add a second breakpoint at 480px with grid-template-columns: repeat(1, 1fr) for a single-column layout on narrow screens.

.ProductList-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px;
}
@media screen and (max-width: 767px) {
  .ProductList-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
}

Result: Your shop page displays 4 product columns on desktop with 20px gaps. On screens narrower than 767px, it collapses to 2 columns with tighter spacing for a mobile-optimized grid.

9. Cart Item Count Badge

The cart item count indicator tells shoppers how many items are in their cart without opening it. Squarespace 7.1 displays this number inside the .sqs-cart-quantityelement next to the cart icon in the header. By default, it is a plain number with minimal styling. Transforming it into a notification-style badge — a small circle with a contrasting background — makes it visually pop and follows the convention shoppers are accustomed to from major e-commerce platforms.

The badge uses absolute positioning relative to the .header-actions-action--cart container. Setting position: relative on the parent creates the positioning context, then the badge is pulled up and to the right with negative top and right values so it overlaps the corner of the cart icon. The border-radius: 50% makes it a perfect circle, while display: flex with centering properties keeps the number perfectly centered regardless of whether it is one or two digits.

Choose a badge background color that contrasts with your header. Red is the e-commerce standard because it signals urgency, but your brand accent color works just as well if it is sufficiently visible against the header background.

.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;
}

Result: The cart icon displays a small red circle badge showing the item count, positioned at the top-right corner of the icon. The number is centered inside the circle and updates automatically as items are added.

10. Style the Mini Cart Sidebar

When a shopper adds a product, Squarespace 7.1 opens a slide-out mini cart panel from the right side of the screen. This panel uses the .Cart-inner container for the content area, .Cart-title for the heading, and .Cart-checkout for the checkout button. The default styling is functional but bland. Restyling these elements to match your brand creates a seamless transition from browsing to buying.

The checkout button inside the mini cart is the final CTA before shoppers leave your site for the Squarespace checkout flow. Making it visually prominent with a dark background, uppercase text, and generous padding increases the likelihood of follow-through. The border-radius: 0 gives it a sharp, modern edge that contrasts with the softer product page elements and signals a decisive action.

The cart title styling with uppercase letters and wide letter spacing establishes hierarchy within the small panel. A light background on .Cart-inner differentiates the cart from the page content behind it, helping shoppers understand they are in a distinct context.

.Cart-inner {
  background-color: #fafafa;
  padding: 30px;
}
.Cart-title {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.Cart-checkout {
  background-color: #111 !important;
  color: #fff !important;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 24px;
}

Result: The mini cart sidebar displays with a light gray background, bold uppercase title, and a sleek dark checkout button. The panel feels like a branded extension of your store rather than a generic cart overlay.

11. Product Description Font

Product descriptions live inside the .ProductItem-details-excerpt wrapper on Squarespace 7.1. By default, they inherit the site's body font, which may not be ideal for longer product copy. A serif font like Georgia adds a editorial, high-end feel that works well for fashion, lifestyle, and artisan products. A generous line height of 1.8 prevents the text from feeling cramped and improves readability, especially on product pages where shoppers scan for specifications and details.

The letter-spacing: 0.01em adds a nearly imperceptible amount of tracking that improves legibility at smaller sizes without making the text feel spaced out. Setting margin-bottom: 1em on paragraph elements inside the excerpt ensures consistent spacing between description paragraphs, which Squarespace sometimes renders inconsistently depending on how the product description was entered in the CMS.

If you are loading a custom Google Font through code injection, reference it by name in the font-family property. Otherwise, use web-safe fonts or fonts already loaded by your Squarespace template to avoid layout shifts from font loading delays.

.ProductItem-details-excerpt {
  font-family: 'Georgia', serif;
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  letter-spacing: 0.01em;
}
.ProductItem-details-excerpt p {
  margin-bottom: 1em;
}

Result: Product descriptions display in Georgia serif at 15px with comfortable 1.8 line height and consistent paragraph spacing. The text feels editorial and refined compared to the default sans-serif.

12. Style Related Products Section

Squarespace 7.1 automatically generates a related products section below the main product content using the .ProductItem-relatedclass. This section is a major driver of cross-sells and average order value, but the default styling barely distinguishes it from the rest of the page. Adding a top border, generous padding, and a distinct section heading creates clear visual separation that tells shoppers “there is more to see.”

The .ProductItem-related-header element controls the section title, typically “Related Products” or “You May Also Like.” Centering it and applying uppercase tracking gives it section-title treatment that matches the rest of your site hierarchy. The margin-bottom: 30px provides breathing room between the heading and the product grid below.

The related products grid uses the same .ProductList-grid container as your main shop page, so any grid column CSS you applied in section 8 also affects related products. If you want a different column count here, scope your grid CSS to .ProductItem-related .ProductList-grid for independent control.

.ProductItem-related {
  padding: 60px 0;
  border-top: 1px solid #e0e0e0;
  margin-top: 40px;
}
.ProductItem-related-header {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 30px;
  text-align: center;
}

Result: The related products section gets a clean top border, spacious padding, and a centered uppercase heading. This creates clear visual hierarchy and draws attention to cross-sell opportunities below the main product.

13. Product Page Breadcrumbs

Breadcrumb navigation on product pages helps shoppers understand where they are in your store hierarchy and provides a quick path back to the parent collection. Squarespace 7.1 renders product page breadcrumbs inside the .ProductItem-navcontainer. By default, the styling is minimal — plain links with no separator customization and muted visibility. Enhancing the breadcrumbs improves both navigation usability and SEO, since search engines use breadcrumb structure to understand your site hierarchy.

The ::after pseudo-element on breadcrumb links lets you inject a custom separator character between navigation levels. A forward slash is the most universally recognized separator, but you can use a chevron (>) or a bullet (•) for a different feel. The margin values on the separator control spacing between the link text and the divider character.

The hover state transition from muted gray to near-black gives shoppers clear feedback that breadcrumb links are interactive. Keep the breadcrumb font size small (13px) so it does not compete with the product title and price for visual attention. The margin-bottom: 20px pushes the product content away from the breadcrumb row for clean vertical spacing.

.ProductItem-nav {
  font-size: 13px;
  margin-bottom: 20px;
  color: #888;
}
.ProductItem-nav a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s ease;
}
.ProductItem-nav a:hover {
  color: #111;
}
.ProductItem-nav a::after {
  content: " / ";
  margin: 0 6px;
  color: #ccc;
}

Result: Breadcrumbs display in small muted text with forward-slash separators. Links transition to dark on hover, providing clear navigation cues without visually competing with the product details below.

14. Shipping Information Styling

Shipping details on Squarespace 7.1 product pages typically appear inside accordion-style additional information blocks using the .ProductItem-additional selector. This area often contains shipping policies, return information, sizing guides, and care instructions. The default presentation is plain text with no visual container, which makes it easy to overlook. Adding a bordered card with a subtle background elevates this content and signals to shoppers that important purchase information is available.

The heading inside the additional info block uses an h3 element. Styling it with uppercase tracking and bold weight creates clear section labels that help shoppers scan for the information they need. The smaller font size (13px) for the heading and readable size (14px) for the body text create a clean information hierarchy within the compact card format.

Placing shipping information prominently on the product page reduces cart abandonment. Shoppers who know the shipping cost and timeline before they reach checkout are less likely to abandon the purchase. The margin-top: 20px provides spacing from the product form above, while the card format makes the section feel self-contained and easy to read.

.ProductItem-additional {
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 20px;
  margin-top: 20px;
  background: #fafafa;
}
.ProductItem-additional h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.ProductItem-additional p {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

Result: Shipping and return policy information appears inside a clean bordered card with a light background. Headings are bold and uppercase, while body text is sized for comfortable reading. The card format makes this essential purchase information impossible to miss.

15. Change Cart Icon Color

The shopping cart icon in the Squarespace 7.1 header is an SVG element that inherits its color from the header theme. If your header uses a dark background, the icon is typically white; on light backgrounds, it is dark. Sometimes the auto-detected color does not provide enough contrast, or you want the icon to match a specific brand color. The .header-actions-action--cart .icon--cart svg selector lets you override the SVG fill color directly.

The cart count badge (the number showing how many items are in the cart) uses a separate selector: .icon-cart-quantity. You can style its background and text color independently from the icon itself. This lets you create combinations like a white cart icon with a red notification badge, or a brand-colored icon with a contrasting count indicator.

Adding a hover state to the cart icon provides visual feedback that it is clickable. Changing the fill color on :hover to your accent color creates a smooth interaction that matches other hover effects across your site. The transition inherits from the parent element if you have set a global SVG transition, or you can add transition: fill 0.2s ease to the base SVG rule for explicit control.

/* Cart icon color */
.header-actions-action--cart .icon--cart svg {
  fill: #ffffff !important;
}

/* Cart count badge */
.header-actions-action--cart .icon-cart-quantity {
  background-color: #e63946 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700;
}

/* Cart icon hover */
.header-actions-action--cart:hover .icon--cart svg {
  fill: #e63946 !important;
}

Result: The cart icon displays in white with a red count badge. On hover, the icon color shifts to red for clear interactive feedback. Adjust the fill values to match your header theme and brand colors.

Related Tools