Product List: Add image in category

Is there a template where you can place an image at the category breaks? If not, is there a CSS that will allow this? For instance, if I am selling jewelry, can I have a picture of a necklace on a model showing that this section is necklaces? The another section for Rings with a picture of a ring. Etc?

Hi Andrew,

Thanks for reaching out to Jotform Support. Unfortunately, the Product List element in Jotform doesn’t support adding images directly to category headers by default. However, you can work around this using custom CSS to add background or inline images below each product category title. Let me show you how:

1. First, copy the code below. You can replace the background-image selector with your own image URL:

/* category=2001 for Rings */

span[category="2001"] b::after {

background-image: url("https://www.graff.com/dw/image/v2/BFNT_PRD/on/demandware.static/-/Library-Sites-GraffSharedLibrary/default/dw85ea580e/Bridal%20&%20Engagement%202024/Refresh/Engagement%20Rings/Hero_engagement_banner_mobile.jpg");

background-size: contain;

background-repeat: no-repeat;

background-position: center;

display: block;

margin-top: 10px;

height: 250px;

width: 650px;

content: "";

}

/* category=2002 for Necklace */

span[category="2002"] b::after {

background-image: url("https://t4.ftcdn.net/jpg/12/44/18/99/240_F_1244189911_3kUZLCrtaWTe6dPGgl1dUNdrn1aQ7gsw.jpg");

background-size: contain;

background-repeat: no-repeat;

background-position: center;

display: block;

margin-top: 10px;

height: 250px;

width: 650px;

content: "";





}

/* category=2003 for Earrings */

span[category="2003"] b::after {

background-image: url("https://graphics8.nytimes.com/images/2014/10/22/t-magazine/22earrings-gilchrist-slide-H3NB/22earrings-gilchrist-slide-H3NB-jumbo.jpg");

background-size: contain;

background-repeat: no-repeat;

background-position: center;

display: block;

margin-top: 10px;

height: 250px;

width: 650px;

content: "";

}

/* category=2004 for Bracelet */

span[category="2004"] b::after {

background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtNN2rOh4h53eS-jPXKYAznQpTvLcTsfQOag&s");

background-size: contain;

background-repeat: no-repeat;

background-position: center;

display: block;

margin-top: 10px;

height: 250px;

width: 650px;

content: "";

}

2. In your Form Builder, click the Paint Roller icon at the right side of your page.

3. In the Form Designer, go to the Style tab and paste the code in the Inject Custom CSS area. You will then see the images appear below the Category title.

That's it. Test your form,  and you’ll see the images appear right below the category titles. Check out the screencast below for the result:

You can also check out my demo form for your reference. This guide will show you how to clone the form and make it your starting form.

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

Thank you, this is very helpful! Do I have to have a hosted image, or can I upload my own?

Hi Andrew,

Yes, you need to have a hosted image to include the images in the CSS code.

Reach out again if there’s anything else we can help you with.

I found a beautiful work around for uploading your own pictures too, all within the Jotform universe. This tutorial video is brilliant.

Hi Andrew,

We're glad that you find a work around regarding your requirement.

Let us know if there’s anything else we can help you with.

Hi Andrew,

Thanks for the detailed explanation! This workaround using CSS is really helpful. I'll try it out and let you know if I need any further assistance.

Hi Reban,

I love the way this turned out, however, It doesn't show the images on iPhone (I suspect on all mobile). Is there a CSS tweak to make it work everywhere?

Hi Andrew,

I checked the CSS in your form and noticed that the image URLs aren't accessible due to your account's privacy settings. To make these images publicly accessible, you'll need to adjust your settings. Let me show you how:

1. Login to your Jotform account on your Desktop (it's not available yet on the Mobile App).

2. Click on your Avatar/Profile picture on the right side of the screen, and click on it.

3. In the dropdown, click on Settings, or click on this link to go directly to your Settings page.

4. Now, go to the Security tab and uncheck the box next to Require Login to View Uploaded Files under the Privacy section.

Give it a try and let us know if you need any other help.

Reban, You're a F*ing legend! Thank you!