Image 1 of 2
Image 2 of 2
FEATURES
Everything you need. Nothing you don’t.
Pure, purposeful, battle-tested on 800+ Squarespace sites worldwide.
Instant Summery Block Scrolling
Vertical scrolling by the visitor triggers horizontal movement through your sections no extra plugins, no page rebuilds, no layout changes required.
Automatic Mobile Fallback
A built-in media query auto-switches mobile and tablet visitors to a standard vertical layout. Your site works perfectly on every device without extra config.
Single Copy Paste Install
CSS and JavaScript arrive as one snippet. Paste once into Code Injection and you’re done. No npm, no build tools, no FTP, no developer invoice.
Zero Performance Impact
Pure vanilla CSS + JavaScript, zero external libraries. Your Core Web Vitals and Google PageSpeed scores are completely unaffected.
Edit Mode Stays Completely Normal
The effect only fires on your published site. Inside Squarespace’s editor you can drag, rearrange, and design sections without any disruption.
One-Time Fee, Lifetime Updates
Pay $35 once and own it forever. Every time Squarespace updates, we update the plugin. You’re covered indefinitely, no renewal ever required.
WHITE GLOVE SUPPORT
We don’t disappear after you pay
Every Squarespell customer gets real human support before, during, and after install.
Free Installation Help
Not sure which Section IDs to target? Send us a message after purchase. We’ll walk you through it step by step or install it on your site for you, free of charge.
Step-by-Step Documentation
A detailed written guide plus a video walkthrough showing exactly where to go in Squarespace. Everything arrives in your purchase confirmation email immediately.
Real Human Email Support
Every support message goes to a real person who knows Squarespace inside-out. We respond within 48 hours typically much faster.
Lifetime Updates Included
When Squarespace updates their platform, we update the plugin. Your one-time $35 purchase is protected indefinitely, no renewal ever required.
No coding required · Squarespace 7.1
FAQ
Common questions answered
-
Squarespace 7.1 does not include a native infinite scrolling carousel for summary content like products or blog posts. The default Summary Block only displays content in a static grid. To create an infinite auto-scrolling carousel in Squarespace, you need to add custom CSS and JavaScript either written yourself or using a pre-built plugin like the Squarespell Infinite Summary Carousel.
-
To create an infinite carousel in Squarespace: (1) Add a Summary Block and set it to Grid layout. (2) Find your section's unique ID using the "Find Squarespace Ids" Chrome extension. (3) Add CSS that converts the grid to a flex row and defines a translateX(-50%) scroll animation. (4) Add JavaScript in Footer Code Injection that clones all cards to double the list length, fixes lazy-loaded images, and triggers the animation after cloning is complete.
-
For Summary Block content (products, blog posts, testimonials), the Squarespell Infinite Summary Carousel is a highly effective solution. It uses native Squarespace blocks no app installs and includes CSS and JavaScript that create a seamless, GPU-accelerated infinite loop with hover-to-pause, image lazy-load fixing, and independent scoping for multiple carousels on the same page.
-
To make a Squarespace Summary Block scroll automatically: set it to Grid layout, add CSS that applies display:flex and a CSS animation moving the row left by 50% indefinitely, then add JavaScript that clones all summary items to double the list so when the animation completes 50% of its travel, it arrives back at the original starting position, creating a seamless loop.
-
Yes. Multiple carousels can run on the same Squarespace page without conflicting if each carousel's CSS is scoped to its section's unique data-section-id attribute. The Squarespell plugin includes separate CSS blocks for each section, and the JavaScript targets all Summary Block lists on the page automatically.
-
Images appear blank in cloned carousel cards because Squarespace uses lazy loading the real image URL is stored in a data-src attribute and only written to src when the element scrolls into view. The fix is to read the data-src value and write it to src before cloning. This must be done in JavaScript before the cloneNode() call.
-
Yes. The infinite scroll carousel works on mobile devices. The CSS animation uses will-change: transform for GPU acceleration, and card width can be reduced with a media query for smaller screens. The plugin documentation includes a ready-to-use mobile responsive CSS snippet.
-
To change the scroll speed of a Squarespace infinite carousel, find the CSS animation property and change the duration value. For example: animation: shopScroll 40s linear infinite change 40s to a lower number for faster scrolling or a higher number for slower scrolling. 20s is fast, 80s is slow.
Still have a question? Email us →
ALSO FROM SQUARESPELL
