Simple Guide To Add A Scrolling Logos Squarespace Plugin

Last updated 13/03/2026

The scrolling logos Squarespace plugin allows you to create a smooth, continuous logo carousel that showcases partners, clients, or sponsors. It is ideal for building trust, adding social proof, and creating a more dynamic, professional looking website without complex development.

---

Short on time? Skip the code and section IDs. The Scrolling Logos Carousel Plugin gives you two rows of logos scrolling in opposite directions, and you can update your logos any time without touching code.

---

FREE Scrolling Logos Squarespace Plugin

Why Add Scrolling Logos to Your Squarespace Website?

If you want your website to stand out, adding scrolling logos is a great feature to showcase multiple brand partners, clients, or images in a single, sleek line. This type of animated feature is visually engaging, eye-catching, and an excellent way to create a unique user experience. With just a few steps, you can easily integrate a scrolling banner of logos on your Squarespace site. Here’s how it’s done…

Step 1: Create a Gallery Section

Start by adding a gallery section to your Squarespace website. You can do this by clicking on the ‘Add Section’ button, then Images and choosing the grid gallery layout option in ‘edit section’. Upload all the logos or images you want to feature within your gallery.

Step 2: Find Your Section ID

To create the scrolling effect on your specific gallery section, you need to locate the section ID of the gallery you just added.

Here's how to find your section ID:

1. Install the Chrome extension called Squarespace ID Finder.

2. Navigate to your gallery section on your live site.

3. Use the ID Finder tool to reveal the unique section ID.

💡 Tip: Finding section IDs and editing code can be fiddly, especially if you want to change your logos later. If you'd rather skip this part, my Scrolling Logos Carousel Plugin is built on Squarespace's native list section, so there are no IDs to hunt down.

---

Step 3: Add Custom Code to Your Page Header Code Injection

Keep your section ID copied down somewhere. Now add the code to create the scrolling animation effect.

1. Go to your page settings by clicking the gear icon (⚙) next to your page in the Squarespace editor.

2. Click on Advanced, then Page Header Code Injection.

3. Paste the following code into the header like below:

Page Header Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> // Prevent script from running inside Squarespace Editor if (!window.location.href.includes('?edit') && !window.Squarespace || window.Squarespace === undefined) { $(document).ready(() => { let addLeft = '<div id="slider-left" class="slider"><div class="slide-track" id="slides-left">'; const interval = setInterval(() => { let imgs = $('section[data-section-id="YOURSECTIONID"] img'); if (imgs.length > 0) { for (let j = 0; j < 10; j++) { imgs.each(function () { addLeft += '<div class="slide"><img src="' + $(this).attr('data-src') + '" alt="" /></div>'; }); } addLeft += '</div></div>'; $(addLeft).prependTo('section[data-section-id="YOURSECTIONID"]'); clearInterval(interval); } }, 100); }); } </script> Copy

Step 4: Replace the Section ID

In the code snippet above, you’ll see your section ID in two places. Replace this placeholder with the section ID you found using the Squarespace ID Finder.

Step 5: Add The CSS Code

To style your scrolling logo gallery you need to add the following CSS to your site’s Custom CSS section:

Go to > pages > website tools > custom CSS and paste the following code.

IMPORTANT: Remember to add your gallery section ID in the CSS area where indicated.

---

/* Logo Scroller Animation By The Square Genius */ /* Logo Slider Background color */ section[data-section-id="YOUR SECTION ID HERE"] { background-color: #fff !important; } /* Adjust scrolling animation */ @keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-200px * 30)); } /* To adjust speed, change the animation duration in the code below */ } /* Image styles */ section:has(.slide-track) .slide img { height: 60px; /* Adjust logo height here */ } /* Slider container styles */ .slider { height: 60px; margin: auto; overflow: hidden; position: relative; width: 100%; } /* Slide track animation and layout */ #slider-left .slide-track { animation: scrollLeft 100s linear infinite; /* Modify the 100s value to adjust scrolling speed */ display: flex; } /* Slide container */ section:has(.slide-track) .slide { height: 60px; padding: 0 15px; /* Adjust padding to control space between logos */ } /* Hide extra section chrome inside slider section only */ section[data-section-id="YOUR SECTION ID HERE"] .section-border, section[data-section-id="YOUR SECTION ID HERE"] .content-wrapper { display: none; } /* Adjust margin around slider */ div#slider-left { margin-top: 20px; /* Adjust top margin here */ margin-bottom: 20px; /* Adjust bottom margin here */ } Copy

Customizing the CSS to Fit Your Preferences

You can easily customize the appearance and animation of the scrolling logos by updating the CSS. Look out for the greyed out notes on the CSS as a guide to make your own customisations.

Preview and Adjust

Once you've added the code, preview your site to see the scrolling logos in action. If needed, adjust the logo height, padding, or animation speed in the CSS styles.

Here’s how it should look

Free Code vs the Scrolling Logos Plugin: Which Should You Use?

The free code above works well if you're comfortable with a bit of code and only need a single row. Here's how the two compare:

Free code

• One row of scrolling logos

• Uses a gallery section, and you'll need a Chrome extension to find its section ID

• Code goes in two places, with your section ID pasted in each

• Updating later means going back into the code

Scrolling Logos Carousel Plugin

• One or two rows, scrolling in opposite directions

• Built on Squarespace's native list section, so there are no section IDs to find

• Add, remove or reorder logos in the normal Squarespace editor

• Installs in minutes

---

Scrolling Logos FAQs

• Does Squarespace have a built-in logo carousel?

  Not a scrolling one. Squarespace has a Scrolling block for scrolling text, but no built-in way to continuously scroll a row of logos. You need custom code or a plugin.

• How do I add scrolling logos to Squarespace?

  Add your logos to a gallery section, then add custom code to make them scroll, as shown in the steps above. Or use a scrolling logos plugin, which does it without code or section IDs.

• Can I have two rows of scrolling logos?

  Yes, with the Scrolling Logos Carousel Plugin you can have two rows scrolling in opposite directions. The free code in this tutorial creates a single row.

• Is it easy to update the logos later?

  With the free code, you update the images in your gallery section. With the plugin, your logos sit in a native Squarespace list section, so you can add, remove or reorder them in the normal editor.

Why This Feature Is Worth It

Adding scrolling logos to your Squarespace site helps create an engaging, interactive experience. It’s a creative way to display multiple images or logos without overwhelming the page. Plus, it’s a subtle yet effective way to highlight partnerships or important visuals.

Summary

By following these steps, you can easily implement a scrolling banner of logos on your Squarespace website. This feature is perfect for improving visual appeal and giving your brand’s credibility a boost. For more customization options and tips, keep experimenting with the code styles.

Let me know how your animated scrolling logos turned out!

---

Did I help you? Consider buying me a coffee as thanks!

---

Other articles you may be interested in:

• Add clickable hotspots to images on Squarespace

• Create a Before and After Slider For Squarepsace

• Genius Squarespace Filter Vs Universal Filter Plugin

• Add Multiple Header Buttons On Squarespace

• Complete Guide To Squarespace Filtering

• Add a Simple Squarespace Timeline

• How to add filters to a Squarespace blog

---

Quick View

Squarespace Scrolling Logos Carousel Plugin

$30.00

Upgrade Your Site With a Squarespace Scrolling Logos Carousel Plugin

Add a smooth, professional scrolling logos carousel to your Squarespace website with this powerful and easy to install plugin.

If you want to showcase partner logos, sponsors, press features, or client brands, this plugin transforms a standard Squarespace gallery into a beautiful auto scrolling logo carousel that instantly elevates your website.

Designed specifically for Squarespace 7.1, the plugin creates seamless scrolling logos on Squarespace with customisable speed, layout and hover interactions.

View The Demo

Simple installation with full guide.

(This plugin is only compatible with Squarespace 7.1 sites.)

Get This Plugin

Quick View

Genius Squarespace Filter Plugin

$59.99

Looking for an easy way to add filters to Squarespace?

The Genius Squarespace Filter Plugin helps you turn busy portfolio pages, blogs, event pages and galleries into a cleaner, easier to browse experience.

Visitors can quickly filter your content by category, topic, service, location, resource type or any labels you choose, instead of scrolling through everything.

Perfect for portfolios, blog archives, event listings, galleries (grid, masonry & strips only) resource hubs and larger content collections, this plugin gives your visitors a smoother way to explore your content without the cost or complexity of custom development.

Button Portfolio Filter Demo ➜

Dropdown Portfolio Filter Demo ➜

Gallery Filter Demo ➜

Blog Filter Demo ➜

Event Filter Demo ➜

Key Features:

• Simple to install and customise

• Filter options for portfolio pages, galleries, blogs and events

• Includes the new advanced dropdown portfolio filter

• Ideal for Squarespace sites needing more in depth filtering options with a simple user experience

• Beginner friendly setup with copy and paste instructions

• Designed for Squarespace 7.1 websites

Get this Plugin

For more Squarespace tips check out my blog, or sign up to my newsletter.

Check out my Squarespace Premium Plugins

---

Must Have CSS Codes!

Enter your email to get access to my must have CSS codes for Squarespace!

Yes please!

Loading...

Thank you!

You have successfully joined our subscriber list.