In this post I’ll teach you how to make a testimonial slider for your Showit website. You can use a slider for showcasing all the great things clients say about working with you, but for other information, too. For example if you have a lot of text to share, as part of your “About Me” page and so on.

I’ll walk you through the process step-by-step in the video below. But if you prefer to read, the instructions are written out for you as well. I’ve got you covered!

Let’s dive right in!

How to make a testimonial slider in Showit – video tutorial

How to make a testimonial slider in Showit – written tutorial

I like to work on the desktop and the mobile view at the same time, especially when we’re dealing with different canvas views. Because if you don’t work on the mobile version at the same time, it’s going to take you a lot longer to get it all sorted out.

Create your first testimonial

We’re going to start with the title that we want to use in this section. And I’m going to use my subhead styled-text here (H3).

Then, let’s put the main, most compelling part of the testimonial in a nice big font. That way potential clients can see and get the gist right away (because people don’t tend to read through loads of text). A nice big font helps grab attention, too!

Let’s use our heading for the main part of the testimonial, but we’re going to change the text properties to “paragraph” here for SEO purposes. To do this, click on the “Text Properties” tab and select “p” for paragraph from the drop down menu. And then center the text on both desktop and mobile sides (or position it wherever you want).

If you want to add a little bit more context, add some paragraph text with more of your testimonial. 

And then we want to have the client’s name below the testimonial. I like to do it in the subhead style so it stands out.

Add a client’s photo and change its shape to a circle

Pro tip: ask your client if you can include a photo of them with their testimonial. It helps to bring some humanity and believability to your testimonial. People want to connect with other people!

I like to have these pictures in a circle shape so they stand out from other images on your website.

To do this, first make the image a square. The easiest way is by changing the height and width in the “Size and Position” tab on the right. Let’s try making the photo 120 by 120 pixels. Then go to the “Effects” tab and make it a circle.

Now, with the photo selected, press Command + C and then click over to the mobile side. Pressing Shift + Command + V pastes the style from the desktop photo to the mobile version of the photo. That will save you a little bit of time!

Add a “next” arrow so your slider actually slides

So now we’ve got our first testimonial, but let’s say you have 3 that you want to let people swipe through.

To do that, we need to add arrows. So click on the “frame” icon in the lower menu and choose “Icon”. Then we’re going to go to the “Icon Chooser” tab and find whatever kind of arrow suits your brand and your website.

Adjust the size and position of the arrow and change the color if you want. Then go over to the mobile side and adjust the arrow there. 

Now we’ll apply a click action to the arrow: Click on the “Click Actions” tab, then “Link”. Choose “Canvas” -> “This Canvas” -> “Next”

I like to uncheck “Scroll to Canvas” and “Reverse Transition Direction”, because otherwise the view jumps around a little bit when you click the arrow. But we’re going to leave “Loop Canvas Views” checked. That lets people keep clicking through the testimonials on a loop.

Add a “previous” arrow to your Showit slider

Now we need to adjust our other arrow so on a click it goes to the previous view. The easiest way is to copy and paste your first arrow. So click to select your arrow then press Command + C to copy it. And now Command + V to paste the new arrow. 

We want to flip it over and the quickest way is to go to the “Size and Position” tab. In the “Rotate” box, type 180. Then move your arrow over to the left side of your canvas.

Now go over to the mobile side and do the same thing to rotate the arrow so it’s pointing in the other direction. Position it wherever you want on the mobile version of your site.

We need to update the click action here, because we want this arrow to go to the previous canvas view. So go to the “Click Actions” tab and select “Previous” under Canvas View. 

Add a canvas view to create your testimonial slider

Now we need to add the other testimonials. The first step is adding a canvas view by clicking on the three dots next to the canvas name in the left hand menu. Then click “add canvas view”. 

We want to put the photo, the big text, the little text and the client’s name into this canvas view folder. So let’s select all those elements and drag them into the folder.

Now we’ll duplicate this canvas view, but before you do that, make sure the design is exactly how you want. It’s a lot of work to go through each canvas view to change one thing. So make sure you’re happy with the design here. Check BOTH the mobile and desktop preview to make sure everything is lined up.

Add the other testimonials to your slider

When you’re happy with the testimonial design, click on the dots next to the canvas view folder. Click “duplicate”. Now go to that newly created folder to add the next testimonial text and image. Don’t forget to check your design in mobile!

Repeat these steps for as many testimonials as you want to add to your slider.

Then take a look and make sure it’s all working properly by clicking Preview in the top menu. Click on the “next” and “previous” arrows to make sure you can scroll through all the testimonials. 

And when you’re done and happy with your design, don’t forget to hit publish!

If you’re not keen to create a slider in Showit yourself, why not grab a copy of my testimonial template? It’s got 7 different canvases so you can include testimonials in whatever way suits your brand best. And it’s totally customizable. Plus you get access to my free course “Learn Showit and Launch Fast” when you buy!

You can test the demo site right here. Get yours before the sale ends!