Help Needed: Implementing Custom Size Option with Pop-Up Forms on Product Page

[rsuique777]

Hello Shopify Community,

I run an apparel brand that offers made-to-order services, and I want to provide a “Custom” size option alongside standard size variants on my product pages. When the customer selects “Custom,” I want a pop-up window to appear with two tabs:

1. I know my size: A form where customers can enter their specific measurements.

2. I don’t know my size: A different form where customers can request assistance or guidelines for measuring.

To implement this, I installed the HulkApps Form Builder and created the necessary forms. I can add these forms to a page and trigger a pop-up window using the “Add block” feature on the product page. However, this isn’t exactly what I want. My goal is to have the pop-up triggered directly when the “Custom” size option is selected.

I’ve tried adding JavaScript code to the main-product.liquid file to detect when “Custom” is selected, but the code doesn’t seem to work or trigger correctly. I’m also having trouble ensuring that the pop-up behaves as desired when it’s linked to the size variant selection.

Here’s what I’ve tried so far:

• I created the forms using HulkApps and added them to a custom page.
• I used the “Add block” feature to link to the forms, which works for triggering a pop-up, but not in the way I need.
• I attempted to modify the main-product.liquid file to trigger the pop-up when “Custom” is selected, but the JavaScript doesn’t seem to detect the variant selection properly.

Here’s a screenshot from the Papa Don’t Preach website that shows the kind of functionality I’m aiming for:

My questions are:

1.Is it possible to achieve this functionality without custom coding?

2.If not, what would be the best way to implement this using JavaScript or other methods?

3.Are there any specific steps or resources you would recommend to ensure the pop-up works as intended when “Custom” is selected?

I appreciate any guidance or suggestions you can provide. Thank you!

[tim]

Of course it would be possible.

But it would be beneficial if we can see the preview link to the page where your current solution is implemented to suggest the best way.

Usually this also can be done without Apps, by creating Line Item properties inputs and showing them via JS or even CSS only when "Custom" option is selected.

[rsuique777]

I tried via coding, but it was not working, as explained in my other post 

[tim]

If you're really against sharing your preview link publicly, you can DM it to me. It's really difficult to suggest where the problem is without seeing the actual page. 

[rsuique777]

Here is the link: https://q877rcfe7v0xcuxn-60737781829.shopifypreview.com

[Easify-Mark]

Hi @rsuique777,

To fulfill your unique requirements, custom development may be necessary.

You might want to explore custom solutions, or consider an alternative. For instance, you could use the Easify Product Options app, which only requires a few simple setup steps. Here’s a quick demo 🤗:

• Product Page:

• App Settings:

If you're interested in trying it out, feel free to let me know, or you can reach out to the Easify team for quick assistance.

[rsuique777]

I am interested in trying this out, can you please help me? Maybe send me a video while you made this. 

Note:

1. I want to show a contact us form so that we can connect with customer, if they select "I dont know my size".

2. I want to keep showing them the images , for measurement terms reference, even if they know their size.