⚠️ Before You Begin - Squarespace Animations

We recommend Squarespace Animations (FLEX) be disabled or a different animation style be used when using this plugin. Squarespace Animations can sometimes conflict with third-party code.

Super Plugin Info

Works with Squarespace 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. Add this code to Footer Code Injection

/* ----- EXAMPLE CODE FOR PREVIEW ---- */

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 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 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Transparent or Solid Header
Text Alignment (Left, Center, or Right)
Autoplay (On or Off)
Autoplay Duration

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Title Size and Color
Subtitle Size and Color
Mobile Title Size
Mobile Subtitle Size
Text Drop Shadow
Slideshow Height
Mobile Slideshow Height

Step 5. Set Up and Manage Your Slides

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 slide – all items are required for the plugin to work.

Blog Title = Title Text
Blog Image = Image
Blog Excerpt Text (Normal) = Description Text
Blog Excerpt Text (Hyperlink) = Turns Into Button

Why a blog? The blog page is simply used as a workaround to house and manage your slides. 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)
Enable: Title, Image, Excerpt
Layout: List Style

Helpful Tips - Create a Button and Transparent Header (Optional)

To create a button within each slide, add a hyperlink text at the very end of the excerpt . The plugin will turn the hyperlink into a button.
For a transparent header, set the transparentHeaderAboveSlider Footer Code Injection option to true and change the header’s color to Adaptive in header settings.

Plugin Notes

Cannot be used with other plugins that use the List Summary Block.
Squarespace's native List style will not be available.
Fonts styles will be inherited from your paragraph font settings.
Slideshow button will inherit styles set for secondary button.
Disabling Squarespace Animations when using this plugin is recommended.

Super Autoplay Slideshow (Preview Guide)