How to add an accordion block to Squarespace 7.1 Product Pages
Squarespace has recently improved its Product Pages, giving website owners and designers much more flexibility when creating online stores.
Previously, Squarespace product pages had limited layout options, making it difficult to add additional content such as FAQs, shipping information, product specifications, or expandable sections.
With the latest update, Squarespace now allows you to add up to 10 additional sections below the main product section, providing much more control over your product page design and user experience.
However, there is still one limitation:
Squarespace does not currently allow you to add blocks directly inside the main Product Details section.
The Product Details section is the first section of the product page and is controlled by Squarespace. It contains the main product information, including:
Product images
Product title
Price
Purchase options
Add to cart button
Product description
While you cannot manually insert an Accordion Block directly into this area, you can use Squarespace's new product page sections together with a small amount of JavaScript to achieve the same result.
In this tutorial, we will show you how to add an Accordion Block below the product section and automatically move it into the product description area inside the Product Details section.
Table of Contents
Why add an accordion to a Squarespace Product Page
Product pages often need to display a large amount of supporting information, including:
Frequently asked questions
Delivery information
Returns and refunds
Product specifications
Care instructions
Additional product details
Adding all of this information directly into the product description can make the page feel overwhelming and difficult for customers to navigate.
An accordion creates a cleaner experience by allowing visitors to expand only the information they need.
For example:
Shipping Information
▼ Expand
Returns Policy
▼ Expand
Frequently Asked Questions
▼ Expand
This keeps the product page organised while still providing customers with all the information they need before making a purchase.
How it works
The script uses JavaScript to locate and move the accordion block.
First, it finds the first accordion block on the product page:
const accordion = document.querySelector(".accordion-block");The important part is querySelector(), this only selects the first matching element.
This means:
If your product page contains multiple accordion blocks
Only the first accordion will be moved
Additional accordion blocks will remain in their original position
Next, the script finds the product description area:
const productMeta = document.querySelector(".product-meta .product-description");This targets the description area within the main Product Details section.
Finally, the accordion is moved:
productMeta.appendChild(accordion);The accordion is removed from the additional section and inserted into the product description area.
Step-by-step instructions
Step 1: Add an Accordion block to your product page
Add a section below the product details section and then add the accordion block into the section. The click save.
Step 2: Add the JavaScript (core functionality)
Add this code to:
Custom Code → Code Injection → Footer
<!-- Copyright Primitus Consultancy -->
<!-- How to add an accordion block to Squarespace 7.1 Product Pages -->
<script>
document.addEventListener("DOMContentLoaded", () => {
const accordion = document.querySelector(".ProductItem-additional .accordion-block");
const productMeta = document.querySelector(".product-meta");
if (accordion && productMeta) {
productMeta.appendChild(accordion);
}
});
</script>
<!-- End How to add an accordion block to Squarespace 7.1 Product Pages -->
Key Takeaways
Cleaner Product Layout
Keep important information available without creating a long product description.
Better Customer Experience
Visitors can quickly access answers to common questions.
Improved Conversion Potential
Providing information about delivery, returns, and product details can help customers feel more confident purchasing.
More Design Flexibility
You can take advantage of Squarespace's new product page sections while still controlling where content appears.
FAQs
Can I add an Accordion Block directly to the Squarespace Product Details section?
No, Squarespace currently does not allow blocks to be added directly inside the Product Details section.
Does this work with Squarespace 7.1 Product Pages?
Yes, this solution works with the updated Squarespace 7.1 Product Page layout.
Will the code move all accordion blocks?
No, the script only moves the first Accordion Block found on the page.
Where should I add the JavaScript?
Add the code in Website → Pages → Custom Code → Footer.
Will this affect other pages on my website?
No, the script only runs when the required product page elements are found.
What can I use the accordion for?
You can use it for FAQs, shipping details, returns, specifications, and additional product information.
Conclusion
Squarespace's updated Product Pages provide a significant improvement for ecommerce websites by allowing more sections and greater design flexibility.
Although Squarespace currently does not allow blocks to be added directly inside the Product Details section, the new additional sections provide a practical workaround.
By adding an Accordion Block below the product section and using a small amount of JavaScript, you can move that accordion into the product description area and create a cleaner, more professional product page.
This approach combines Squarespace's built-in flexibility with custom enhancements to create a better shopping experience for your customers.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
