How do I add images choices to Product forms

Hi, I am trying to create a Product page where customers can chose some customisations to the order and they can chose from different image options. A product form would work great to capture these options but none of the fields on Product form can be images, it is all text fields only. Is there any way I can offer options to users which are Images to chose from which can be captured for each order placed.  

18 minutes ago, AshKash said:

I am trying to create a Product page where customers can chose some customisations to the order and they can choose from different image options.

You can add different product images and assign them to product variants. If you can point us at the product(s) and the types of images you want to use, we may be able to provide further suggestions.

On 12/7/2022 at 9:06 AM, AshKash said:

Hi, I am trying to create a Product page where customers can chose some customisations to the order and they can chose from different image options. A product form would work great to capture these options but none of the fields on Product form can be images, it is all text fields only. Is there any way I can offer options to users which are Images to chose from which can be captured for each order placed.  

Hi @AshKash were you able to find a solution here? I am trying to do something similar on my site.

7 minutes ago, scootkennedy said:

I am trying to do something similar on my site.

You cannot add images to a Custom Product Form. Can you give us some more context so we can understand why you want to do this?

1 hour ago, paul2009 said:

Can you give us some more context so we can understand why you want to do this?

Certainly. Here is a link to my current product page. Instead of the existing form, I'd like to give users the ability to select from ~150 image to customize their product. Instead of a drop-down menu that is text-only, my hope was to create a drop-down (or similar functionality) that has a list of images for them to select from.

@scootkennedy did you find any solution to this? I'm trying to do the same thing by adding images to the checkboxes.

I replicated the product form in codepen to code up a JS solution, which worked, but then it doesn't work when I put the code into Squarespace for some reason dunno 🤷‍♂️

Here's the codepen I made:
https://codepen.io/brendanmkav/pen/YzgEgye

It doesn't work in Squarespace and I've no idea why.

I've tried site-wide footer injection, shop-specific header injection, product page-specific code block, etc, etc. I can't find the solution. I even added a console log to check inspector if the script is loading, and it does, in every location I place injection, but it still doesn't work.

My running theory is that the form is a modal triggered by the "add to cart" button, and somehow doesn't get affected by my script, but I don't know.

I tried adding an event listener to wait for the button click that triggers the modal form, but still no luck.
Any ideas would be awesome. Maybe there's a way to target the modal load specifically? 🤷‍♂️ maybe @paul2009 has some ideas?