How to make a testimonial slider in Squarespace

 
 
Howt to make a testimonial slider in squarespace *.jpg
 
 
 

Heads up! This page contains affiliate links (including Squarespace affiliate links). If you buy something through one of those links, you won’t pay a penny more, but we’ll earn a small commission. We’ll never promote something that we don’t 100% believe in and use ourselves. Thank you for your support!

I think it’s pretty obvious I love Squarespace. If you’re curious to see what all the hype is about, use code PARTNER10 at checkout to receive 10% your first year of any Squarespace plan.


Okay friends, time to get your learnin’ on 🤓 

I’m back with another Squarespace tutorial...woot woot!

This is a good one because I honestly use one of these two techniques in every single site I build...they’re just so versatile and showcase info in an aesthetically pleasing way. 🙌🏼

So I’m going to show you how to make a testimonial slider using two different methods. These also works really great for FAQs, displaying items in a list, or steps in a process. 

They are both really great methods but each have their own unique drawbacks so I’ll outline those for you here so you can decide which one will work best for you. 

So first up…


Option 1: The blog + summary block method. 

You can see it in action here on the WSS home page, just scroll down to the “kind words” section.

 
Screen Shot 2019-06-27 at 5.29.32 PM.png
 

Also here on the template info page in the “why squarespace” section.

 
Screen Shot 2019-06-27 at 5.30.03 PM.png
 


As you can see, I’ve used this same method to showcase testimonials and display items in a list. And both look really nice!

The main drawbacks to this method are:

  1. You can’t set it to auto-rotate, people have to click the arrow

  2. You can’t control the look of the pagination arrows without using CSS

  3. Changing the order in which the testimonials display is a little cumbersome

But if none of those three things bother you, then this is a great choice! Clearly I think so since I used it multiple times on my own website 😊

If you want to learn this method, watch the video below!

 
 


Option 2: The gallery section method

This is a great option if the three drawbacks to the summary block method listed above aren’t going to work for you. 

With the gallery method, you can have it auto-rotate, can change the look of the pagination arrows (even remove them completely!), and you can super easily change the order of your testimonials. 

The only main drawback to this method is we have to use a gallery index section. So your template needs to be one that has index pages. If you don’t know if yours does, check out the template comparison chart by the lovely Paige Brunton here.

Also, in Site Styles, we only have one styling option for gallery index sections. Which means if we set the style of our gallery section to “Slideshow” like we will for this method, every single gallery index section on the site will be set to slideshow. Unfortunately, you can’t have one gallery section as a slideshow, and then a different one set to a grid without utilizing custom code. 

But if this is the only way you plan on utilizing gallery index sections on your site, then you don’t have to worry about it! 

You can see this method in action here on the Ginger demo site...just scroll down on the home page until you see the rotating testimonials (password: wss_ginger) 

 
 

So if you’re curious on how to implement this method, you can watch the video below!

 
 


Well that’s it! I hope it was helpful! 

Which method will you use? Tell me in the comments below! 👇🏼

 

you’ll also love…

 
 
How to make a testimonial slider in squarespace **.jpg
 
How to make a testimonial slider in squarespace.jpg