Products V2 Update: Required Action
Required Action
If your site uses custom code that targets product pages, you must migrate to Products V2 before August 30 to avoid disruption.
Summary
This article outlines important changes to the markup of product-related pages on Squarespace, including the Product Detail Page (PDP) and Product List Page (PLP), also known as the Store Page. These changes are part of a broader initiative to optimize the underlying DOM structure, improve load performance, and increase consistency across layouts and features.
If your site relies on custom CSS, JavaScript, or injected HTML that targets specific classes or attributes in product pages, you will need to update your code during the 60 day migration window outlined below.
Migration Timeline
June 30 – Migration opt-in period begins You can begin updating your site using the new markup structure. A migration tool will be available from your Squarespace dashboard under Settings > Selling > Product Settings.
August 30 – Migration opt-in period ends.
Starting in September – Automatic migration Sites that have not been manually updated will be migrated automatically. Any unsupported or outdated custom code may stop working, potentially affecting how your product pages appear or function.
Overview of Changes
The updates apply to all PDP layout types (Simple, Full, Half, Wrap), the Product List Page (PLP)/Store Page, and shared elements used across both page types.
Key Themes
-
Top-level layout elements are now identified by a single data-product-detail-layout attribute.
-
Legacy class names (e.g.,
.ProductItem-*
) have been replaced by a new standardized prefix (.product-*
). -
Deprecated
data-*
attributes have been removed. -
Structural wrappers for titles, prices, variants, and buttons have been unified across layouts.
-
Related Products has the same HTML structure as the new PLP changes
Detailed Changes by Page and Layout
Product Detail Page
Simple Layout
- Top-level
.ProductItem
element replaced bydata-product-detail-layout="simple"
elementdata-item-id
attribute removed
.ProductItem-summary
element replaced by.product-content-wrapper
element.product-details.ProductItem-details
element replaced by.product-meta
elementdata-test
attribute removeddata-current-context
attribute removed.ProductItem-details-checkout
wrapper element removed.ProductItem-product-price
wrapper element removed.ProductItem-quantity-add-to-cart
wrapper element removed- Elements
- Gallery
- All classes with the prefix
ProductItem
have been changed to use the prefixproduct
- Removed various attributes on the
.ProductItem-gallery-slides-item
elementdata-slide-index
data-image-id
data-slide-url
data-test
- All classes with the prefix
- Product Title
.ProductItem-details-title
element replaced by.product-title
data-content-field
attribute removeddata-test
attribute removed
- Product Description
.ProductItem-details-excerpt
element replaced by.product-description
element- Removed
data-content-field
attribute - Removed various classes that were previously set based on element position
.ProductItem-details-excerpt-below-price
.ProductItem-details-excerpt-below-add-to-cart
.ProductItem-details-excerpt-below-add-ons
- Removed
- Gallery
Full Layout
- Top-level
.ProductItem
element replaced bydata-product-detail-layout="full"
elementdata-item-id attribute
removeddata-layout
removed and replaced withdata-product-detail-layout
.pdp-layout pdp-layout-full-width-carousel
element removed- Removed various attributes on the
.ProductItem-gallery-slides-item
elementdata-slide-index
data-image-id
data-slide-url
data-test
- All classes with the prefix
ProductItem
have been changed to use the prefixproduct
.product-details.pdp-details
replaced with.product-meta
data-current-context
removed
.ProductItem-nav
replaced by.product-nav
.ProductItem-nav-breadcrumb
removed.ProductItem-nav-breadcrumb-link
replaced by.product-nav-breadcrumb-link
.ProductItem-nav-breadcrumb-separator
removed.ProductItem-nav-breadcrumb-link
replaced by.product-nav-breadcrumb-link
.product-details.pdp-details
replaced with `.product-metadata-current-context
removed
.product-meta-section
added- Product Title
.pdp-details-title
replaced with.product-title
data-content-field
removeddata-test
removed
.pdp-details-price
replaced with.product-price
.product-price
replaced with.product-price-value
.product-scarcity
is moved out from.product-price
and is a sibling
.pdp-details-excerpt
replaced with.product-description.hidden-md-down
and.product-description.hidden-md-up
depending on description placement.product-variant data-item-id
anddata-variants
attributes removed.variant-select-wrapper
or.variant-radiobtn-wrapper
removed depending on which Variant Display option is selected.product-quantity-input
anddata-item-id
attribute removed.product-quantity-input-wrapper
placed inside.product-add-to-cart
>.product-add-to-cart-layout-wrapper.add-to-cart-inline-md-up
(desktop - inline).add-to-cart-inline-md-down
(mobile - inline)
Half Layout
- Top-level
#pdp.pdp-layout.pdp-layout-full-bleed
element replaced bydata-product-detail-layout="half"
elementdata-item-id
attribute removeddata-layout
removed and replaced withdata-product-detail-layout
pdp-gallery-images
replaced withpdp-gallery-wrapper
class="pdp-gallery-images"
anddata-product-gallery="slideshow"
wraps all.pdp-gallery-slides
.pdp-form-wrapper.hidden-sm-down
replaced by.product-content-wrapper
.ProductItem-nav
replaced by.product-nav
.ProductItem-nav-breadcrumb
removed.ProductItem-nav-breadcrumb-link
replaced by.product-nav-breadcrumb-link
.ProductItem-nav-breadcrumb-separator
removed.ProductItem-nav-breadcrumb-link
replaced by.product-nav-breadcrumb-link
.product-details.pdp-details
replaced with.product-meta
data-current-context
removed
- Product Meta
- Product Title
.pdp-details-title
replaced with.product-title
data-content-field
attribute removeddata-test
attribute removed.pdp-details-price
replaced with.product-price
.product-price
replaced with.product-price-value
.product-scarcity
is moved out from.product-price
and is a sibling
.pdp-details-excerpt
replaced with.product-description.hidden-md-down
and.product-description.hidden-md-up
depending on description placement.product-variant data-item-id
anddata-variants
attributes removed.variant-select-wrapper
or.variant-radiobtn-wrapper
removed depending on which Variant Display option is selected
.product-quantity-input
anddata-item-id
attribute removed.product-quantity-input-wrapper
placed inside.product-add-to-cart
>.product-add-to-cart-layout-wrapper.add-to-cart-inline-md-up
(desktop - inline).add-to-cart-inline-md-down
(mobile - inline)
- Product Title
Wrap Layout
- Top-level
#pdp.pdp-layout.pdp-layout-wrap-around
element replaced bydata-product-detail-layout="wrap"
elementdata-item-id
attribute removeddata-layout
removed and replaced withdata-product-detail-layout
pdp-gallery-images
replaced withpdp-gallery-wrapper
class="pdp-gallery-images"
anddata-product-gallery="slideshow"
wraps all.pdp-gallery-slides
.pdp-form-wrapper.hidden-sm-down
replaced by.product-content-wrapper
.ProductItem-nav
replaced by.product-nav
.ProductItem-nav-breadcrumb
removed.ProductItem-nav-breadcrumb-link
replaced by.product-nav-breadcrumb-link
.ProductItem-nav-breadcrumb-separator
removed.ProductItem-nav-breadcrumb-link
replaced by.product-nav-breadcrumb-link
.product-details.pdp-details
replaced with.product-meta
data-current-context
removed
- Product Meta
- Product Title
.pdp-details-title
replaced with.product-title
data-content-field
attribute removeddata-test
attribute removed.pdp-details-price
replaced with.product-price
.product-price
replaced with.product-price-value
.product-scarcity
is moved out from.product-price
and is a sibling
.pdp-details-excerpt
replaced with.product-description.hidden-md-down
and.product-description.hidden-md-up
depending on description placement.product-variant data-item-id
anddata-variants
attributes removed.variant-select-wrapper
or.variant-radiobtn-wrapper
removed depending on which Variant Display option is selected
.product-quantity-input
anddata-item-id
attribute removed.product-quantity-input-wrapper
placed inside.product-add-to-cart
>.product-add-to-cart-layout-wrapper.add-to-cart-inline-md-up
(desktop - inline).add-to-cart-inline-md-down
(mobile - inline)
- Product Title
Product List Page and Related Products on the Product Detail Page
- All tweak related class names and styles have been removed and replaced with
.product-list
.products.collection-content-wrapper.products-list
replaced with several attributesdata-product-list-layout
data-section-width
data-header-text-alignment
data-meta-text-alignment
data-category-display-type
style
.products-flex-container
replaced with.product-list-container
.grid-item
replaced with.product-list-item
- Following classes and attributes removed from
.grid-item
.hentry
.tag-test
.author-your-name
.post-type-store-item
.article-index
.sqs-product-quick-view-button-hover-area
id
data-item-id
data-current-context
.grid-item-link.product-lists-item
replaced by.product-list-item-link
.grid-image
replaced by.product-list-image-wrapper
.grid-meta-wrapper
replaced by.product-list-item-meta
data-num-columns
attribute removed.grid-title
replaced by.product-list-item-title
.grid-prices
replaced by.product-list-item-price
.product-price
nested element removed.product-list-title-price
wraps.product-list-item-title
and.product-list-item-price
.product-scarcity
data-variant-attributes
removed.grid-meta-status
wraps.product-scarcity
and.product-mark.sold-out
.product-list-item-status
wraps.grid-meta-status
.product-variant
element all attributes removed
- Following classes and attributes removed from
Shared Elements between Product Detail Page and Product List Page
- Product Price
-
.product-price-value
wrapper element added around price text - Product Payment Method Messaging
-
data-afterpay element
replaced by.product-payment-method-messaging
element - Also moved within.product-price
element - Product Scarcity
- Only one
.product-scarcity
element now, rather than one for each variantdata-variant-attributes
attribute removed
- Only one
- Product Status
.product-status
wrapper element added.product-mark.sale
element removed- .
product-mark.sold-out
element replaced by.sold-out-status
element
- Product Variant Select
- Removed various attributes from the
.product-variants element
data-item-id
data-variants
data-is-subscribable
data-subscription-plan
data-selected-variant
data-unselected-options
data-variant-in-stock
- Moved
data-variant-option-name
attribute to the.variant-option wrapper
element
- Removed various attributes from the
- Restock Notification (Waitlist)
- Only one
.product-restock-notification
element now, rather than one for each variant - Removed various attributes from the
.product-restock-notification
elementdata-product-id
data-variant-id
.product-restock-mailing-list
checkbox name changed fromisJoinMailingList
tojoin-mailing-list-checkbox
- Only one
- Add to Cart
- Add
.product-add-to-cart
wrapper element containing subscription/one-time-payment select, quantity input, and add to cart button - Subscription/One-Time-Payment Select
.ProductItem-Subs-Otp
element replaced with.product-subs-otp
element- Removed
data-variants
attribute from.pdp-subscriptions-and-otp
element #one-time-purchase-radio
and#one-time-purchase-radio-button
value changed fromone-time-purchase-radio
toONE_TIME_PURCHASE
#subscription-radio
and#subscription-radio-button
value changed fromsubscription-radio
toSUBSCRIPTION
- Quantity Input
.product-quantity-input
element replaced with.product-quantity-input-wrapper
element- Removed
data-item-id
attribute
- Removed
- Add to Cart Button
- Changes on the
.sqs-add-to-cart-button
element- Removed
.use-form
class - Removed various attributes
data-collection-id
data-item-id
data-product-type
data-use-custom-label
data-is-subscription
data-original-label
data-form
Data-subscription-option-id
- Removed
- Added extra
.add-to-cart-text wrapper
element around the text within the.sqs-add-to-cart-button-inner
element
- Changes on the
- Add
- Product Add-Ons
- Replaced
.pdp-product-add-ons
element with.product-add-ons
element - Removed various attributes from the
.add-on-add-to-cart-wrapper
elementdata-is-product-add-on
data-current-context
- Changes on the
.sqs-add-to-cart-button
element- Removed
use-form
class - Removed various attributes
data-item-id
data-collection-id
data-product-type
data-form
Data-original-label
- Removed
- Classes within the
.icons-container
element have changed.plus-icon
→.add-icon
.add-on-add-to-cart-loading
→.loading-icon
.checkmark-icon
→.complete-icon
- Replaced
- Product Reviews
.reviewSummary
element replaced with.product-review-summary
element
Layout Examples
Please see some of these example layouts pre and post DOM changes below so you can use a tool like Diffchecker to compare the differences.
- Simple Layout
- Wrap Layout
Next Steps
- Audit your site for any custom code targeting product pages and familiarize yourself with changes described in this article.
- Migrate your site to Products V2 by going to your Site Settings > Selling > Products and follow the prompts. Complete this step between June 30 and August 30 to avoid automatic changes.
- Update your code that references the old selectors, classnames, and data-* attributes to match the new structure.
- Test your updates thoroughly in production and make adjustments as needed.
If you don’t opt in by the August 30, 2025 deadline, your site will be migrated automatically. Any unsupported or outdated custom code may stop working, potentially affecting how your product pages appear or behave.
FAQs
What exactly is changing?
We’re updating the DOM structure and changing the class and data attributes on Squarespace’s Store Page (aka Product List Page or PLP) or Product Detail Pages (PDP). These changes are foundational for enabling future improvements to commerce design and functionality.
Will I be able to preview changes before publishing?
No, the opt-in is a one-way migration and cannot be undone after you go through the process. We suggest familiarizing yourself with the changes ahead of time and setting aside time outside of peak business hours to make the update.
Is there downtime?
No, there is no site downtime.
Will shoppers still be able to checkout while I make changes?
Yes. There are no changes to checkout.
Will this only affect product pages, or other parts of my site too?
Only Product Detail Pages (PDPs) and Store Page will be affected. No other page types are impacted.
How do I know if I have custom code that’s affected?
If you’ve manually edited the custom code of your PDP or Store Page, or use custom code that targets class names on those pages, it’s likely to be affected. You’ll need to cross-check your custom code with our list of structural changes described above.
What’s the timeline for these changes?
- June 30: Ability to migrate begins. Starting June 30, you can access a migration mechanism from your Squarespace site; instructions will be provided.
- June 30 - August 30: Code migration period. Whether you signed up for the Circle migration service or you’re doing it on your own, the migration from the current to the new system must be completed within this time.
- September: All remaining sites that have not been manually updated will be migrated automatically.
It’s after June 30, 2025 and I don’t see the option to migrate. What’s going on?
Your site was automatically migrated because it had no custom code. You don’t need to take further action.
I have a 7.0 site, what does this mean for me?
7.0 sites will not be impacted by the migration, however they will not benefit from any updates or new releases we have planned for later this year. We highly recommend updating all sites from 7.0 to 7.1. You can read more about that here.
What happens if I don’t opt in by August 30?
If you don’t opt in by the deadline, your site will be migrated automatically. Any outdated custom code may stop working, potentially affecting how your site product pages appear or behave.
What’s the deadline to take action?
If you want to control the timing of your site’s migration, act before August 30.
What happens if I do nothing?
Your site will be automatically migrated after August 30. If your product pages rely on custom code for updated class names or data attributes, you may see visual issues or layout changes that require manual int.
Will my site break?
Not necessarily, but visual issues are possible if your custom code depends on classes or elements that are changing. That’s why we strongly recommend proactive updates.
Will my custom styles disappear?
Only if they target class names or structural elements that have changed or no longer exist. With proper updates, your site will look and function as expected.