Watch the video, or read the Blog Post below.

As we all know, visual aesthetic is one of the many different determining factors for the effectivity of a marketing campaign of a product or service, especially in the eCommerce field. Can you imagine yourself making an online purchase without even getting to see or know the product’s specifications and physical appearance? And as an online merchant, you would want to advertise your products in a way that would be very much pleasing to the eye, and not just in terms of your customers’ budgets.

So, with that being said, we can conclude that photos are indeed important in setting up a sales page or product information page — and we all know how easy adding them can get, regardless of the platform your website is based on. But what if you want to add multiple photos and fully advertise your product in its full view, in a way that doesn’t tale up too much space from your page? If your website is based on ClickFunnels, then this blog is dedicated to you! Today, we are going to discuss how you can add an image slider in 1 minute.

A Simple Way to Add Image Sliders in ClickFunnels

Read on to find out how you can add an image slider quick and easy in ClickFunnels. But first, let us get a better understanding of what an image slider is.

What is an Image Slider?

Image sliders are used when you are to display multiple images in a single page without having to consume too much space. As the name suggests, you only need a single click of the mouse to “slide” right or left to view the second image, the third one, and so on. A good example of an image slider is that from Fotorama.

Fotorama is a modern and natively responsive open source jQuery image gallery plugin.

Note this one down, as Fotorama is an important part of our discussion today!

Coding for Image Sliders in ClickFunnels

Go to Fotorama and copy the code for Fotorama.css & Fotorama.js.

Then, go back to ClickFunnels to edit a funnel step, with an example shown below.

This is the exact same funnel that I used to go from zero to a thousand dollars in just a few days. You can click through this link to download this funnel and implement it to your own ClickFunnels account!

On this page, go to Settings > Tracking Code, and paste the code from Fotorama onto the Footer Code section.

Then, go back to Fotorama, scroll to the bottom and click Customize > Thumbnails, and copy the code shown below:

Bear with us as we go back and forth two tabs! Now, go back to ClickFunnels, and while editing your funnel step, add a Custom Javascript/HTML element > click Open Editor, paste down the code and insert your image links into their respective places (replace 1.jpg and 2.jpg with your own image links).

One thing to take note is that the Custom Javascript/HTML element will not work when you are on the page builder, and so you need to save your changes and actually preview them to be able to see your image slider.

If you’re wondering what’s next, that’s actually it! You’ve just successfully added an image slider, without even breaking a sweat!

Foolproofing Your Image Sliders

There may be situations wherein you will need to add image sliders to multiple pages. If you want to skip the hassle (and foolproof them for good!), you can follow the following steps.

Go back to Funnel Settings, copy the code for Fotorama.css & Fotorama.js and paste it into the Body Tracking Code. This way, you can add an image slider to literally every single one of your pages!

Just remember these easy steps to add your image slider:

  1. Copy the Thumbnails code from Fotorama;
  2. Go to ClickFunnels to edit your page;
  3. Add a Custom Javascript/HTML element wherever necessary;
  4. Click Open Editor and paste the code;
  5. Replace “1.jpg” and “2.jpg” with your own image links;
  6. Save and preview changes.

See how easy it is? Heck, you can even start right now and still have time to focus on the more important aspects of your business!

Let’s Wrap It Up!

Image sliders are important in promoting a product/service that requires multiple images for one to be able to see it in its full glory. And if your website is based on ClickFunnels, adding one for your sales page or product information page is but a few clicks away. All it takes are, of course, your own photos and a few coding skills — actually, you only need to copy and paste code and that’s it! However, you must make sure that you are to place said codes in the right place; otherwise the image slider will not function properly or will not show up at all.

Remember that Fotorama plays an important role in the addition of an image slider to your funnel step. Simply take note of these codes and you’ll be well on your way:

  • Fotorama.css & Fotorama.js;
  • The first set of code on Fotorama Thumbnails.

And if you wish to add image sliders to more than one page, you can work with the Body Tracking Code under ClickFunnels > Settings.

Before we end this post, I would like to invite you to my monthly membership group, The Pirate Club, where you can get everything you would need to build a successful online store. By joining in and becoming a pirate yourself, you gain access to the following:

  • The Pirate Academy;
  • The Pirate Product App;
  • The Pirate Community; and loads more!

Intrigued? The Pirate Club is now open with an early-bird pricing plan, so be sure to grab this super affordable deal before it expires!

If you have any more questions about ClickFunnels or anything regarding this video, feel free to personally contact me via the Contact Form HERE. You can also leave your comments and feedback below, and our team over at WagePirate will definitely get back to you with a response. For more reviews, news and updates, don’t forget to subscribe to our YouTube channel!

Hey! I'm Grant Ambrose,

My WordPress website generates millions of dollars in sales each year and I put together this website to help you do the same

I believe that a lot of the time, we aren't doing things that will help our business NOT because we don't know how to do it, but rather we don't even know it is possible. My website aims to change this. My website is here to help show YOU what is possible - what YOU could set up in your business with WordPress to increase sales, automate tasks and (ultimately) turn your ideas into working WordPress solutions.

1 thought on “ClickFunnels: How to Add a Simple Image Slider in 1 Minute”

  1. Hey, this works beautifully in desktop, thank you. But in mobile, only half of each image shows. Like, half of the image is not on the mobile screen. I’m not sure how to explain it, but I think it has something to do with the framing.

Leave a Comment

Your email address will not be published. Required fields are marked *

Grow your WordPress business by getting...
My best tips to your inbox!

I'll send you emails when I publish content I think will help you and your business. You can opt-out at any time and change the topics of emails you get.

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