Adding an image to custom product form

Hi, how do I add an image to a specific custom product form? Thanks! 

When you say custom product form, is this a form that is added to a product through the product editor interface?

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Thanks for your reply. Here's the link: https://www.typesetfortwo.com/christmas-collection/p/christmasyall

When you click "add to cart" a form pops up. I'd like to add an image on that form, it's a form on a product page. Is this possible? 

It is possible. Are you thinking something like the following?

Yes! It would an image of the back of the card (so the customer can choose a design) but yes, that's exactly what I need. Thank you! 

This worked perfectly! Thank you so much! 

One other question. Is it possible to have different images on different forms. 

For example, I added an image to the form for my vertical cards but I need a different image for my horizontal cards on that respective form. Is that possible?  Even if I create its own form how do I point the image each to the specific form?  

It may be possible. If you altered the code by duplicating the code and changing the data-form-id value to the appropriate value for the new form then you could associate a new image with that form.

Basically the current code associates one image with one form.

Without a specific example of a product with this alternate form it is hard to be more specific. It would also help to know the URL of the image you want at the the top of the form.

Thanks again for your response, I really appreciate your time. 

Here's the URL for to the page with the new form: https://www.typesetfortwo.com/christmas-collection/p/blessings

Here's the URL for the image for the new form: 

https://   images.squarespace-cdn.com/content/v1/5e27638ae410453315a6e06d/a9fbbff1-52fe-48ff-9dfe-2e9af78799f3/Christmas2021-BACK-Layout-HORI.jpg

If you duplicate the code above and replace 5f8f0e40d03aaf4e9a88476d with the following 6178d859046d482a1c34bce8. Then the form for this product can have a different image than the other product pop-up form.

Let us know how it goes.

Woo hoo! It works perfectly. Thanks again! 

Hi, I wanted to do the same thing on my website, so I tryed coping your code where indicated and changing the img url. It didn't work...

Should I change the data-form id aswell ? if yes, where do I find my id ?

Thanks in advance :)

15 minutes ago, manufacture_wagram said:

Should I change the data-form id aswell ? if yes, where do I find my id ?

Yes.

Finding the id involves using the browser developer tools which can't be explained in a few sentences.

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Hey thanks for getting back to me 🙂 

I managed to find the ID in the developper tool and it works perfectly ! 

Thanks a lot ! 💯