Testimonial Slider in 7.0

If you’re a service based business, you know that you NEED a little testimonials section right?? I ALWAYS look for reviews before joining, booking or buying from a brand. I also think it helps to have a little logo or profile picture with it so it makes it feel like it came from a real person! SO! Here’s how to add a cute little slider to your Squarespace website!

1. Adding Reviews As Blog Posts

Yep, I know it sounds weird, but to make our slider we first have to make a little not-linked blog page with all of our reviews in there. When we create the slider it will grab the reviews from here.

Head over to your unlinked sections and create a new page that is a Blog Page Then click on the + icon and create a new blog post. Don’t worry about what title you give it - it won’t be seen in your slider.

Click on the Options tab and in the Excerpt section you will add in your amazing review!

Upload the profile picture or logo into the Thumbnail Image window (also in the options tab)
Now this is important - The image you upload MUST be a perfect square in order to change it into
a nice little circle later with code.

Add as many reviews as you want! I try and stick with around 3-5 max for my websites.

Once all that’s done hit - Save & Publish

2. Creating The Slider

Alrighty, time to make the slider! Head over to the page you’d like to put the Testimonial Slider on and a new section: Content Summary Block > Carousel Now you want to select the Testimonials Blog in the new content summary block menu.

To edit the design you’ll click the Layout tab and change a few things.

• Delete the Header Text

• Aspect ration: Auto

• Items Per Row : 1

• Text Alignment: Center (you can do whatever you like)

Then in the Display tab we want to change Primary metadata to None and deselect Show Title

3. Let’s Add The Code

Now we’re going to add a bit of code to make that square image a circle! Head over to Design > Custom CSS

//testimonial circle//

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

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

}

You can play around with these until you get the look you want! Let me know if you found this helpful!

Lucy x