Squarespace Hack: Create Automatically Rotating Testimonials

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

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 a) a testimonial block without a ton of coding and b) 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 (you can see this in full effect on my home page)

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 = 2000; /*this is the speed, change this to suit your needs */
         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>

Ta-da! You’re done!

Leave a Reply

Interested in working with us?

Providing strategic design and digital solutions for freelancers and SMEs on a global basis.

The Legal Bits

  • Privacy Policy
  • Cookie Policy
  • Terms of Use

The Virtual Studio 2019 © All rights reserved

Made with ❤ by The Virtual Studio

Close Menu

Contact Us.