How To Add Testimonial Carousels In Squarespace 7.1 & 7.0

Including testimonials or reviews on your therapy or coaching website provides valuable social proof to potential clients who are thinking about working with you. However, displaying them in a clean and user-friendly way can be a challenge.

Watch this tutorial to learn our two favorite ways to create testimonial carousels in both Squarespace 7.1 and 7.0:

Before I explain how to add testimonial carousels in Squarespace 7.1 and 7.0, I’m going to summarize the two options to help you decide which one is going to be best for you.

Option One: List Section

These auto-formatted sections in Squarespace in 7.1 come with scrolling carousel functionality built right in. All you have to do is add your content.

Good for:

  • Squarespace 7.1 websites

  • Displaying small collections of testimonials on a single page

  • Displaying images with your testimonials

  • Accessing more design features

 

Option Two: Blog + Summary Block

Option two takes a little bit more setup, but it's great for people with large testimonial collections who want to display the same testimonials on multiple pages of their website.

Good for:

  • Squarespace 7.0 websites (will work on 7.1 too)

  • Large testimonial collections

  • Displaying the same testimonials on multiple pages

  • Displaying text-only testimonials

 

How to create a testimonial slider in Squarespace 7.1 using a List Section

  1. Navigate to the page where you want to add your testimonial slider. Click edit on your page editor and navigate to where you want to add the carousel.

  2. Click add section.

  3. Select the Testimonials page type.

  4. Select a List Section with arrows.

  5. In the upper right corner of your new List Section, click edit content.

  6. Navigate to content and replace the demo content with your testimonials.

    1. Add the testimonial quote to the “Title” field.

    2. Add the quote source to the “Description” field.

      • NOTE: To add star reviews, copy & paste star emojis into the “Title” field, and use the “Description” field for the quote and source.

    3. (Optional) Upload pictures of your clients or customers in the Image field.

  7. Add, remove, or rearrange testimonial items as needed.

  8. Navigate to Elements to choose which elements appear in your testimonial carousel. Some common testimonial carousel elements are as follows:

    1. Toggle on/off the Title field to show/hide a section title.

    2. Toggle on/off the Button field to show/hide a section button.

    3. Toggle on/off the Image field to show/hide images with your testimonials.

  9. Navigate to Design to customize the look of your testimonial carousel.

    1. Maintain the “Carousel” selection to ensure your testimonials scroll.

    2. Adjust the text alignment.

    3. Adjust the number of columns that appear in your carousel.

    4. Choose an image crop style.

    5. Toggle on “Infinite Scroll” if you want your reviews to scroll on a loop.

    6. Toggle on “Show Adjacent Slides” if you’d like items beyond the screen to peek around the side of the screen.

    7. Fine-tune style settings in the Style panel:

      1. Toggle on the “Card” feature to add a background color to your testimonial quotes.

      2. Adjust arrow settings.

    8. Fine-tune padding settings in the Size and Space panel

All you have to do to add new testimonials in the future is to go back into your edit content panel, into the content panel itself, and click add to add more testimonials.

Remember, you can reorder your items as you see fit. If you'd like your newest testimonials to appear first, just drag those to the top of your list of items in the content panel.

Note: For more List Section style customizations (that don’t require code), check out Spark Plugin.

 

Using List Section carousels on additional pages

Now let's say you want to display more testimonials in a list section on a different page on your website, but you don't want to recreate the list from scratch and re-format another list section.

The best way to create more testimonial carousels would be to save the original section to your “Section Library” and then insert it on a new page. Here’s how to do it:

  1. In your page editor, navigate to the list section you just created.

  2. Click the heart icon to save the section to your section library.

  3. Navigate to the page that you want to add the duplicate testimonial slider section to.

  4. Click edit on the page.

  5. Click add section wherever you’d like to add the testimonial carousel.

  6. Click saved sections, then select the testimonial carousel section you just saved.

A few things to note about duplicating list sections:

  • Only the information you added to the list section before you saved the section is going to carry over.

  • Adding testimonials to one list section on your website will not automatically add them to your other list sections across your site. So if you have a new testimonial that you want to add to several different list sections across your website, you'll have to add them manually to each of your testimonial carousels.

 

How to create a testimonial slider in Squarespace 7.1 & 7.0 using a Blog Page and Summary Block

If you have a large testimonial collection, or if you want to display the same testimonials on multiple pages of your website without manually adding them to each page, you might be more interested in option two: creating testimonial carousels with a Blog and Summary Block.

Step 1: Set up the testimonial blog

  1. Navigate to your Pages panel.

  2. Add a new page under your Not Linked section.

  3. Select Blog.

  4. Title the page “Testimonials” (or “Reviews” if that suits your business better).

  5. In the Blog page settings, navigate the the SEO panel and toggle on the switch next to “Hide all pages in this collection.”

  6. Click Save.

  7. Click the “+” icon to add a new post to the Blog page.

  8. Title the post according to the client/customer’s name or initials.

  9. In the post settings, find the Excerpt field. Paste the testimonial quote here.

  10. Add the quote source below the quote.

  11. Select heading or paragraph styles for the quote and the quote source (these will show up the same way your headings and paragraphs do across your website).

  12. Publish the post.

Step 2: Create a Summary Block

  1. Navigate to the page where you want to add your testimonial slider.

  2. Click Edit on the page.

  3. Click Add A Block.

  4. Select a Summary Block.

  5. Click Edit on the Summary Block.

  6. In the Summary Block Settings window, select your Testimonials blog from the dropdown list.

  7. Under Primary Metadata, select None.

  8. Under Secondary Metadata, select None.

  9. Click Design, and select Carousel.

  10. Select how many items you want the Summary Block to display.

  11. Under “Items per row”, select how many columns you’d like to display (we love the look of one item per row).

  12. Skip “aspect ratio”.

  13. Skip “text size.”

  14. Adjust text alignment.

  15. Remove the default Header Text.

  16. Select the elements that you’d like to display. We suggest the following settings:

    1. Shut off the title.

    2. Shut off “featured image”.

    3. Turn on excerpt since this is where you added your quote.

    4. Shut off “read more” link.

    5. Skip “metadata position”.

Step 3: Add more testimonials

  1. Go back to your Testimonials blog page.

  2. Select Duplicate on your last testimonial.

  3. Update the duplicate post name and post URL.

  4. Update the excerpt text to the new testimonial.

  5. Publish the post.

 

Using Summary Block carousels on additional pages

Now, if you want to display your testimonial collection on other pages of your website, all you have to do from here is add more summary blocks throughout your site.

Follow the steps from Step 2 above to add more Summary Blocks, or duplicate your original Summary Block using the following steps:

  1. In your page editor, select your original Summary Block.

  2. Copy the block by using the keyboard shortcut: Command + C (Ctrl + C).

  3. Navigate to the page where you’d like to paste a duplicate Summary Block.

  4. Click the section of the page where you’d like to paste the block.

  5. Use this keyboard shortcut to paste: Command + V (Ctrl + V).

The benefit of using summary blocks is that any new testimonial that you add to your testimonial blog collection will show up on every summary block automatically.

You won't have to go through each page and add the same testimonial multiple times. You’ll simply add it once to your testimonial blog.

 

Reminders & Notes about using Summary Blocks to display scrolling testimonials:

  • Remember to add the testimonial text to the excerpt field within the blog post settings. It doesn't matter what's in the post itself, because that's not what's showing up on the summary block.

  • As of now, the arrows on summary block carousels can't be tweaked, moved, changed. So, if you want more arrow options, a list section in Squarespace 7.1 might be the way to go.

 

BONUS: Sorting testimonials using categories & tags

If you decide to use the Blog + Summary Block option to display your testimonials, it’s worth noting that you can sort testimonials by category and tag to display on different summary blocks across your site.

For instance, let’s say we want therapy client testimonials to show up on the “therapy” page, and “coaching” testimonials to show up on the “coaching” page. You don’t have to create multiple blogs for different types of testimonials.

Instead, just categorize your testimonials and adjust the settings of your summary blocks. Here’s how:

  1. Navigate to your “Testimonials” blog page.

  2. Select a post.

  3. Open the post settings.

  4. Navigate to options > categories.

  5. Type the name of your category.

  6. Click save.

  7. Select another post and repeat these steps, adding as many categories as you need to.

Now it’s time to configure your summary blocks:

  1. Navigate to a summary block, and open the block’s settings.

  2. Under “filter items”, select category.

  3. Select the category that you want to display on this page.

  4. Navigate to another summary block on your site and repeat these steps.

To fine-tune your testimonial sorting, use tags to filter even further. Follow the same steps, but instead of adding “categories”, add “tags” to your testimonials and filter your summary blocks by tags as well.

 

Need help adding a testimonial carousel to your Squarespace site?

I hope this tutorial gives you everything you need to create your own testimonial carousels, but if you’d rather outsource this task, inquire about Squarespace Tech Support here. We’re always happy to help!

Monica Kovach

Monica is the Founder and Designer at Hold Space Creative. She's a former Art Therapist and coach, and she's passionate about making mental healthcare more accessible by helping therapists & coaches present themselves in a more accessible way. She's based in Michigan, and when she's not designing websites, she can usually be found somewhere in nature.

https://www.holdspacecreative.com
Previous
Previous

Bright, Modern Squarespace Website for a Group Practice in Chicago, Illinois

Next
Next

Serene & Grounded Squarespace Website for a Somatic Therapist in St. Louis, Missouri