ClickFunnels: How to Add a Before and After Slideshow QUICK AND EASY

Watch the video, or read the Blog Post below.

Hello hello! Here are are going to run through how you can add a before and after slider to ClickFunnels AND how easy it really is.

This is the final result we will be achieving today for our Before and After slider in ClickFunnels.

If you prefer to watch ClickFunnels tutorials on YouTube then click here to go and watch this on YouTube and subscribe to our channel.

But first! I want you to think about this for a second

The below is a GREAT example of when to use a BEFORE and AFTER slider.

In the above example on the Canadian Goose website, they are teaching people have to spot counterfeit garments of the brand but noticing the detail in the embroidery.

Canadian Good are high-quality, finer-detailed embellishments galore, whereas the copy-cats cut corners to reduce their price and in doing so miss the finer detailing.

The BEFORE / AFTER SLIDER is a great way to showcase this.

Before we go ahead, I want you to REALLY THINK about whether or not you REALLY need a before and after slider in ClickFunnels, because they can be fancy and unnecessary.

Would two images work just as well? Probably so.

But if you REALLY want a before and after slider like this, then THIS tutorial will show you exactly how to create a before and after slider in ClickFunnels.

How to Add a Before and After Slideshow in ClickFunnels

STEP 1: Add a HTML element to your ClickFunnels page

Using the drag-and-drop builder inside ClickFunnels, add a HTML element to your page. You can search for the HTML element up the top if you can't find it.

Just like the below image.

Step 2: Add the following code HTML CODE from the image below into the HTML element inside your ClickFunnels page

This is the HTML code you need to add.

You can scroll to the bottom of this post, then enter your email, and then we will send the code to you so you can copy and paste it.

Step 3: Add the required Javascript to trigger the slider in ClickFunnels

Next, we need to add some Javascript code.

To do this, go up the top to Settings > Tracking Code.

Next, go to the FOOTER tab and paste the second bit of code that you can download below on this page.

And that's the SETUP COMPLETE!

Wooo!!!

Save your page and preview it. It should look like the below with the dummy images that are grey.

Step 4: Replace the images in the Before and After slideshow for ClickFunnels with your own images

Now that the slider is all working in ClickFunnels, go back to editing the HMTL module that contains your HTML for the Before and After slider elements.

You can see the text that says <img src="... and this URL is the URL to the image. You want to replace each of these with the TWO images you will be showing in your Before and after slider in ClickFunnels. See below image.

THINGS TO NOTE:

  • Both images should be the EXACT same width and height for this to work. Use a program like Photoshop or something else to crop the images to the same width and height. This is IMPORTANT

One you replace those <img tags with your URLS to your own images, save the page and PREVIEW the page again.

And...wala! Here is the result I got below from using two images I had.

As you can see, it also works ON MOBILE devices and tablets. Phew, we're safe all round.

Wrapping up the Before and After slideshow for ClickFunnels tutorial

Before And After Slideshow in ClickFunnels tutorial COMPLETED!

As you can see, it's very easy to get this is up going. I'd say you could do this in under 10 minutes.

Again, you can download all the code used in this tutorial at the bottom of this page.

Download the Before/After Slider HMTL code below

GET INSTANT ACCESS

to this Hidden ​Content!

Enter your Name and Email below to instantly see the hidden content related to this Article / Video!

This site is not a part of the Facebook website or Facebook Inc. Additionally, this site NOT endorsed by Facebook in any way. FACEBOOK is a trademark of FACEBOOK, Inc.

Scroll to Top