How To Add A Logo Slider To Your Squarespace Web Design in 2023

One of the biggest jobs your website does is build credibility for you. And there are lots of ways to do that, but social proof is a super powerful one. What does that mean? It means showing other people have already had a great experience using your product or working with you. Testimonials are one awesome way to do that, but another great way is to display the logos of big, reputable companies you’ve worked with or been featured by. Why does this help build credibility? Well, because if those companies trusted you enough to work with you, then so can Suzie who found you on Instagram!

I've updated this post to include separate instructions for those on 7.0 Squarespace sites, as well as those on the newer version 7.1 or Fluid Engine. To check your site's version, open the Help panel for your site and look in the bottom-left corner. If you're on version 7.0, your site's template name also appears at the very bottom of the panel. If you don't see a template name, then you're on version 7.1.

The first thing you'll need to do, regardless of which version you're on, is to gather your logos. It’s as easy as asking your previous clients to send you their logo to use, or, if you already have permission from them, you can search for their logo on Google or source from their website. Make sure that the file looks clear and crisp (that usually means it’s high resolution), has a transparent background OR the background color of the section you're adding it to, and that you save all the files to one central location on your computer so you can upload all at once super easily.

PRO-TIP: If you feel comfortable using an image editing program, you can resize all your logos to be the exact same size and aspect ratio (that’s the shape of the graphic, for example square or a 4:3 rectangle). This will help with having them be wonky looking and all different sizes.

Now is where the instructions change depending which version you’re on, so once you’ve figured out which version you’re on you can follow the respective instructions below.

---

if you’re on squarespace version 7.0, follow these Step-by-step instructions to add a bar of scrolling logos to your website design:

Step 1: Add Carousel Gallery

Navigate to the page you want to add your featured logos to and enter edit mode. Find the place on the page where you want to add your slider and add a Carousel Gallery block. In the first Content tab you can click upload and go find the files you want on your computer or simply drag and drop into the open tab.

Next, in the Design tab select if you want to have the next & previous arrows showing so your visitors can navigate themselves and/or automatically transition between slides. Check the Open Links In New Window box and if you want to add links to your logos navigate back to the Content tab and click on the gear icon that appears when you hover over a logo. Add your link to the Click To Add URL area.

Step 2: resize

Click on the Carousel Gallery block that you just created and grab the handle on the bottom middle of the block. Drag it up to resize the entire block until the desired number of logos are visible at once. Don’t forget to click save on the entire page!

Step 3: style with custom css

For finishing touches on this logo slider, navigate back out to the main menu of your Squarespace site and go to Design > Custom CSS. Copy and paste the CSS code below into the box and hit save. That’ll add some padding around the sides of each logo to give them some room to breathe and convert them all to grayscale so they don’t distract from your own brand colors. Voila! You’re done!

.sqs-gallery-design-strip-slide {
  padding: 0px 20px 0px 20px;
  -webkit-filter: grayscale(100%);
}

---

if you’re on squarespace version 7.1, follow these Step-by-step instructions to add a bar of scrolling logos to your website design:

STEP 1: ADD GALLERY SECTION

Navigate to the page you want to add your featured logos to and enter edit mode. Find the place on the page where you want to add your slider and add a section. From the options on the left, select Gallery and choose any gallery style. Once your section has been added, select Edit Gallery in the top right corner of the section. Click the + sign to upload your logo files or simply drag and drop into the open panel. If you want to link each logo, click each one and add the URL to the panel on the right (I suggest clicking into the gear icon and selecting Open Link In A New Window for a better user experience).

Once you have your logos added, back out of the Edit Gallery panel and click Edit Section and adjust the gallery settings as follows:

Gallery Type: Slideshow: Reel
Width: Full
Height: Select your preference
Controls Location: Select your preference
Cropping: Off
Captions: Off
Divider: Select your preference

Don't forget to hit SAVE on the entire page when you're finished!

STEP 2: STYLE WITH CUSTOM CSS

For finishing touches on this logo slider, navigate back out to the main menu of your Squarespace site and go to Website > Website Tools > Custom CSS. Copy and paste the CSS code below into the box and hit save. That’ll add padding around the sides of each logo to give them some extra room and convert them all to grayscale so they don’t distract from your brand colors. Adjust the decimal number behind scale to increase or decrease the size of each logo + spacing.

.gallery-reel img {
   filter: grayscale(100%); scale: .8;
}

STEP 3: ANIMATE IN ADVANCED PAGE SETTINGS

If you want your logo slider to automatically scroll without the controls, head all the way back to Website and click the gear icon next to the page your slider is on. Select Advanced from the menu on the left and copy/paste the code below into the Page Header Code Injection box and hit save. Voila! You’re done!

<script>
    /**
    *  Gallery Section Auto Scroller
    **/
  (function () {
    setAutoScroll({
      gallery: 1,
      direction: 2,
      timing: 3000,
    });    
        function setAutoScroll(settings) {
      function init() {
        let section = document.querySelectorAll(".page-section.gallery-section")[settings.gallery - 1];
        function clickArrow() {
          if (section && !document.querySelector("html.sqs-modal-lightbox-open") && !document.hidden && !document.querySelector("body.sqs-edit-mode")) {
            let arrow = section.querySelectorAll(".gallery-reel-control .gallery-reel-control-btn")[settings.direction - 1];
            if (arrow) arrow.click();
          }
        }
        window.setInterval(clickArrow, settings.timing);
      }
      window.addEventListener("DOMContentLoaded", init);
    }
  })();
</script>

---

So, go ahead and add that reel of big shot companies you've worked with to prove how trustworthy and credible you are. Now you know how to spice it up to make it even more impressive on your own website!

P.S. If you're looking to bring your brand + website from DIY to expertly designed, I happen to know someone who can help (it's me, guys!). Check out my services page here to get a feel for what all is typically included in a package, pricing, and process. Or reach out on my contact page here so we can start talking!