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 ---- */
  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;
  dolor = sit - amet(dolor);
  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 (a). Customizable Options - Footer Code Injection

These options are available in Footer Code Injection.

Animation Number Duration
Text Before Numbers (Example: $) - Applies To All Numbers
Text After Numbers (Example: .00) - Applies To All Numbers
Comma Separator Option For 1000+ Numbers

Step 4 (b). Customizable Options - Custom CSS

These options are available in Custom CSS.

Background Color
Drop Shadow Color
Border Style
Inner Padding
Spacing Between Text
Text Alignment
Items Per Row
Title Size and Color
Numbers Size, Color, and Weight
Description Size and Color

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

Blog Title = Title Text
Blog Excerpt Box (Hyperlink) = Animated Number (See Step 6)
Blog Excerpt Box (Normal Text) = Description Text

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 a later step.

Step 6. Create The Animated Number

To create the animated number, add your number text first in the excerpt box and add #number as a link to the text - see this example.

⚠️ Important: Do not include non-number characters (like $, %, etc) with the number text. There is an option in Footer Code Injection to add these. Next, add a line break (hit enter) and add your description text.

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: None
Enable: Title, Excerpt
Disable: Image
Layout: Carousel Style

⚠️ Important: Add the text number-counter (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 number-counter text has been added to the summary’s header box.
The #number has been added to the number as a link.
Do not include any non-number characters like $ or % with the number text.
A title and excerpt are required in each post.
Primary metadata is set to none and summary image is disabled.

Animated Number Counter (Preview Guide)