Product List: How can I make the image on each product enlarged when clicked?

Hi, for some reason the images inside the list do not enlarce when are click them. Did I do something wrong on CSS codes?

Thank for your help

Hi Santiago,

Thanks for reaching out to Jotform Support. You can inject a custom CSS code to increase the height of your product image. You can change the value of height to your preference. Let me show you how:

1. First, copy this code:

.form-product-image-with-options {

 width: 300px !important;

 height: 200px !important;

}

2. In Form Builder, click the Paint Roller icon on the upper right side of the page.

3.Under the Styles tab, paste the CSS code in the Inject Custom CSS box.

Give it a try and let us know how it goes.

Thank you Christine,

I mean when a user touch that images they usually pop up in a new window for the user to see the product but for some reason is no working. Have a look one of my menus to see for your self: https://form.jotform.com/220026567349659

I will keep in my notes the code you sent to me in case I need it anyway.

Please help me with that,

Cheers! :D

Hi Santiago,

When I cloned and tested your form, the same thing happened for me. After investigating it a bit, I found a solution. You can toggle YES on Clickable Image Preview field on Product List Settings field on Product List field on the form. You can clone my demo form, or you can do it on your end. Let me show you how to do it:

1. In Form Builder, click on the Shopping Cart icon on Product List field.
2. Click on Settings next to Create Product on the upper-right part of the screen.

3. Scroll down, toggle YES on Clickable Image Preview field above Show Decimals On The Form field.

That's it. Take a look at the screencast below to see my results:

Give it a try and let us know if you have any other questions.

Thank you Royce!

It works perfect.

Cheers