Squarespace Store Page Update - April 2025

Further changes are planned for August 2025 ("Products V2")

This guide describes the changes that Squarespace made to store and product pages in April 2025. Squarespace plan to roll out further, more substantial structural changes to store and product pages in August 2025. These changes are known as "Products V2" and will have wide-reaching consequences for all custom code and plugins on Squarespace 7.1 websites. You'll find more details about the August 2025 update here.

On 17 April 2025, Squarespace starting pushing out a major change to both the Product Detail Page (PDP) and the Product List Page (PLP).

The Product List Page (PLP) - also known as the ‘Store’ page - is the page that shows a collection of products. It’s like a storefront. It typically displays products in a grid, with basic info like product images, titles, prices, and sometimes tags or categories. You can optionally show ‘Add to Cart’ buttons too.

The Product Detail Page (PDP) is the page that shows all the details for a single product. When a visitor clicks on a product from the PLP (Product Listing Page), they land on the PDP. The PDP typically includes large product images and a long form product description.

Who is this guide for?

I’m a software developer and Squarespace Expert who has been working with Squarespace for over 15 years. I’ve written this technical guide for anyone who needs to know the changes to class, attribute and structure on Squarespace product pages. If you are writing CSS or JavaScript to customise a PDP or PLP then this guide may help you to understand why your customisations broke after 17 April 2025.

Why is Squarespace making these changes?

Squarespace is investing in their commerce tools to improve both the performance and the features offered. Part of this effort involves moving from legacy technologies (used when commerce was launched in 2016) to a modern software development kit. This required some changes to classes, data attributes and some minor structure changes.

Looking at the changes in detail, they suggest Squarespace is moving toward a more configurable page that allows for easier customisation of product pages through the Section Settings and Site Styles panels, without requiring custom code.

A summary of the PDP changes

The most notable changes include:

• Structural changes: The main product section has been wrapped in a new container div with numerous configuration-based "tweak-" classes. The section ID and primary classes have changed.

• Styling approach: There's a shift from direct CSS classes to a more configurable approach using:

• Multiple "tweak-" prefixed classes

• Inline CSS custom properties (variables) for styling configurations

• Resource updates: CSS and JavaScript files have been updated with new versions.

• Core component stability: Despite these changes, the core components (gallery, product info, add-to-cart button) maintain similar class and attribute structures, preserving basic functionality.

Itemised list of PDP changes

Class Changes

Removed Classes:

Some classes were removed from the main product section as part of Squarespace's shift toward using the new "tweak-" prefixed classes for styling that specific section.

• content-collection (from main section)

• collection-type-products (from main section)

• content-collection (from main product section)

• collection-type-products (from main product section)

• background-width--full-bleed (from main product section)

• section-height--medium (from main product section)

• content-width--wide (from main product section)

• horizontal-alignment--center (from main product section)

• vertical-alignment--middle (from main product section)

The structural alignment classes still exist in other sections of the page.

Added Classes:

• product-detail-section (to main section)

• tweak-product-basic-item-width-full

• tweak-product-basic-item-text-alignment-left

• tweak-product-basic-item-product-subscription-display-radio

• tweak-product-basic-item-product-subscription-border-shape-square

• tweak-product-basic-item-gallery-aspect-ratio-23-standard-vertical

• tweak-product-basic-item-gallery-design-slideshow

• tweak-product-basic-item-click-action-none

• tweak-product-basic-item-hover-action-zoom

• tweak-product-basic-item-add-to-cart-inline

• tweak-product-basic-item-add-to-cart-mobile-standalone

• tweak-product-basic-item-thumbnail-placement-below

• tweak-product-basic-item-navigation-breadcrumbs

• tweak-product-basic-item-description-position-below-price

• tweak-product-basic-item-description-position-mobile-below-add-to-cart-button

• tweak-product-basic-item-product-variant-display-dropdown

• tweak-product-basic-item-content-alignment-center

• tweak-product-basic-item-gallery-placement-left

Data Attributes added

• data-json-schema-section attribute

• Inline style with CSS custom properties:

  • --tweak-product-basic-item-product-subscription-border-thickness: 1px

  • --tweak-product-basic-item-gallery-design: Slideshow

  • --tweak-product-basic-item-click-action: None

  • --tweak-product-basic-item-hover-action: Zoom

  • --tweak-product-basic-item-image-spacing: 5vw

  • --tweak-product-basic-item-carousel-arrow-size: 3vw

  • --tweak-product-basic-item-image-zoom-factor: 1.75

  • --tweak-product-basic-item-gallery-width: 55%

  • --tweak-product-basic-item-form-width: 100%

The addition of the data-json-schema-section attribute is potentially significant and suggests that Squarespace is implementing more structured data for SEO or feature purposes.

A summary of the PLP changes

Squarespace also made significant structural and styling changes to their Product List Page. Key changes include:

• New wrapper structure: A new wrapper div with multiple "tweak-" classes has been added between the content div and the products section, creating a more structured hierarchy.

• CSS Variables implementation: Shifted from direct classes to CSS custom properties (variables) for styling configuration, similar to the PDP update pattern.

• Schema Structure: Added the data-json-schema-section attribute, suggesting improved data validation and structured data support.

• Configurable UI: Changed from hard-coded design classes to a more modular approach with specific product-list related configuration options.

• Grid enhancement: Added column specification data attributes to improve responsive grid control.

Itemised list of PLP changes

Class Changes

Removed Classes from Main Section:

• content-collection

• collection-type-products

• background-width--full-bleed

• section-height--medium

• content-width--wide

• horizontal-alignment--center

• vertical-alignment--middle

Added Classes:

• product-list-section (to main section)

• Multiple "tweak-" prefixed classes in new wrapper div:

  • tweak-products-text-alignment-left

  • tweak-products-image-aspect-ratio-11-square

  • tweak-products-nested-category-type-top

  • tweak-products-category-title

  • tweak-products-add-to-cart-button

  • tweak-products-price-show

  • tweak-products-header-text-alignment-middle

  • tweak-products-breadcrumbs

  • tweak-products-width-inset

Data Attribute Changes

Added Attributes:

• data-json-schema-section="" (to main section)

• Inline style with CSS variables on wrapper div:

  • --tweak-products-image-text-spacing: 1vw

  • --tweak-products-columns: 3

  • --tweak-products-mobile-columns: 1

  • --tweak-products-gutter-column: 2vw

  • --tweak-products-gutter-row: 3vw

  • --tweak-products-width: inset

  • --tweak-products-add-to-cart-button: true

• data-num-columns="3" (to grid-meta-wrapper elements)

Changed Attributes:

• data-current-styles content completely restructured

The information in this post is based on a diff of the before and after states of these pages, after the update was pushed to a live Squarespace website. The tests were performed with a fixed set of style settings, which may be different on your site.