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:
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:
- Copy the Thumbnails code from Fotorama;
- Go to ClickFunnels to edit your page;
- Click Open Editor and paste the code;
- Replace “1.jpg” and “2.jpg” with your own image links;
- 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 email at [email protected] 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!