Product Accordion Block (Preview Guide)


Super Plugin Guide

  • Works with Squarespace 7.0 (Brine) and 7.1

  • Requires Business Plan or Higher

  • Uses Code Injection and CSS Editor

  • Only Compatible With Simple Layout

Note: The accordion block will not show in quick view as Squarespace will only show the original description that was inputted.


Step 1 (a). Add this code to Footer Code Injection - For Squarespace 7.1

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 1 (b). Add this code to Footer Code Injection - For Squarespace 7.0 (Brine)

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function lorem(ipsum, dolor = 1) {
  const sit = ipsum == null ? 0 : ipsum.sit;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2. Add Accordion Block To Product

Edit the product and add an accordion block to the Additional Info box. Additional Info can be found right below the title and description when editing the product’s details.

⚠️ Note: The accordion block will be placed directly below the product’s price. Followed by the normal description, quantity input, add to cart button, and product add ons.


Step 3. Customizable Options

Add in your content and customize the accordion block like normal with Squarespace settings.


Plugin Notes

  • Only compatible with main product page simple layout.

  • Accordion block will display right below the product’s price.

  • Accordion block will not display in quick view.


Troubleshooting (Plugin Not Working)

  • Ensure the code has been added to Footer Code Injection box and not the Header Box.

  • You must have content in the product’s main description box or Squarespace will hide the area.

  • If using 7.0, AJAX loading must be disabled in site style settings.

Previous
Previous

Product Description Tabs (Preview Guide)

Next
Next

Easy Header Navigation Icons (Preview Guide)