Looking for an easy and fast way to add product images to your order forms in Clickfunnels?
In this article, we’re going to show you how to do it in as little as a few minutes…even if you’re not tech-savvy.
Of course, if you have the required skills you can write custom code to add the product image to the order form. Otherwise, you can use a tool called CF Power Scripts. It’ll let you set everything up without dealing with custom code.
CF Power Scripts is a must-have add-on for Clickfunnels that allows you to effortlessly integrate additional features to your funnels that Clickfunnels doesn’t offer natively.
And we’re going to use the CF Pretty Products script to add product images to Clickfunnels order forms.
Here’re the simple steps you need to follow!
Step 1: Add the CF Pretty Products script to Clickfunnels
- Log into your CF Power Scripts account and go to the Power Scripts tab.
- Go to the funnel where you want to add the script and select the order form. By the way, this script works on both regular and 2-step order forms.
- Click Add New and choose the CF Pretty Products script.
- The only thing you need to do here is to click the Add Script button in the bottom right corner.
The other settings apply only if you want to highlight or preselect a product on your order page, or add some information about products. If you want to have this feature on your order form as well, check out our step-by-step tutorial showing how you can do it.
Step 2: Copy the product ID
To let CF Power Scripts know to what product you want to add an image, you need to copy the product ID from Clickfunnels. Here’s where you can find it:
- Log into your Clickfunnels account.
- Open the funnel and the Order Form page where you want to add an image.
- Click on the Products tab.
- From the list of the products, find the product where you want to add an image to, and click Edit.
- Copy the product ID from the URL (the number in the URL after products/).
Step 3: Add a product image to your Clickfunnels order form
- Open the Order Form page in the editor.
- At the bottom of the page add an image of the product you want to use.
- Go to the Settings of the image and set the Lazy Loading to False.
- Open the CSS Info by clicking on the hashtag icon in the bottom right corner.
- In the CSS Info pop-up, change the title to product-img-PRODUCT ID, for example, product-img-2663171. Please use the product ID that you copied on the previous step.
- Click Update.
Once you save the changes you made on the order form, your Clickfunnels product will include the product image you added.
You can use the CF Pretty Products script to add images to multiple products on your order page. For this, just repeat the above steps for other products.
If you prefer to watch a video that walks you through all the steps, check out the tutorial on how to add an image to the products, highlight, or preselect a product in Clickfunnels.
