Major Squarespace Updates You Should Know in 2025
If you manage a Squarespace store, blog, or website (especially one with custom code), then staying on top of platform updates is critical. In this post, we’ll walk through three key pieces of news from the Squarespace Forum/Announcements and explain how you should respond.
1. New Store/Product List Page Layouts (Improved Grid + List)
What’s new
Squarespace has introduced major changes under the hood for the Product List Page (PLP) / Store Page (sometimes called “Store Page aka Product List Page”) in their latest update (Products V2) for version 7.1.
The update affects layout elements: legacy class names (such as .ProductItem-*) have been replaced by .product-*.
A new attribute, data-product-id, is added to each .product-list-item element.
A new header element .product-list-header now wraps elements like breadcrumbs, titles, and categories
Also, the update is automatically applied: websites on 7.1 will undergo migration if they haven’t already.
From the Help Center: store pages (version 7.1) now support up to 10,000 products per page (versus 200 in earlier versions) and improved category navigation.
Why it matters
If you have custom CSS or JavaScript targeting the old classes, attributes, or layout structure, your custom code may break. Several forum posts already alert developers about this
From an SEO/UX standpoint, improved layout flexibility and performance can help your store pages load better, scale better, and offer more product filtering/navigation, all helpful for conversion and user experience.
With 10,000 products supported, growing stores (like your clothing business) are less constrained than before.
It’s a signal that Squarespace is transitioning away from legacy markup, and so staying on top should guard against your site breaking in the future.
What can be done (action plan)
Review your site's custom CSS or JS that targets. ProductList. ProductItem or similar legacy selectors. Refactor to use the product's (or the new product's) attributes when necessary.
Check your store pages immediately after making changes: layout, product cards, filtering, and mobile rendering.
Utilize the layout options, * Grid vs. List, depending on your theme (or emulate a list layout with custom CSS). Previously, for example, users would use CSS like this:
.ProductList-item {
width: 100% !important;
display: flex;
}
There are options to control how many columns/rows and the spacing, making this look completely international with your design/brand feel.
Have your category navigation set if you carry a large number of products/categories.
Keep an eye out for any visual bugs (esp. in mobile view).
Keep updated documentation: If you have dev docs or onboarding docs for your site (or if you build sites for clients), reference this layout change now in your “Squarespace updates” section.
2. Custom Font Uploads Made Easier (and What to Watch)
What’s new
Squarespace continues to improve the ability to upload custom fonts, manage them, and use them via CSS. While the feature has existed, recent forum threads (e.g., “Uploading a custom font” and “Why can’t I upload custom fonts anymore?”) point to evolving behavior.
Example: a user noted that font files uploaded previously worked, but recently the file picker behavior changed / URL retrieval is different.
There is a consistent process: upload the font file (OTF, TTF, WOFF), then apply using @font-face in Custom CSS, then assign via typography settings or CSS selectors.
Why it matters
Your brand’s typography is key to visual identity, especially given your upcoming clothing business and branding (Fun Films / Tong universe). Using unique fonts helps differentiate.
Fonts that don’t load properly can hurt user experience (fallback fonts, layout shifts) and even SEO indirectly (UX signals, readability).
If upload behavior has changed, sites using older custom-font tricks may face failures or broken styles.
What you can do (action checklist)
If you haven’t already, upload your brand’s custom font(s) (maybe you have a stylized “Shomsher’s Chai Er Dokan” heading font) in Squarespace via the Files section, then reference them via CSS.
@font-face {
font-family: 'YourBrandFont';
src: url('https://static1.squarespace.com/…/YourBrandFont-Regular.ttf');
}
body, h1, h2 {
font-family: 'YourBrandFont', sans-serif;
}
Test different formats (TTF/OTF/WOFF) and ensure licensing allows web embedding.
After you upload, verify in several browsers/devices that the font renders correctly and degrades nicely. Note: The requester says the upload UI is sometimes naughty based on the browser
Check the current custom font. CSS: don't break hard-coded paths/functions for new updates.
Make sure your font doesn’t sacrifice legibility (especially for mobile) and fits with your brand palette (you mentioned ink/mist/verdant/oak/rust as base colors).
Capture your font strategy in a style guide and site setup docs now so future editors know how to keep the fonts consistent.
3. Right-Click in Fluid Engine / Circle Labs Changes
What’s new
Fluid Engine is Squarespace’s modern drag-and-drop editor launched for version 7.1. It's more flexible than the classic editor.
The “Right-Click” feature in Fluid Engine, allowing users to right-click on elements to access actions like duplicate/copy/paste/delete, is a part of the experimental features provided via Circle Labs (Squarespace’s beta-feature sandbox) under the “Circle Labs / Right-Click in Fluid Engine (R504)” announcement.
Users can toggle certain lab features on/off via Settings → Circle Labs.
Some forum users report issues or ask about how to enable/disable these features. e.g., “Which Circle member can adjust this setting?
Why it matters
If you use Fluid Engine (which you likely do for your Squarespace store and site customizations), then the addition of right-click support significantly boosts productivity—quicker duplication of sections, easier layout modifications, and faster iteration.
But because it’s a “Labs” / beta feature, enabling or disabling it may change site behavior. If you built site logic that depends on right-click features or sequences of editing, you may face surprises.
Some custom code or custom UI injections (for example, your custom address info, injected menus, and sticky headers) may have interactions with Fluid Engine features. Having right-click enabled may require you to revisit custom JS or CSS for compatibility.
What you can do (action checklist)
In your Squarespace site, go to Settings → Circle Labs and check whether “Right-Click in Fluid Engine” or a similar toggle is enabled or disabled. Make the decision based on your team/workflow: if you’re comfortable, enable it; if you’re relying on stable behavior, you might wait.
After enabling/disabling, test the site editor experience: right-click on blocks, sections, and images, and is it behaving as you expect? Are there any layout or style disruptions?
Review any custom scripts or CSS you’ve injected for your site (you mentioned custom JS for address info, badge cleanup, and accordion dropdowns) and test them to ensure compatibility with the editor changes.
Document the decision: whether you enabled right-click or not, note it in your site-maintenance log so future editors know the context.
If you use multiple roles (e.g., you collaborate with other designers/developers), ensure they know whether this feature is in use so there is consistency in the editing experience.
4. Block Transforms Starting with Shape Block (Labs Feature)
What’s new
Squarespace has introduced “Block Transforms,” starting with the Shape Block in Fluid Engine/version 7.1. This update allows designers to apply transform effects (scale, rotate, skew, move) directly to blocks using the new Transform controls in the block editor.
The feature is being rolled out via Circle Labs as part of the “Block Transforms” announcement (R487).
The Shape Block now supports transform controls (for example, rotating a shape, scaling it, skewing it, and repositioning it) more easily than via custom CSS alone.
Why it matters
This gives you much more creative flexibility to design custom layouts and visual interest. For example, you could skew a shape block to act as a visual divider, rotate a shape behind text, or scale a shape for a hero backdrop.
For your site (especially with your branding and universe-themed use case), this means you can create bespoke visuals without overly heavy custom code, making your site more visually unique.
Because it’s a newly introduced Labs feature, there may be quirks or compatibility issues (especially with custom CSS/JS, responsive behavior, or older code tweaks). It’s best to test thoroughly and decide whether to use it now or wait for the full release.
What you can do (action checklist)
In Settings → Circle Labs, see if you’ve enabled ‘Block Transforms’ (or similarly worded). First of all, consider whether you actually want to implement this feature.
Perhaps play with the shape block itself, if it's enabled on the one you are working with (add one and click edit and look for transform values/controls: scale, size, offset).
Make small test sections: use a rotated rectangle in the background of a heading or fill an image masked with a circle to build perspective.
Check what happens to the transforms on mobile and responsive; nothing should overlap or be transported into nowhere.
For anyone with some custom CSS that was doing the rotation/skewing for you using transform: rotate(), you should consider whether you can replace it using one of the built-in transformation controls instead. Keep maintenance in mind.
Document this in your design system/style guide if you’re using transformable shapes and what you prefer to do with them (e.g., which rotations/skews match your brand visuals).
Keep an eye on site performance: complex transforms could drive a lot of work for rendering on mobile. Use them thoughtfully.
Why All Four Matter Together
As someone working with a custom-rich Squarespace store (you have a clothing business, custom layouts, JS injections, and branding), these updates combine into a meaningful shift:
Layout changes (store pages) affect the front-end customer experience and your custom code
Font upload changes affect your branding and typography consistency
Editor changes (Fluid Engine / Labs) affect your workflow, speed, and editor experience behind the scenes
Block Transforms give you new creative tools to elevate your visuals and brand differentiation
For your business, staying ahead of these means you not only avoid surprises (broken layouts, weird font failures, and editing chaos), but you can also turn these updates into advantages, improved user experience, brand differentiation, and faster site iteration.
Proposed Next Steps for Your Site
Here are some practical next steps you can act on this week:
Audit your store page(s)
Go to your main Store page in Squarespace → check layout: list vs. grid, how many columns, and spacing.
Mobile test: look for layout breaks, column collapse, and image scaling.
Review any custom CSS/JS targeting product list elements: update selectors to .product-* if needed.
Check for category navigation behavior.
Review custom fonts
Upload your brand font(s) (if not already done).
Add @font-face CSS, assign to headings and subheadings via CSS or theme font settings.
Test across browsers (Chrome/Firefox/Safari) & devices (desktop/mobile).
Check fallback fonts and licensing compliance.
Check editor settings & workflow
Navigate to Settings → Circle Labs. Decide: enable “Right-Click in Fluid Engine” or leave it disabled if you prefer stable behavior.
Communicate this decision to anyone else editing your site.
Perform an editor test after enabling/disabling: duplicate a section, right-click behaviors, and save/publish.
Cross-test your custom JS (address info injection, sticky header, badge cleanup) to ensure no conflicts.
Update your internal documentation
Create or update a “Platform Update Log” for your site: note when these features were evaluated/implemented, what custom code was updated, and any known quirks.
If you offer this service (or will offer it to clients), include a “Squarespace Update Advisory” note so future work is smoother.
Consider optimization opportunities
With the new store layouts, you might test a “List” view for some product categories (for example, your new ‘Fun Films’ tees) and compare conversion metrics (bounce rate, add-to-cart).
With custom fonts in place, assess visual consistency and brand strength; perhaps update headings across blog and product pages.
With improved editor workflow (right-click), plan for faster A/B testing of layout ideas (e.g., hero banner changes, category filters, product card design).
Final Thoughts
These updates from Squarespace may seem like “just backend tweaks,” but for a developer/designer, they carry real implications: broken custom code, disrupted layouts, or missed opportunities for better design and workflow.
Since you’re working on a clothing business and have given thoughtful attention to custom layout, injected JS, and branding, now is a great time to proactively audit your site, adapt to the changes, and leverage these updates rather than do reactive troubleshooting.
If you like, I can prepare a tailored guide for your exact site setup (your template, your custom CSS/JS injections, your branding palette), outlining exactly what CSS selectors will likely need updating and producing a “pre-migration checklist” doc you can tick off. Would you like me to build that?
Frequently Asked Questions
-
Not always. The new Squarespace Product List Page update caused a change in the structure & class names of shop layouts. If you have custom CSS or JavaScript built around old classes, then you may see broken layouts or styling. You should audit and refine your selectors, test across various devices, and document any changes in order to ensure the continued smooth operation of your store.
-
More predictable, more foundational custom font uploads with Squarespace 2025 update. It’s still “web fonts and upload them in the settings or CSS,” but there seems to be a bit of different handling of URLs and files that some users have noticed: These enhancements make it easier to keep consistency between devices and browsers, minimize loading errors, and enable better control over typography for brand consistency.
-
Right-click is enabled through the Fluid Engine, Available in Squarespace Circle Labs. With one click, Right-Click offers quick options to duplicate, copy, paste, or delete blocks. It’s built to make editing workflows faster and more creative. But as a beta feature, it might not be perfect yet and sometimes cause some not-quite-consistent behavior, especially if your site runs injected scripts or has advanced customizations. Designers would also be wise to test it thoroughly before staking its use in production.
-
Block Transforms Block Transforms empower users with a new level of creative control inside the editor. Now you can scale, rotate, skew, and translate Shape Blocks visually with no code! This is useful for when you want to do something more tricky with layout or clever design. This feature allows brands that rely on creative visuals or storytelling to explore new design ideas while keeping the editing process streamlined.
-
The best medicine is preventive maintenance.” Regularly inspect your store pages, test custom features after every major update, and maintain internal documentation of how the site design system is composed. Check your Circle Labs settings, swap in fonts and CSS as required, and make sure the layout holds up on mobile. Keeping your site fresh also prevents technical errors and keeps you ahead of the curve on Squarespace’s latest performance and design features.
