How to create a testimonial slider in Squarespace
A testimonial slider (sometimes called a testimonial carousel, wheel, slideshow etc) is basically just a sleek way to display and rotate through your (amazing) testimonials. It’s a great way to save space when you have tons of reviews, and it looks great too!
Creating this testimonial slideshow requires a bit of a Squarespace hack, but it is super easy to do.
This method works in both Squarespace 7.0 and 7.1, but Squarespace 7.1 has actually bought out a new way of creating testimonial sliders or carousels which is very different, and I think a much better method than what we’re going to do now, so if you are using Squarespace 7.1, I would recommend checking that tutorial out instead! (I’ll create a tutorial on that method and link it here ASAP!)
Check out the example below, this is exactly what I’m going to show you how to do today (these are some real client testimonials about our Squarespace Template Kits, if you’re wondering!)
1 - Add your testimonial blog page
Log in to your Squarespace website editor
In your sidebar, click Pages.
Then, click the + icon under Not Linked and create a new Blog. I’ve called mine “Testimonials”
Tip: If you are using Squarespace 7.1, they will ask you to choose a blog layout here, you can just choose any layout as this won’t matter. We are building this blog purely to feed into the carousel and visitors won’t ever see it!
If you’re using Squarespace 7.0:
Click into your new Blog and click + to add a new Blog Post.
A pop up window will pop up for you to enter a new post.
Enter a Post Title. This can/will be hidden in the actual Testimonial Slider, but it will help to keep your testimonials organized in the blog for future reference.
You don’t need to put anything in the main body of the post. Nothing that you write in the main blog body will be displayed in the testimonial slider.
Click on the Options tab.
In the Excerpt section you can paste in your testimonial. Everything in the section will be displayed in your testimonial slider, so feel free to add whatever you like (eg the name of the person who gave the testimonial or a website link). You can use the formatting tools to use different Paragraph or Heading styles, or add links to the text.
When you’re happy with your testimonial, click SAVE AND PUBLISH at the bottom.
If you’re using Squarespace 7.1:
Click into your new Blog and click + to add a new Blog Post.
Your page will open to a blank post ready for you to fill in with content.
Enter the Post Title. This can/will be hidden in the actual Testimonial Slider, but it will help to keep your testimonials organized in the blog for future reference.
You don’t need to put anything in the main body of the post. Nothing that you write in the main blog body will be displayed in the testimonial slider
In the top right corner you will see a cog/wheel icon, click this to open the Blog Settings.
Click on the Options tab
Scroll down to the Excerpt section. In the Excerpt section you can paste in your testimonial. Everything in the section will be displayed in your testimonial slider, so feel free to add whatever you like (eg the name of the person who gave the testimonial or a website link). You can use the formatting tools to use different Paragraph or Heading styles, or add links to the text.
When you’re happy with your testimonial, click Save in the top left corner which will save the settings and take you back to the Blog post page. In the top left corner click DONE > PUBLISH.
Here’s a sample of what your testimonial excerpt might look like. In this excerpt I write the client name and then have a link to their website at the bottom. You can add a link with the link button in the excerpt box.
Do this same process for as many testimonials as you would like to add to your slider.
2 - Add the Carousel and settings on your page
Head back to Pages and choose the page you would like to add the slider on. My slider is on my homepage and in a few other places around the site (you can add it pretty much anywhere!)
Click EDIT on the page you want to add the testimonial slider
Hover over the area you want to add the slider and click on the blue plus (+) icon to add a new block.
Add a Summary Block.
Once you have added this block, it will ask you to Select a page to pull content from. You will choose your new Blog ‘Testimonials’ (or whatever you called it!)
I also recommend turning OFF Primary and Secondary Meta Data.
Tip! If you have lots of testimonials for different aspects of your business, you can use the Filter Items section to filter by tags and categories (you can add tags and categories to each post to organise them)
Click on the Design Tab at the top
Choose Carousel for the layout
Number of Items: Here you will want to decide how many testimonials you want to display, I usually drag this all the way up to 30. If you put it at 1, it will only show your most recent post/testimonial and won’t slide to the next one.
Change the Items Per Row to 1
Adjust the alignment and text size to your preference.
Where it says Header Text “Featured” I generally remove this all together (just backspace the “Featured” text)
If you want to show your Title you will want to have Title checked
Uncheck Thumbnail
Check Show Excerpt (this is the part with the actual testimonial in it!)
Uncheck Read More link
Note: These are just the settings I use, and there’s tons of different variations you can do for this, so feel free to experiment!
If you want to link this up to an actual Blog post about the project, then you might want to leave the Read More button, or even add a Thumbnail image etc. Whatever settings work for you.
TIP: You could use “tags” or “categories” on your testimonial blog posts to separate different categories of testimonials. For example if you have some testimonials for your facial serum and some for your facial cleanser, you could put them all into your Testimonials Blog, but add a “category” or a “tag” to separate them into different groups (eg “serum” and “cleanser”. Then when you add a Summary Carousel Block, you can Filter by a category or tag.
TIP: If the slider is too wide, use spacers left and right to make it smaller!
And that’s it! You’ve got yourself a testimonial slider, woohoo! You can add this slider the same way anywhere around your site (wherever you can add blocks!).
Loved that post? Check out some more design tips below!
How to create a vertical line in Squarespace (7.0 & 7.1)
How to add Parallax (banner animations) in Squarespace 7.1
How to create a dropdown FAQ in Squarespace
How to create a full width Instagram feed in Squarespace 7.1
How to animate your links on hover in Squarespace 7.0 & 7.1
