Products V2 Styler

Squarespace changed their product page HTML in August 2025. Your old CSS broke. This generates the correct new selectors for titles, prices, variants, and add-to-cart buttons.

Why this matters

In August 2025, Squarespace rolled out a major update to their product detail pages. Class names like .ProductItem and .product-price moved under a new .pdp-details wrapper. If your custom CSS targets the old selectors, it stopped working. This tool generates styles using the correct V2 selectors so your product pages look right again.

/* Products V2 Styler — Generated by Squarespace Tools */
/* Updated for the August 2025 Squarespace product page changes */

/* Product Title */
.pdp-details .product-title {
  font-size: 32px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 16px;
}

/* Product Price */
.pdp-details .product-price {
  font-size: 22px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 16px;
}

/* Variant Selector */
.pdp-details .product-variants {
  margin-bottom: 16px;
}

.pdp-details .variant-option {
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: transparent;
}

.pdp-details .variant-option:hover {
  border-color: #000000;
}

.pdp-details .variant-option[aria-checked="true"],
.pdp-details .variant-option.selected,
.pdp-details .variant-option--selected {
  border-color: #000000;
  background: #000000;
  color: #ffffff;
}

/* Quantity Input */
.pdp-details .product-quantity-input {
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  width: 60px;
  text-align: center;
  margin-bottom: 16px;
}

/* Add to Cart Button */
.pdp-details .sqs-add-to-cart-button {
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 0px;
  padding: 16px 32px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.pdp-details .sqs-add-to-cart-button:hover {
  background: #333333;
}

/* Product Description */
.pdp-details .product-description {
  font-size: 15px;
  line-height: 1.7;
  margin-top: 16px;
}

/* Image Gallery */
.pdp-gallery {
  margin-bottom: 16px;
}

.pdp-gallery .product-thumbnails {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.pdp-gallery .product-thumbnail {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.pdp-gallery .product-thumbnail:hover,
.pdp-gallery .product-thumbnail.active,
.pdp-gallery .product-thumbnail[aria-selected="true"] {
  border-color: #000000;
}

How to add this to Squarespace

1. Copy the code above.
2. Go to Design → Custom CSS.
3. Remove any old product page CSS that targets the legacy selectors (e.g. .ProductItem, .sqs-product-quick-view).
4. Paste the new code at the bottom of the editor.
5. Click Save. Visit any product page to confirm the styles are applied.