Move Squarespace Product Additional Info below the Product Description

Display your Squarespace product's Additional Info section directly below the product description or under the “Add to cart“ button. Use any supported Squarespace content blocks and edit everything visually without complicated custom layouts.

How to install

1. Install the JavaScript. Open your Squarespace dashboard and navigate to Website → Pages → scroll down to the bottom → Custom Code → Code Injection. Paste the code into the Footer field and save your changes.

2. Create your Additional Info Section. Navigate to a product detail page and enter Edit Mode. Add a regular page section below your product details.

3. Assign the Anchor Link. Open the section settings, find the Anchor Link field, and enter the following ID without the # symbol: product-additional-info

4. Customize the content. Add your preferred Squarespace content blocks, such as images, videos, or accordions. Save your changes.

5. Preview your product page. Open the published product page in a private browser window to see the section displayed inside the product information area.

ℹ️ Edit Mode compatibility:

• The script is intentionally disabled in the Squarespace backend so that you can continue editing the section in its original location.

• To see the repositioned section, visit your published website while signed out or use a private browser window.

Copy the code below to Code Injection ⬇️

<!-- Move Additional Info Section into the Product Details area -->
<!-- Author: Dmytro Kyselov https://dmytrokyselov.com/ I❤️☕️ coff.ee/dmytrokyselov -->
<script>
(() => {
  const SECTION_ID = 'product-additional-info';
  // Choose where to display Additional Info:
  // '.product-description' - Below the product description
  // '.product-meta'        - Below the Add to Cart button
  const TARGET_SELECTOR = '.product-description';

  const moveAdditionalInfo=()=>{try{if(window.top?.Static?.IN_BACKEND)return}catch{}const n=document.getElementById(SECTION_ID),t=document.querySelector(TARGET_SELECTOR);n&&t&&!t.contains(n)&&!n.contains(t)&&t.appendChild(n)};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",moveAdditionalInfo,{once:!0}):moveAdditionalInfo();
})();
</script>
<!-- end Move Additional Info Section into the Product Details area -->

Customize the placement

Change TARGET_SELECTOR to choose where your Additional Info section appears:

• .product-description — Display it directly below the product description (default).

• .product-meta — Display it at the bottom of the product information area, typically below the Add to Cart button.

Note: The exact position depends on your product page layout. The script inserts the section at the end of the selected container.

FAQ

• Where did Additional Info go in Squarespace 7.1?

  Squarespace moved Additional Info from the Product Editor to regular page sections on product detail pages. You can now edit your additional product information directly in the page editor.

• How do I move Additional Info below the product description?

  Install this JavaScript snippet, create a regular page section, and assign it the anchor ID product-additional-info. The snippet moves the section beneath your product description.

• Can I display Additional Info below the Add to Cart button?

  Yes. Change TARGET_SELECTOR from .product-description to .product-meta in the JavaScript snippet.

• Can I still edit the Additional Info section normally?

  Yes. The script is disabled in Squarespace Edit Mode, so you can edit your section normally.