Move Accordion Block to Product Details

Move an accordion block in the Additional Info area into the Product Details area.

View Code ↓

---

Squarespace e-commerce has become a formidable alternative to Shopify in the past few years. While Shopify offers more overall features, this increases the complexity of the platform. The simplicity and ease-of-use of Squarespace still makes sense for many new and boutique online stores.

A highly requested featured that Squarespace should consider is the ability to add accordions into the product details area.

While this isn’t natively available in Squarespace (yet?), we can accomplish this with a little bit of Javascript and CSS.

The Code

This code moves an Accordion Block in the Product’s Additional Info area to the Product Details area, only if it’s the last block. Paste this code into the Product Collection’s Settings » Advanced » Page Header Code Injection area.

<!-- Move Accordion Block To Product Details -->
<script>
  window.addEventListener('DOMContentLoaded', function(){
    let accordion = document.querySelector('.sqs-block-accordion:last-child');
    if (!accordion) return;
    let excerptOld = document.querySelector('.ProductItem-details-excerpt');
    if (excerptOld) {
      excerptOld.append(accordion);
      return;
    }

    let excerptNew = document.querySelector('.hidden-sm-down .pdp-details-excerpt, .hidden-md-down .pdp-details-excerpt');
    let excerptNewUp = document.querySelector('.hidden-sm-up .pdp-details-excerpt, .hidden-md-up .pdp-details-excerpt');
    if (!excerptNew || !excerptNewUp) return;
    function moveAcc() {
      if (window.innerWidth >= 768) {
        excerptNew.append(accordion);
      } else {
        excerptNewUp.append(accordion);
      }
    }
    if (excerptNew) {
      moveAcc()
    }
    window.addEventListener('resize', moveAcc)
  });
</script>

This code first waits until the page’s DOM Content has loaded then runs a function. The function:

1. Selects the last block in the Additional Info area only if it’s an accordion block and set’s it to the variable accordion.

2. Selects the excerpt elemnt from the Product Details area and sets it to the variable, refBlock

3. It checks if both accordion and refBlock variables exist and if they both do, we move the accordion after the refBlock

Accordion Placement

The code above places the accordion after the product excerpt, however, you can place the accordion elsewhere.

Replace, .ProductItem-details-excerpt, in the code above with any of the following options.

.ProductItem-product-price - Price

.ProductItem-details-excerpt - Excerpt

.product-quantity-input - Quantity

.sqs-add-to-cart-button-wrapper - Add to Cart Button

Using the Same Content

Sometimes you might want to use the same content within each Accordion Block. If so, it’s can be annoying to have to recreate the accordion block for each product.

Check out my Accordion Pro plugin, which allows you to pull the same accordion content into multiple Product Detail areas.