Squarespace Products V2 Update: What it means for your store
If you're running an online store or working with custom code on your Squarespace site, you've probably heard whispers about the big Products V2 transition coming in August. Don’t sweat it — we're breaking down everything you need to know to keep your site running smoothly.
What is Products V2?
Simply put, Products V2 is a significant upgrade to Squarespace's e-commerce system (Commerce V2). It fundamentally reworks the underlying code structure (HTML, CSS, and JavaScript) for your Product Detail Pages (PDPs) and Product Collection Pages.
This screenshot is taken from Squarespace email listing my 3 sites which will be updated:
Squarespace products V2 - affected sites
Why the Change?
Squarespace’s goal is to make the platform faster, cleaner, and more flexible for the future — think better performance and a smoother experience for your customers.
A perfect example of this philosophy in action is how product page settings are now handled.
Previously, a behavioral setting like the 'thumbnail click action' was stored unconventionally inside a CSS style variable (e.g., --tweak-product-basic-item-click-action: None). This mixed the site's styling with its functional data.
With the new update, this same setting is now stored logically in a dedicated data- attribute. This isn't just a minor syntax change; it's a fundamental shift that properly separates a product's data from its appearance. This approach aligns with modern web standards, creating a cleaner, more robust foundation for future features.
Why Should You Care?
While the visual design of your product pages might not drastically change, the code overhaul directly impacts you if you're using:
Custom CSS/JavaScript: Any custom code you've added to tweak the look or functionality of your product pages is at risk of breaking. Old class names and IDs you once targeted have either changed or been removed.
Third-Party Plugins/Extensions: Any plugins you're using for your product pages will also need to be updated by their developers to ensure compatibility with the new structure.
Crucial Dates to Remember
New websites created after June 30, 2025, are already using Products V2.
All existing eligible websites will be automatically transitioned to Products V2 on August 30, 2025.
Once your site is upgraded, you cannot revert to the previous version.
How to Prepare for the Changes
Proactive preparation is key! Squarespace allows you to opt in early, giving you time to test and fix any issues on your terms. For precise details on the new DOM structure and data-* attributes, always consult the Squarespace Developers documentation: Squarespace Developers: Upcoming Changes (Look for "Detailed Changes by Page and Layout").
Notable Changes
Latest check on 02 Aug, 2025
Legacy class name
.ProductItem-*has been consolidated into a new standardized.product-*prefix.Deprecated and redundant
data-*attributes have been removed across all product and list pages to simplify the markup.Structural wrappers for core elements like titles, prices, and buttons are now unified across all product detail page layouts.
The entire "Add to Cart" block, including quantity and subscription options, is now contained within a single
.product-add-to-cartwrapper.The "Related Products" component has the same HTML structure as the new Product List Page changes
From my observation, Product Detail page tweak, such as click action and zoom factor, are temporarily stored as JSON within data- attributes on the wrapper .product-detail[data-layout-styles]. These attributes are programmatically removed once the page's initialization scripts complete.
Therefore, any custom code that relies on these settings must be executed immediately upon DOM readiness to capture the data before it is cleared, if these tweaks are important to you, use this code to save and access it as [data-preserved-layout-styles]
<script>
/**
* This script preserves the product page's layout configuration
* before it is removed by Squarespace's initialization scripts.
*
*/
(function() {
const el = document.querySelector('.product-detail[data-layout-styles]');
if (el) {
const styles = el.getAttribute('data-layout-styles');
if (styles) {
el.setAttribute('data-preserved-layout-styles', styles);
}
}
})();
</script>Update Custom code
This is often the biggest hurdle. You'll need to review all custom CSS and Code injection on your product-related pages and update your selectors.
Upgrade Plugins
Contact the developers of any third-party plugins you're using to ask about Products V2–compatible versions. Most reputable plugin providers should have updates available or be actively working on them.
Perform a Full Store Audit
After making your code adjustments, thoroughly test your site:
Visit every product page
Add products to your cart
Go through the entire checkout process
Check mobile layouts
Confirm shipping and tax settings
Pro Tip: Don’t just visually inspect your site. Place a test order yourself to confirm the full purchase flow is working correctly.
Use the Migration Tool
When you're confident your site is ready, navigate to your Squarespace dashboard. A migration tool will be available under:
Settings > Selling > Product Settings
My Secret Weapon: Using Web Archive to Spot What Broke
Here’s a quick tip that helped me while updating Lightbox Studio for compatibility with the new Products V2 markup.
How to Find The Differences
When things looked off, I found it incredibly useful to compare the current version of the site with a snapshot from before the changes.
Squarespace Web Archive
Step-by-step:
Go to web.archive.org
Enter your full domain (e.g., https://yoursite.com)
Open the most recent snapshot of your store/product pages
Open the same pages on your live site
Compare the versions — check for missing layout elements, broken interactions, or visual issues
Example comparison:
Archived (June 2025): https://web.archive.org/web/20250530144418/https://www.jennifertaylorartist.com/originals/p/framed-oil-painting-midnight-sapphire-tynemouth
Live:
https://www.jennifertaylorartist.com/originals/p/framed-oil-painting-midnight-sapphire-tynemouth
Note:
Archive pages are static snapshots — they won’t restore your site, but they’re great for spotting what changed. It’s also a bit of a gamble — not every page gets saved before an update hits.
The Community Effort: Developers Keeping Tabs
You're definitely not alone in this! Many talented Squarespace developers and resource providers are working hard to support the community through this transition:
Beyondspace
At Beyondspace, keeping premium plugins compatible with the latest Squarespace changes is my everyday work. You can rest assured that your tools are being updated, and we’ll be assisting users with any issues arising from the V2 update
Lightbox Studio: A powerful lightbox replacement with advanced features
Squarespace Datepicker: A calendar datepicker for Squarespace Forms and Product Forms
SQSP Themes
SQSPThemes plugins are built to be 100% Squarespace compatible and are continuously maintained to align with platform updates, including Products V2. As a purchaser and newsletter subscriber, I received their update announcement back in mid-July.
Product variant swatches to replace dropdowns with eye-catching options
Stock level indicators showing exact inventory
Countdown timers for promotions
Custom lightbox pop-ups to display additional info like size guides or terms
Squarewebsites
They are committed to maintaining and updating their plugins (e.g., Universal Filter, Custom Cart Slide Out) to keep pace with Squarespace's rapid UI updates and ensure ongoing functionality.
Universal Filter: Powerful filtering plugin to let customers filter products by category, tags, price, and more, improving search usability beyond native Squarespace search
Custom Cart Slide Out Drawer: Enables quick cart preview without leaving the current page, ideal for multi-item shopping
Lazy Summaries: Allows displaying more than the typical 30 items in summary blocks, useful for larger product catalogs
SF Digital
Run by one of the most active members of the Squarespace developer community (you might know him as paul2009), SF Digital offers a wide range of tools and plugins tailored to Squarespace 7.1 store pages. He's actively patching for the Products V2 changes
Breadcrumbs: Help users to explore your store more effectively with breadcrumbs on your product pages.
Currencies for 7.1: Show your prices in other currencies, with real-time currency conversion
Product Enquiry Form: Easily add an Enquiry button with or instead of the Add to cart button on product pages.
Wishlist: Don’t want to sell online? Allow visitors to add your products to a wishlist and submit it to you.
Variant Availability: Stimulate demand by showing your individual variant stock levels within the dropdown list.
Datepicker: Make it easy for visitors to enter dates with a popup calendar on Custom Product Forms.
Will Meyers
Known for his deep dives into Squarespace customization, Will has announced updates to his store page custom code, including adjustments to his public snippets and course materials. If you're using any of his techniques, it's worth reviewing his latest breakdown.
Rache (SquareStylist)
Rache created a CSS migration tool, it allows you to paste in your legacy CSS and it will return the updated Products V2 code to help map the old edits to the new framework.
Becca (Inside the Square)
Becca also updated her Cody chatbot to help migrate the custom code
🔗 Codey’s Products V2 Migration
Final Thoughts
Squarespace Products V2 represents an important step forward for Squarespace, promising better performance for your online store. For those of us who love to customize, it’s a perfect opportunity to refresh our skills and optimize our code.
Stay proactive, test thoroughly, and don’t hesitate to lean on the fantastic Squarespace developer community. Here's to your site running smoothly!
