⚠️ 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

Step 2. Add this code to Footer Code Injection

Step 3. Add this code to Custom CSS

Step 4 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

• Summary Item Spacing

• Button Text (Applies To All Items)

Step 4 (b). Customizable Options - Custom CSS

These options are available in CSS.

• Summary Width, Margin, and Padding

• Summary Background, Border, and Border Radius

• Zoom Effect On Hover

• Image Height (Desktop and Mobile)

• Text Alignment

• Title Size and Color

• Excerpt Size, Color, Line Height, and Spacing

• Button Font Size, Font Color, Background, Padding, and Border Radius

• Button Top Spacing

Step 5. Set Up and Manage Your Content

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 item. All are required for the plugin to work.

• Blog Title = Title Text

• Blog Tag = Subtitle Text

• Blog Excerpt Box = Description Text

• Blog Tags = 1, 2 or 3 Items Per Row (See Step 6)

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

Step 6. Organizing Per Row (Assigning Tags)

You can set the number of items per row – with 3 being the max. Add a percentage to each blog post’s tags setting to start organizing your items on a per row basis – see this example.

• 100% = Apply to 1 post to make it the only item in a row

• 50% = Apply to 2 posts to make them the only 2 items in a row

• 33.33% = Apply to 3 posts to make them the only 3 items in a row

Some organization will be required as the items per row option must be applied in the order the posts were created and published.

We recommend creating all posts and then assigning % tags. As new posts are added, this will make it easier to adjust items per row.

Step 7. 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 balance (in all lowercase) to the summary block’s header text box.

Helpful Tip – Link Each Item To a Different Page or External Site

Linking each item to a page or external site is easy and can be done with Squarespace’s Source URL setting.

Go to the blog post’s settings and add in the link to the Source URL box and enable the Link Post Title To Source URL toggle – show me this.

Plugin Notes

• Font family inherits from body settings.

• Cannot use other plugins that also use the carousel layout.

• Squarespace's native carousel layout will not be available.

• You are not able to randomize the items per row order.

Troubleshooting (Plugin Not Working)

• Primary metadata is set to tags.

• The balance 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.