How To Make a Testimonial Slider on Squarespace

 
 How To Make A Testimonial Slider on Squarespace
 

We all know how important testimonials are for your website (and if you don't, then you totally should check out #3 in this article). Testimonials add social proof that you're as darn good as you're claiming to be, and they reassure your visitors that you're trustworthy. But displaying all those testimonials on your site can take up SO MUCH SPACE. People are probably getting carpal tunnel from scrolling for five years. So a great alternative is to set up your testimonials as a slideshow. That way users can browse through them much easier and it's nicer to look at with your eyeballs. 

Watch the video tutorial below to see step by step how I make a testimonial slideshow in Squarespace or take a peek at the instructions below.

Step 1 - Create A New Blog Page

Log into your Squarespace site and navigation to the Pages section. Scroll down to the Not Linked section. Click the plus symbol and add a new blog page. Name the page something descriptive like Testimonial Entries because this is where you'll be inputting the testimonials and images to be pulled into the slider.

Step 2 - Testimonial Entries

Once you've created your new page, create a new post by clicking the plus symbol next to your page name. Put something descriptive in the title space, but this won't show in our slider. After you've titled your post, click the Options tab at the top of the panel. Upload the thumbnail you'd like to be displayed (if it's not a perfect square, click the Edit button under your thumbnail and make it into a perfect square using the cropping tool). After you've finished uploading and editing your thumbnail, add your testimonial and customer name text to the Excerpt field and hit Save & Publish. Repeat for as many testimonials as you want in your slider.

Step 3 - Summary Carousel block

Navigate back to the page you want to add the slider to and enter edit mode. Add a block wherever you want the slider to appear and select the Summary Carousel. In the first Content tab, select the page you just created under the Blog section. The head over to the Layout tab of the edit panel. You can change the header text or completely remove it. Then you'll want to set your Aspect Ratio to auto and the Items Per Row to 1You can also change the text size and alignment in this tab to your liking. Lastly, in the Display tab you can specify how many testimonials you want to scroll through in the Number Of Items section, but you'll want to uncheck Show Title and change Primary Metadata to none.

Step 4 - custom css

To add the finishing touches you're going to make the thumbnail image smaller and circular. You can do this by navigating back to your main menu by clicking Home and selecting Design. Then click Custom CSS and copy the code below so you can paste it into the CSS box -- don't forget to hit save!

.summary-thumbnail img {  
 border-radius: 50%;
  padding: 5px;
  max-width: 20%;
  margin: auto;
 }

.summary-thumbnail-container { 
  pointer-events: none !important; 
}

Did you find this tutorial helpful in creating a testimonial slider on your Squarespace site? Share your website with your testimonial slider in the comments below or let me know if you have any questions!