Simple Guide To Add A Scrolling Logos Squarespace Plugin

Feb 8

Written By Toni Williams - Founder of The Square Genius

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. 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:

Install the Chrome extension called Squarespace ID Finder.
Navigate to your gallery section on your live site.
Use the ID Finder tool to reveal the unique section ID.

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.

Go to your page settings by clicking the gear icon (⚙) next to your page in the Squarespace editor.
Click on Advanced, then Page Header Code Injection.
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>
$(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="YOUR SECTION ID"] 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="YOUR SECTION ID"]');
            clearInterval(interval);
        }
    }, 100);
});
</script>

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.


    /* Logo Scroller Animation By The Square Genius */
    
    /* 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 sections if needed */
section:has(.slide-track) .section-border, 
section:has(.slide-track) .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 */
}

/* Prevent horizontal scrolling */
body, html {
    overflow-x: hidden;
}

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

Preview The Logo Slider Plugin

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!

Latest Plugins!

Quick View

Hotspot Image Hover Effect Squarespace Plugin

Quick View

Pop-in Style Squarespace Timeline Plugin

Quick View

Squarespace Scrolling Images Plugin Pro

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

Check out my Squarespace Premium Plugins

preview of a timline plugin for Squarespace websites — **Premium Timeline** Plugin

Featured

How to Add a Copy to Clipboard Button for Squarespace

How to Add a Simple Squarespace Vertical Timeline

Add a search bar to the navigation menu on Squarespace 7.1 [2025 update]

copy to clipboard code

Toni Williams - Founder of The Square Genius

Hi, I’m Toni. My mission is to create powerful websites for charities, non profits and purpose-led organisations dedicated to making a positive impact on the environment, communities, animal welfare and many more.

https://www.thesquaregenius.com/author-toni-williams