Super Plugin Info

Works with Squarespace 70 (Brine) and 7.1
Requires Business Plan or Higher
Uses CSS Editor and Code Injection

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;
  dolor = sit - amet(dolor);
  return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : [];
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 2 (a). Add this code to Footer Code Injection - 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) : [];
}
function adipiscing(...elit) {
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

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

/* ----- 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) {
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    
/* ----- 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) {
  const sed = elit[0];
  dolor = sit - amet(dolor);
  return eiusmod.tempor(sed) ? sed : [sed];
    }
    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 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Autoplay (On or Off)
Autoplay Duration

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Slider Background Color
Slider Border Color and Radius
Image Border Radius
Subtle Drop Shadow Color
Name Title Size and Color
Quote Size and Color
Tag Meta Size and Color
Arrow Icon Size and Color
Arrow Box Color and Border Radius
Quotation Icons Size and Color
Bullet Slider Icon Size and Color

Step 5. Set Up and Manage Your Testimonials

Create a new blog page and add a new post with the following inputs. Each input will turn into a certain element within the plugin. Repeat this step for each testimonial.

Blog Title = Title Text
Blog Tag = Subtitle Text
Blog Image = Image
Blog Excerpt = Quote Text

Why a blog? The blog page is simply used as a workaround to house and manage your testimonials. You’ll link this blog page to a summary block in the next step.

Step 6. Add a Summary Block

Add a summary block to any page with these settings - this will link the summary block to the blog you just created. All settings are required for the plugin to work.

Select a Page: The Blog Page (From Step 5)
Primary Metadata: Tags
Enable: Title, Image, Excerpt
Layout: Carousel Style

⚠️ Important: Add the text aiko (in all lowercase) to the summary block’s header text box.

Plugin Notes

Font family inherits from title and body settings.
Cannot use other plugins that also use the carousel layout.
Squarespace's native carousel layout will not be available.

Troubleshooting (Plugin Not Working)

Primary metadata is set to tags.
The aiko text has been added to the summary’s header box.
A title, excerpt, image, and tag are all required in each post.
If only 3 items are showing, check the summary block’s number of items setting.

Aiko Testimonial Slider (Preview Guide)