How To Create Dynamically Updating Images in Clickfunnels Order Form Pages

Finally! We’ve found our most popular FunnelFixIt Custom Code request

Ever wanted to dynamically update the images of the products you have on your ORDER FORM pages?

Well, now you can.

Note: this is an advanced change and requires custom code on your page. As Clickfunnels doesn’t do any internal checks on this code, you can break your funnel if you enter anything incorrectly.

We implement these types of things many times a day, so feel free to reach out to a professional

Step 1: How many images/products do you have?

You will need 1 of these blocks of code for each image/product you have on your order page.

Let’s say we have 2 products on our order page.

PRODUCT_ID_1 and PRODUCT_ID_2

To find your product id, simply hover on the EDIT button on your products page. It will appear in the status bar of your browser

Step 2: Now you will need to add both product images onto your page.

Add them on top of each other and just hide the second image.

Step 3: Now, we need to add in our special Javascript code.

This will control what happens when you select the products from the order form.

This is inside of the Tracking Code settings menu.

Your code will go into the Footer Code area (not Header):

The code we will put in will also need to know how to find your images.

Each image has it’s own CSS ID. All you need to do it SHOW Image 1 when Product 1 is selected and HIDE Image 2.

Vice versa when Product 2 is selected, SHOW Image 2 and HIDE Image 1.

Too easy.

Click To Get This Code Send To Your Email

Due to script blocking browsers, to grab the exact copy and paste code, just click this button and we’ll email it over to you.

Already have a FunnelFixIt account? You can send in a task to have this implemented in your funnel today 🙂