How To Make a Logo Slider on Squarespace

How To Make A Testimonial Slider on Squarespace

One of the biggest jobs your website has is to build credibility for you. And there are lots of ways to do that, but social proof is a super powerful one. That means showing that other people have had a great experience using your product or working with you. Testimonials are one great way to do that (and you can see how I create a fancy-pants testimonials slideshow here), but another great way to do that is to display the logos of big 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!

Watch the video tutorial below to see exactly how I like to display logos in a slider on your Squarespace website or read the step-by-step instructions below.

Step 1: gather your logos

Ask 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. Make sure that the file looks clear and crisp (that usually means it’s high resolution), has a white or transparent background, and that you save them all to one central location on your computer so you can upload all at once.

Step 2: 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 3: 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 4: 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%);

Did you find this tutorial helpful in creating a black & white logo slider on your Squarespace site to help you build credibility? Share your website with your logo slider in the comments below!