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:
-
I know my size: A form where customers can enter their specific measurements.
-
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!
:
