In August 2025, Squarespace rolled out the V2 product page update and broke custom CSS on thousands of stores overnight. If your product pages suddenly look wrong, it's not your fault. Squarespace completely replaced the DOM structure for product detail pages, which means every CSS selector targeting the old layout stopped working.
This guide maps the old selectors to their new equivalents, explains the new .pdp-details structure, and gives you production-ready CSS for the most common product page customizations.
What Changed in the V2 Update
The old product page used a .ProductItem wrapper with nested classes like .ProductItem-details, .ProductItem-gallery, and .product-price. The new V2 layout replaces all of these with a completely different hierarchy built around .pdp-details as the primary container.
Squarespace did not provide a migration guide. They did not deprecate the old selectors gradually. They flipped a switch and the old classes disappeared from the rendered HTML. If you had custom CSS targeting .ProductItem, it became dead code instantly.
Old Selectors vs. New Selectors
Here is the mapping for the most commonly customized product page elements. If you have existing CSS, search for the old selectors and replace them with their V2 equivalents.
The new naming convention is more consistent (everything is BEM-style under .pdp-details), but the transition was brutal for anyone with existing customizations.
Common Customizations with V2 Selectors
These are the customizations that break most often after the update. Here is each one rewritten for the V2 structure.
/* Product title styling */
.pdp-details__title h1 {
font-size: 28px !important;
font-weight: 500;
letter-spacing: -0.5px;
text-transform: none !important;
}
/* Price styling */
.pdp-details__price {
font-size: 20px !important;
color: #1a1a1a;
font-weight: 400;
}
/* Sale price - original price strikethrough */
.pdp-details__price .original-price {
text-decoration: line-through;
color: #999;
font-size: 16px;
}
/* Add to Cart button */
.pdp-details__cta-button {
background: #1a1a1a !important;
color: #ffffff !important;
border: none !important;
border-radius: 0 !important;
padding: 16px 32px !important;
font-size: 14px !important;
letter-spacing: 1px;
text-transform: uppercase;
transition: opacity 0.2s ease;
}
.pdp-details__cta-button:hover {
opacity: 0.85;
}The Add to Cart button is the most critical element to restyle because Squarespace's default V2 button styling is more opinionated than the old version. It now includes default border-radius and padding that might conflict with your brand.
/* Product gallery - image grid layout */
.pdp-details__gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
/* First image takes full width */
.pdp-details__gallery .gallery-item:first-child {
grid-column: 1 / -1;
}
/* Variant selector dropdown */
.pdp-details__variants select {
appearance: none;
background: #fff;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding: 12px 16px;
font-size: 14px;
width: 100%;
cursor: pointer;
}
/* Product description spacing */
.pdp-details__description {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #e5e5e5;
line-height: 1.7;
}The gallery grid layout is new to V2. The old product page used a single image with thumbnail navigation. The V2 layout supports a masonry-style grid, which is more modern but requires different CSS if you want to customize the thumbnail arrangement.
Responsive Fixes for V2
The V2 layout also changed the responsive breakpoints. The product info section and gallery now stack at a different width than the old layout. If your mobile product pages look off, you likely need to update your media queries.
/* V2 mobile layout adjustments */
@media screen and (max-width: 768px) {
.pdp-details {
flex-direction: column !important;
}
.pdp-details__gallery {
grid-template-columns: 1fr;
margin-bottom: 24px;
}
.pdp-details__info {
padding: 0 !important;
}
.pdp-details__title h1 {
font-size: 22px !important;
}
.pdp-details__cta-button {
width: 100% !important;
}
}Keeping up with Squarespace's selector changes while maintaining a custom product page design is an ongoing maintenance burden. Our product page styler generates V2-compatible CSS based on your design choices, so you don't have to manually find and replace selectors every time Squarespace ships an update.
The V2 update was disruptive, but the new selector structure is actually cleaner than what came before. Once you update your CSS to target the .pdp-details hierarchy, your product pages will be on stable ground. Until the next breaking change, anyway.
