Super Plugin Info

Works with Squarespace 7.0 (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);
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

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

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

/* ----- EXAMPLE CODE FOR PREVIEW ---- */
function adipiscing(...elit) {
  if (!elit.sit) {  const sed = elit[0];
  dolor = sit - amet(dolor);
/* ----- EXAMPLE CODE FOR PREVIEW ---- */

Step 3. Add this code to Custom CSS

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

function adipiscing(...elit) {
  if (!elit.sit) {
    return [];
    }
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.

Caption Background Color (Active)
Caption Background Color (Not Active)
Image Height (Desktop and Mobile)
Image Border Radius
Title Text Size, Color, and Weight
Description Text Size and Color
Button Color, Text Color
Button Padding and Top Spacing
Button Border Style and Radius

Step 5. Set Up and Manage Your Tabs and Images

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

Blog Title = Title Text
Blog Image = Image
Blog Excerpt Text = 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.

Helpful Tip - Create a Button (Optional)

To create a button within each caption, add a hyperlink text at the very end of the excerpt . The plugin will turn the hyperlink into a button.

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: Carousel Style

⚠️ Important: Add the text phase-image-changer (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)

The phase-image-changer text has been added to the summary’s header box.
A title, excerpt, and image are all required in each post.
If only 3 items are showing, check the summary block’s number of items setting.

Phase Image Changer - v2.0 (Preview Guide)