Rotating Testimonials on Squarespace

One of the most important things you can do if you're wanting to up your website conversion game is to add testimonials (if you're service based) and reviews (if you sell products).  Today I'm going to show you a little workaround for easily adding rotating testimonials in Squarespace.

While I see many opting to use images for this purpose, why not reap the benefits of SEO, speedier page load, better readability on mobile, and ease of updating using a smart workaround with built-in Squarespace functionality (and perhaps a touch of custom CSS)?

So, skip Photoshop or going a jquery plugin/code route and I'll walk you through how to do this the easy way...  

(And if you want to learn all about getting great testimonials from your clients, check out this post from Ashlyn Writes!)

1. Add a blog

We need a place to store our testimonials, so create a blog in your "NOT LINKED" section of your "Pages".  

You can also use the Gallery Block (and you'll have more pagination and rotation controls) to accomplish this; however, you'll need to upload an image for each testimonial.

2.  Add Each Testimonial as a Blog Post

Add your testimonials by creating a blog post and going into "Options" and inserting your testimonial in the "Excerpt" field.  

Why the excerpt field?  Because this gives us the most flexibility when it comes to content we can add.  For example, if we use the Title field, we will not be able to add bold or italics to our text. 

Once you've added your testimonials, it should look something like this.

3. Add a Summary Block to Display Your Quotes

Go the page you'd like to add your testimonials and add a Summary -> Carousel block.  

Now, set the following:

1. Content -> Testimonial

2. Layout -> Items Per Row -> 1

You can set your Header Text to 'Client Reviews', 'Kind Words', etc...  For the purposes of this demo, we're just going to leave that blank.  We'll also set the 'Text Size' to Extra Large.

3. Display -> Show Excerpt

And for the purposes of this demo, we are going to just set both metadata fields to None.


...and sure, it's not the prettiest of things right now.  But with a little CSS help, we can change all that.  Stay tuned as my next post is all about styling these guys!