Accordion block in product details in Squarespace

Moves an accordion block to product details in Squarespace. Supports Products v2.

SquareSpace 7.1

• Requires Business plan or higher

Free

Get code

Why use

Moves an accordion block from page to product description for more details above the fold

Code

<!-- 🔌 Plugin: MOVE ACCORDION BLOCK TO PRODUCT DETAILS (by opsquare.co) — START -->
<!-- 🙏 Free to use — please don’t share or repost the code — share the link instead. -->

<!-- 🔹 JavaScript -->
<script> 
document.addEventListener('DOMContentLoaded', function () {
  
  /*** Plugin options ***/
  const accordionSectionContainer = null; // section ID for global accordion block, by default blank
  
  /*** Plugin options end, stop editing ***/
  
  const inEditMode =
    (typeof Squarespace !== 'undefined' && Squarespace.SITE_EDITOR_ON) ||
    document.documentElement.classList.contains('sqs-edit-mode') ||
    window.self !== window.top; // inside editor iframe

  if (inEditMode) return;
  
  const targetContainer = document.querySelector('.product-meta') || document.querySelector('.ProductItem-details');
  
  if (targetContainer !== null) {
    let accordionBlocktoMove;
    if (accordionSectionContainer) {
      accordionBlocktoMove = document.querySelector(`${accordionSectionContainer} .sqs-block-accordion`);
    } else {
      accordionBlocktoMove = document.querySelector(`.sqs-block-accordion`);
    }

    if (accordionBlocktoMove) {
      accordionBlocktoMove.classList.add('accordion-block--moved');
      targetContainer.appendChild(accordionBlocktoMove);
      targetContainer.classList.add('product-meta--has-accordion');
    }
  }
});
</script>

<!-- 🔹 CSS -->
<style>
/* Panel with icon */
.accordion-block--moved .accordion-item__click-target {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  font-size: 16px;
}
 
/* Panel that will be revealed */
.accordion-block--moved .accordion-item__description {
  max-width: 100% !important;
  padding-bottom: 15px !important;
  font-size: 14px;
}
</style>

<!-- 🔌 Plugin: MOVE ACCORDION BLOCK TO PRODUCT DETAILS — END -->

How to install

Different block on each product page

Create an accordion block in product additional info (it will be moved to product details)
Add code to Code Injection
Block will be moved automatically

One global block for all pages

Create an accordion block in the footer, and give section an ID, e.g. #shop-details
Set accordionSectionContaineroption to the given ID
Hide created section for users:
```
body:not(.sqs-edit-mode) {
 #shop-details {display: none}
}
```
It will still be visible in admin area

Options

Option	Value	Description	Example
accordionSectionContainer	CSS selector for ID	ID for global (footer) section to move	#shop-details