Super Plugin Info

Works with Squarespace 7.1
Requires Business Plan or Higher
Uses Code Injection and CSS Editor
Only Compatible With Simple Layout

Note: This plugin used the Squarespace’s accordion block, so only text can be added to each tab. The tabs will not show in quick view as Squarespace will only show the original description that was inputted.

Step 1. Add this code to Header Code Injection

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

Step 2. Add this code to Footer Code Injection

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

Step 3. Add this code to Custom CSS

/* ----- 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) : [];
    }
function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 4. Customizable Options

These options are available in Custom CSS.

Tab Title Size
Tab Description Size
Tab Description Color
Tab Padding
Tab Spacing Area
Tab Order (Before or After Normal Description)
Tab Width (On Mobile)
Tab Title Color (Select and Non-Selected)
Tab Background Color (Select and Non-Selected)
Tab Border Radius (Select and Non-Selected)
Tab Border Style (Select and Non-Selected)

5. 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.

The following inputs in the accordion block will turn into the tab and description.

Accordion Title = Tab Title
Accordion Description = Tab Description

⚠️ Important: You must also have content in the product’s main description box. If this is left blank, Squarespace will hide the area and the accordion block will not be able to show.

Plugin Notes

Only compatible with main product page simple layout.
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.

Product Description Tabs (Preview Guide)