Adding an accordion block to the details section of Product Pages in Squarespace (7.0, 7.1 CE & 7.1 FE)

All CSS tricks7.07.17.1 CE7.1 FECustomization tips

Mar 7

June 2024: the CSS has been updated for 7.1 to work with the latest changes to the product pages!

Are you looking to add an FAQ block, additional information through a dropdown, or anything else that could work well with an accordion block inside the brief detail section of your Product Pages in Squarespace?

Then, my friend, you’ve come to the right place.

Since this isn’t a native feature at the moment (fingers crossed it will be in the future), today I bring you a tutorial breaking down the code you need to be able to implement this customization to your current project, whether you’re working with 7.0 or 7.1.

So, if you’re interested in learning how to apply this to your site, make sure to watch the vid!

Note: this customization uses the Code Injection section of the site, so you’ll need to have Squarespace’s Business Plan or higher to be able to implement it.

Note: this customization only works with the “Simple” and “Full” product page layouts in 7.1.

Tutorial

Overview & timestamps

The trickiest part of this customization is finding the right selectors to use, to be able to accurately point to our browser WHERE the accordion block is located and WHERE we want to move it to.

After that, and thanks to a super simple script, all we’ll need to do is style things a bit further with some lines of CSS to make sure things look exactly how we want them to look:

00:00 - Intro
00:55 - Overview of what's needed inside the Product Page for 7.1
We’ll start out with Squarespace 7.1, taking a look at where we’ll need to add the accordion block we’ll be moving with our code.
02:05 - Creating the necessary script to move the accordion block into the Product Details area
Next, we’ll dive into the Code Injection section of the site and write our little script. We’ll take things step-by-step, looking through the different parts required for the code to do what we want it to do, and choose selectors that’ll help with our goal.
08:26 - Styling the Product Details section after the accordion block addition with CSS
Once we’re done moving the accordion block, we can take care of the little details – such as spacing – and tackle them with a little bit of CSS.
10:10 - Adjusting the layout for mobile devices
For the mobile version tho, we’ll need to add a bit more code in order to reorganize how things are stacked in smaller screens, to make sure the accordion block sits exactly where we want it.
17:30 - Overview of what's needed inside the Product Page for 7.0
Moving onto 7.0, we’ll take a look at how things need to be laid out inside our Product Page before bringing in the code. Spoiler alert: it’s the same layout we used in 7.1!
18:18 - Adding the script to 7.0
Next up, we’ll bring in the same script we used for 7.1. If you skipped to this part of the tutorial but would like to know how the function works, make sure to check out the video at the 02:05 mark!
19:11 - Styling the Product Details section after the accordion block addition with CSS
With the accordion block in place inside the product details section, we can now add a few lines of CSS to make sure everything’s sitting where it should.
23:44 - Checking out the mobile layout
And, last but not least, we’ll take a quick look at the mobile layout to check that we have everything in the right order.

And that’s it! Pretty cool, right? I hope you think so too.

Until next time,

Full code

Note: this customization only works with the “Simple” and “Full” product page layouts in 7.1.

June 2024: the CSS has been updated for 7.1 to work with the latest changes to the product pages!

May 2023: the CSS has been updated for 7.1 to make sure the accordion position is fully adjustable amongst the other elements!

jQuery library (if needed)

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Footer code injection section (7.1 & 7.0)

<!-- ADDING THE ACCORDION BLOCK TO THE DETAILS SECTION OF PRODUCT PAGES IN SQUARESPACE (7.0 & 7.1) -->
<script>
  $(function() {
    $('.ProductItem-additional .accordion-block').insertBefore('.sqs-add-to-cart-button-wrapper');
  });
</script>

CSS (7.1)

/*ADDING THE ACCORDION BLOCK TO THE DETAILS SECTION OF PRODUCT PAGES IN SQUARESPACE (7.1)*/
.ProductItem-details-checkout .accordion-block {
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
  #pdp .ProductItem .ProductItem-quantity-add-to-cart {
    display: flex;
    flex-direction: column;
  }
  #pdp .ProductItem .ProductItem-quantity-add-to-cart .accordion-block {
    order: 2; //use any number between 1 and 10 to reposition the accordion on mobile
  }
}

CSS (7.0)

/*ADDING THE ACCORDION BLOCK TO THE DETAILS SECTION OF PRODUCT PAGES IN SQUARESPACE (7.0)*/
.ProductItem-details .accordion-block {
  order: 5; //use any number between 1 and 10 to reposition the accordion on mobile
}

Accordion blockShop/product pageTutorial