Jennifer Bianca Design Studio

View Original

add a testimonial carousel to your squarespace website

Jennifer Siemens
See this content in the original post

Sharing testimonials with people curious about your service or product is key to building trust - but can we create a cute scrolling testimonial on Squarespace? Based on their standard features, it doesn’t look like it. But we can!

Enter the Summary Block.

The summary block is made to share blog posts - but we’re gonna do a liiiittle “hacking” to use it for testimonials.

Let’s start with an example of a simple testimonial carousel. Cute, hey? Now let’s show you how to make your own!

Step 1: Create a new blog for your testimonials

Already have a blog on your website? No problem! You are actually able to have multiple blogs on Squarespace with no issue.

Here’s how:

  1. In the Pages tab, scroll down to the Unlinked section and click the + icon to add a new page. Then choose the Blog option.

  2. Your new (empty) blog will open. Click the gear icon at the top beside ‘Blog’ and re-name it Testimonials under the Navigation title.

  3. Then go down to where you see Enable Page and turn the toggle off. This makes the page inaccessible on your website, but we’ll still be able to pull the testimonials into summary blocks to share them all over your website.

  4. Click save!

Step 2: Add your Testimonials

Now you’ll be adding each testimonial as it’s own blog post in this new blog you’ve created!

  1. Click the + beside the gear icon to create a new post.

  2. In the post title, put the name of the person you’re quoting. You could name it “Jane Doe says…” like our example at the beginning, or however you'd like the quote reference to appear.

  3. Switch to the Options tab and you’ll find the Excerpt section - this is were the actual testimonial text goes! (Summary blocks can pull in the Title + Excerpt, but not the actual blog post text, so this is why were put it here!)

  4. Once you’ve added the title and excerpt, you’re done! Click Save & Publish on the bottom right.

  5. Now do this for every testimonial you’d like to include.

Step 3 - Add your testimonial carousel to your Squarespace website!

  1. Find a spot where you’d like to showcase your testimonials. This might be on your home page or on your services page (or any where else really)!

  2. Add a Summary Block and choose the Carousel option.

  3. First, you’ll have to select what page you’re pulling posts from. This will be the Testimonials blog you just created. (I also suggest turning both of the metadata options to none).

  4. Head to the design tab (still in the summary block) where you can indicate how many posts you’d like to be available to scroll through, and how many you’d like to show at once (I suggest 1 or 2).

  5. Next, you’ll be able to choose your text size and alignment.

  6. Delete the Featured title in the header section and leave it blank.

  7. Under Elements, toggle off the thumbnail and read more option but keep the title and excerpt on.

  8. Voila! You’ve got a testimonial carousel!

Step 4: Styling the Carousel

Squarespace doesn’t actually allow you to style the summary blocks very much with their site styles editor. So here are a couple simple code (CSS) options for you to add to spice it up!

Style the title and testimonial:
Copy + paste this into your Custom CSS area under the Design tab to change the font settings for the title and testimonial excerpt! Remove anything that doesn’t apply and simply change the sizes/colours/fonts to what you want!

.summary-title {
font-family: ’FONT-NAME’;
font-size: 20px;
color: black;
letter-spacing: 0.05em;
line-height: 1.6em;
background-color: blue;
}
.summary-excerpt {
font-family: ’FONT-NAME’;
font-size: 16px;
color: red;
letter-spacing: 0.05em;
line-height: 1.6em;
background-color: white;
}

Move the carousel arrows to the centre:
Just copy + paste this into your Custom CSS area under the Design tab to centre the arrows!

// center summary carousel arrows
.sqs-block-summary-v2 .summary-block-setting-design-carousel .sqs-gallery-controls {
display: flex;
justify-content: center;
width: 100%;
}

Move the carousel arrows BELOW the testimonials and centred:
Copy + paste into your Custom CSS settings and your arrows will move below the content!

// move summary carousel arrows below content
.sqs-block-summary-v2 .sqs-gallery-design-carousel .summary-item-list-container {
display: flex;
flex-direction: column-reverse;
}
.sqs-block-summary-v2 .summary-block-setting-design-carousel .sqs-gallery-controls {
display: flex;
justify-content: center;
width: 100%;
}

Hope this helped you add customer client love to your website to build trust with your audience! Feel free to reach out with questions in my email!