How to add an accordion to a Squarespace Product Page (PDP)

Adding an accordion to a Squarespace Product Detail Page (PDP) is a common request. Sellers often want to organise longer product information like specifications, shipping, or care details.

However, there are two important things to understand before you consider adding an accordion:

1. Squarespace doesn’t support this natively (above the fold)

Squarespace Product Pages are made up of two parts:

1. A structured product area, that includes the title, price, a short description and the all important purchasing elements - the variant options, the quantity selector and an Add to Cart button.

2. A full width page section below, known historically as the “Additional Info” section. This area can contain standard page sections where you can add Squarespace blocks and structure it to meet your needs.

As Squarespace does not allow you to add blocks (like Accordion Blocks) inside the structured product area, you cannot directly add an accordion in this section. Instead, it requires custom code.

2. Placement matters

Before jumping into implementation, it’s worth understanding where an accordion should sit on a PDP. This is an important User Experience (UX) decision.

Large-scale usability testing consistently shows that users make a buy/pass decision within seconds of landing on a product page.

So the area above the fold needs to prioritise:

• Product title (clear and descriptive)

• Price (visible immediately)

• Product imagery

• Variant selection

• Add to Cart button (otherwise known as the call to action or CTA)

• A short, scannable description (2–3 lines max)

If you introduce an accordion too early in that flow, you risk adding friction, hiding key information or interrupting the purchase decision. Ultimately, you could reduce your conversion rates.

Positioning an accordion

As explained above, placement matters! Putting an accordion above the purchase controls can hurt conversion.

Ecommerce UX studies suggest that the ideal UI pattern for a Product Detail Page is to have:

• Primary actions first, including the product title, price, short description, variants, quantity and call to action (CTA) - usually the Add to Cart button

• Secondary information afterwards, often in accordions, including specifications, FAQs, delivery information, care information and so on.

If you’re going to add an accordion into the PDP layout, it is important to try to keep the accordion above the fold on desktop, just below the CTA. This ensures:

• The primary decision (buy or not) happens first

• The CTA remains visible and unobstructed

• Additional information is available immediately after the CTA

Adding an accordion in this position is particularly useful when products have a lot of supporting detail but you want to keep the layout clean and focused on conversion. The accordion should allow your audience to explore deeper information, particularly for “high-consideration” products.

What should go inside the accordion

Accordions are best used for secondary information, such as:

• Specifications

• Shipping details

• Returns information

• Care instructions

Avoid placing critical purchase information (like sizing or key materials) only inside an accordion unless it’s also surfaced clearly above.

How to add the Accordion Block

Before we can position the accordion beneath the Add to Cart button, we first need to add it to the page in a place that Squarespace allows.

As mentioned earlier, blocks cannot be added inside the structured product area so we must add the accordion to the “Additional Info” page section and later use code to move it into the required position.

To do this, follow these steps:

1. Scroll down past the structured product area until you see the blue “Add Section” button.

2. Click this to add a new page section. Ensure you choose “Classic” section, not Fluid Engine. Using a Classic section is important here, as it gives us more predictable structure and makes repositioning more reliable.

3. Click the ‘+’ button at the top of the new page section and add the Accordion Block. Try to ensure the Accordion Block is placed at the very top of the section before other blocks, as this makes it much easier to target and move cleanly with code in later steps.

4. You can now add your content to the Accordion Block.

For best results:

• Keep headings short and clear

• Place the most-read section first within the accordion

• Consider whether the first section should open on load. Some UX research suggests that it helps if users see there's readable content rather than just closed handles.

• Group related information logically

• Avoid placing critical purchase info only inside the accordion

At this point, your accordion will appear full-width below the product on the page.

In the next section, we’ll relocate it into the product column so that it sits neatly beneath the Add to Cart button.

Free plugin

This plugin is completely free to use.

I build and maintain plugins like this one in my spare time. If it saved you time or solved a tricky problem, buying me a coffee helps keep them coming.

Buy me a coffee

Code to move the Accordion Block

If you’ve followed the information above, you are now ready to add the code.

Immediately below the Accordion Block, add a Code Block and paste the following code into the new block:

<!-- Place Accordion Block below Add to Cart button ---------------------------------------->
<!-- Copyright Soundfocus Digital Ltd [https://sf.digital] --------------------------------->
<!-- Use freely in your code injection. Do NOT re-publish. --------------------------------->
<script>
document.addEventListener("DOMContentLoaded",()=>{let e=()=>{let e=document.querySelector('[data-sqsp-section="product-detail"] .product-meta'),t=document.querySelector('[data-sqsp-section="classic-editor"] .accordion-block');if(!e||!t||"true"===t.dataset.moved)return;let r=e.querySelector(".product-purchase-controls-wrapper"),d=e.querySelector(".product-add-to-cart"),c=e.querySelector(".product-variants"),n=e.querySelector(".product-price"),o=e.querySelector(".product-description");console.log("PDP Accordion Block v1.0. Free plugin by https://sf.digital"),r?r.insertAdjacentElement("afterend",t):d?d.insertAdjacentElement("afterend",t):c?c.insertAdjacentElement("afterend",t):n?n.insertAdjacentElement("afterend",t):o?o.insertAdjacentElement("afterend",t):e.appendChild(t),t.dataset.moved="true"};e();let t=new MutationObserver(e);t.observe(document.body,{childList:!0,subtree:!0})});
</script>

That’s it! Save your changes and the accordion should appear just after the Add to Cart button.

Some important notes and assumptions

We know there are lots of code snippets for Squarespace, and it isn’t always easy to know which to trust. Here is some information to help you.

• This code does not use jQuery. Many code snippets load something called the jQuery library. This would slow your website load time and is unnecessary.

• The code assumes the accordion is the first Accordion Blocks inside a classic-editor page section on the PDP. You cannot add multiple Accordion Blocks. Note that it would be bad practice to load multiple accordions into the product description area anyway. If you need more information, it should be placed in the Additional Info area anyway.

• This code does not depend on the ProductItem-additional class that Squarespace plans to remove after 12 May 2026. This makes it safer to use than code snippets that rely on this temporary class.

• This code has been written to make it robust. Unlike other snippets, it does not assume a very specific DOM structure that could break quietly if Squarespace changes the structure of the page.