Squarespace Hack: Create Automatically Rotating Testimonials

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Please note: This has not been tested since the end of 2018 or on the new version 7.1. 

It seems as though this is also now only working for certain templates so although it is worth testing, it is no longer definitive as it was when writing this article.

A big part of every business is gaining reviews and testimonials to showcase on your website but how do you go about displaying this on your Squarespace site?

One of the biggest requests I have on Squarespace is creating both:

  1. a testimonial block without a ton of coding and;
  2. making it automatically rotate.

Although Squarespace doesn’t supply this feature specifically there is a great little workaround by making use of a carousel summary block.

Here’s a step by step:

Step 1. Go to pages and create a new BLOG page type; let’s name this ‘testimonials’ (or whatever you see fit)
Step 2. Within the page, select the + sign to add a new post
Step 3. Bypass the first page completely and switch from the ‘Content’ tab to ‘Options’
Step 4. Paste your testimonial in the EXCERPT section. If you want to add a credit, I suggest making that part bold or giving it a h3 style and even link it back to their site.
Step 5 (optional). Add a logo or image to the ‘Thumbnail Image’ section if you wish to show this.

Step 6. Rinse and repeat step 2-5 until you’ve completed all of the testimonials you want to display within the rotating block.
Step 7. Leave this section and go back to the page/section you wish to showcase these testimonials. Select a Summary Carousel block to add to the page.

Step 8. In the ‘Content’ tab, select the page we’ve just created; in this case it’s ‘Testimonials’
Step 9. Adjust the settings on both the ‘Layout’ and ‘Display’ tabs to suit your needs. My recommendations can be seen below.

Step 10. Once you’re happy, click save!

Want to make this automatically rotate?

Head over to the page settings and go to the ‘Page Code Injection’ (if it’s an index page you have the tesimonials on, do this on the INDEX settings and not the page) and enter the following code (adapted from squarespace answers):

<script>
Y.on('domready', function () {
var galleries = Y.Squarespace.GalleryManager.getGalleries();
var duration = 4000;
var gallery=galleries[0];
var carousel=gallery["gallery-design"];
var totalGroups=carousel.get('totalGroups');
var currentGroup=0
var container=gallery.get("container");
var nextBtn=Y.one(gallery.get("elements.next")._nodes[0]).on("click",function(e){
e.preventDefault();
e.stopPropagation();
advanceCarousel()
})
var prevBtn=Y.one(gallery.get("elements.previous")._nodes[0]).on("click",function(e){
e.preventDefault();
e.stopPropagation();
backupCarousel()
})
Y.one(container._node).get('parentNode').on("mouseover",function(){
clearInterval(myInterval)
})
Y.one(container._node).get('parentNode').on("mouseout",function(){
clearInterval(myInterval)
setMyInterval()
})
var myInterval;
function setMyInterval(){
myInterval = setInterval(function(){
advanceCarousel()
},duration)
}
setMyInterval();
function advanceCarousel(){
if(currentGroup==(totalGroups-1)){
currentGroup=0;
}else{
currentGroup++;
}
carousel.goToGroup(currentGroup);
}
function backupCarousel(){
if(currentGroup==0){
currentGroup=totalGroups-1
}else{
currentGroup--;
}
carousel.goToGroup(currentGroup);
}
});
</script>

UPDATE AS OF APRIL 2019:

It seems Squarespace has changed something within their backend and the rotation no longer appears whilst in edit mode. It does, however, appear within a live site so you will have to view the website outside of configuration mode to see the rotation in effect.

This Post Has 21 Comments

  1. Daniel

    I’ve got the code pasted in to the index, the page and the blog code injection and it does not work. Using Brine template. Cannot find an answer anywhere

    1. virtualstudiouk

      Hi Daniel

      Post is now edited but it seems Squarespace have made some changes on their backend and the rotation no longer appears within edit mode. To view the rotation in action, you will need to view the website out of /config mode (try using an incognito window).

      Hope that helps!

  2. ayeisha

    i am getting a syntax error of the first line. ANy thoughts?

    1. virtualstudiouk

      Hi Ayeisha,

      Where are you entering the code? Are you placing the

  3. Jen

    Hello. I would LOVE to use this but it not exactly sure what I need to edit and where exactly it should go. Help?

    1. virtualstudiouk

      Hi Jen

      Once you create your testimonials within a blog page, follow the instructions to create a summary block on the page you want the testimonials to display.

      You will then need to go to Pages and select the gear icon shown next to the page (or main index page if the page is within an index), select the ‘Advanced’ tab and enter the code within the ‘Page Code Injection’ (note: this is now only available in Business Plans or higher).

      Hope that helps!

  4. Stacey Harmon

    Hello – I was really excited to find this and deploy it in my Brine template site. However, I am not finding that it works. I’ve set up the testimonial blog, displayed it as a summary block carousel, and added your suggested code to the INDEX code injection (not the page code injection) for my home page, and it isn’t working. Don’t know if SS has updated something since you posted this article, or if there is an error in my execution, but wanted to update you on my experience following your directions.

    1. virtualstudiouk

      Hi Stacey!

      Did you preview it on the live site? I will edit the post as it seems the code no longer works in edit mode but does when the site is viewed live (you can see it in action on a site here: https://www.startyourownfashionlabel.com)

      I have double checked the code and it is all correct and working.

      1. Daniel

        Hi there. I am having the same problem as Stacey. Using the Moksha template. I get everything looking correct, but it will not auto rotate. Tried opening it on my iPad, iPhone, Macbook, Surface, Microsoft Edge, Mozilla, Chrome, Safari, everything, and as a random user (not config). Everything looks great, but nothing will rotate. I pasted the code in every place I could find (in the blog settings, in the index settings and the page settings) and nothing.

  5. Cyn

    Hi everyone! Thanks, Virtual Studio for this wonderful trick. Like the other commenters here, I also used this code with no luck. BUT I persevered and kept trawling the net and have found a solution for me. Maybe it’ll help others? I found a tip to change
    var gallery=galleries[0];
    to
    var gallery=galleries[1];

    – This helped me with the 1 testimonial summary carousel I had on that page.

    I entered the code by going to the main Squarespace menu > PAGES > The cog next to my HOME index (My home page of the website is an index, with Testimonials is a sub-page of HOME) > Advanced > Page Header Code Injection.

    Then I changed the ‘var galleries’ line from 0 to 1. I also changed the ‘var duration’ to 8000 (8 seconds) because 4 seconds was a bit fast for my needs.

    I hope this helps you too!

    1. rhinestonelife

      Thank you to both virtualstudiouk and Cyn, this saved me many hours of head-banging

  6. Chris Wainman

    Finally! I’ve been trying to resolve this and I couldn’t see why it wasn’t working. First comment I’ve spotted about not seeing it working until it’s live. Thank you!

    1. Leah Matthews

      Great! You’re very welcome 🙂

  7. Morgan

    This worked great for me! Any chance you know how to slow it down though?

    1. Leah Matthews

      Hi Morgan – yes just amend the line in the code that reads ‘var duration = 4000;’ to the number of your choice (e.g. 7000 or 8000). These are milliseconds 🙂

  8. Sarah E Waters

    Any thoughts on how to get this to work in a footer block? (There isn’t a page injection for this..)

  9. theresa

    This worked for me today. Thank you!!!

  10. Chris M

    Hi there! I have tried to implement this code on my site. I have followed the post and the comments with no luck.

    Questions:
    – Which page do you post the code injection? Is is site Header code injection or page of Home or page of testimonial?
    – Is it necessary to have the ‘testimonial page’ as a sub page to the ‘Home’?

    1. Leah Matthews

      Hi Chris

      Unfortunately due to Squarespace’s recent changes since I wrote this, it seems it is only working for certain users so I have a feeling that it may only now work on certain templates (although without testing, I can’t determine which these might be). To answer your questions:

      – Have you got the homepage within an index or is it on it’s own? If the former, this needs to go in the index header in the page settings. If it’s standalone then it will go on the homepage (or whichever page you are displaying the tetsimonial summary) header.
      – It doesn’t have to be a sub-page but it does have to be its own standalone page with its own ‘posts’ – you will then need to add a summary block to the page you want it to show on.

Leave a Reply

Interested in working with us?