How to create a testimonial slider in Squarespace
Are you using your customer testimonials to their full advantage?
Do you have them on your website? Better yet - do you know how to have them on your website?
When I am looking to purchase anything on the internet my number one go to is “well what do the reviews say!” I can’t tell you how many customers have reached out to tell me they purchased my product based solely on the reviews they read. Reviews are a huge untapped marketing tool that I know I don’t use enough - and I want to make sure you know how! If you’re not already showcasing all your show-stopping reviews on your website - today is the day you’re going to add them!
There are two different ways you can easily add testimonial sliders to your website depending on which version of Squarespace you have! Not sure which one your website is? When you’re logged into your website in the gray panel on the left go to HELP and scroll down to the bottom to see what version you are running.
PS: Squarespace 7.1 users - I have a new trick for you and believe me, you don't want to miss this!
How to create a Testimonial Slider is Squarespace 7.0
In your PAGES palette, click the PLUS button under NOT LINKED and add a new BLOG collection page and name it “Testimonials”.
Open the blog page and click the PLUS button in the upper right hand corner to create a new “post”.
In the “Post Title” area I usually put the name of the person for organizational purposes later, but this part won’t be seen. Actually nothing in the “post” area where you usually write will be seen (if you’re confused just hang in there with me!).
Click on the “Options” tab in the post pop up and scroll down to the “Excerpt” area. THIS is where you will add your testimonial text not in the actual blog post.
Style your text how you want it to be seen - if you want it in H1, H2, H3, etc. Be creative! Add “★★★★★” above the testimonial or make the first sentence stand out in a different heading style than the rest of the post. Don’t forget the quote marks at the beginning and end! You can also add a photo here if you want to in the “thumbnail” image area
A note about the thumbnail image: If you are displaying one testimonial at a time, the photo will be as wide as the text is. If you want to add a photo, you’ll want to create a wide image that’s not very tall and put the photo you want to use only in the middle of that image. You can watch the video below for a better visual!
Save the blog post and add as many as you have.
Once you’re finished, navigate to the page or section you want your testimonials to appear in and add a new “Summary Block” by clicking the blue PLUS button on the page.
Go to “Select a Page” and choose your new “Testimonials” blog.
Go to the “Design” tab and choose how you want it to be displayed - usually for a scrolling testimonial you choose the “Carousel” design style.
Go through the options for the rest of display - I usually choose 1 item per row, center the text, turn the title and thumbnail off and under the “Content” tab choose “none” under “Primary Metadata”. Click save and there you go!
ta da! You can now slide through the testimonials!
If you want the testimonials to not be so wide you can add a spacer on either side of the block. If you’re looking for something a little more stylized and want to add some custom code, there are a few amazing shops like Squaremuse or Sqsp Themes that sell testimonial slider plugins!
How to create a Testimonial Slider in 7.1
The above method can also be used in 7.1, but Squarespace has recently released a new layout option for 7.1 that makes it super easy to add your testimonials!
In your 7.1 website add a “New Section” on the page you want to add your testimonials.
In the page type pop up click on “Lists” on the left hand side and scroll down. Here you will see TONS of different options to layout testimonials. I would suggest one of the “scrolling” options (with arrows on either side) if you want it to scroll of course. There are many different options with photos, with background images, etc.
After you’ve added your section click the “Edit Content” button in the right hand corner. In the “Elements” tab you can choose which items to show.
Click over to the “Contents” tab. Here is where you can add each testimonial. You can delete the filler content and start to add in your own. If you want a photo to go with the testimonial you will upload the photo, and then add the title and text. I would play around with adding in the first sentence - if not the whole testimonial to the “Title” section and the attribution to the “text” section. You can also add a button if you want to link to a project.
After you’ve added all your testimonials you can go “back” and click over to the “Design” tab. Here you will find you can change the type of design (banner slideshow, simple list or carousel) as well as adjust all the spacings and styles to make it look exactly how you want!
You can edit the section styles the same by clicking on the pencil icon in that section and adding a background image or changing the color palette.
Once you’re all set you can click the paintbrush in the upper right hand corner of your website to go the “Site Styles”. Choose “Colors” and the theme you are using in that section and you can change all the colors of the new elements - like the background on the arrows and the arrow colors themselves.
