Customized Order Option with Image Upload Possibly JavaScript Help

Highlighted
New Member
1 0 0

Hello. I have a website where I want people to be able to have the option to customize the product with an image that they upload. I have implemented this and they are able to upload an image but it is not required. Here is a very helpful link that I found to solve this problem without the use of an app.

Very Helpful Link For Customizable Products: https://www.envision.io/blogs/ecommerce-pulse/95036801-how-to-create-customizable-products-in-shopif...

However, I want the image upload box to only appear when the user selects to customize the product and then disappear when they go back to the other variant of "No Customization." This is a minor detail but I would love to figure out how it is done. Here is my attempt at the coding. I am sure I'm close but I think I am missing something important.

My website: https://pawfectdog.com/products/hulk-rope-1in-2-5lbs?variant=31926641229907

           {% if template contains 'custom-2' %}
               {% for variant in product.variants %}
                    {% if variant.id == 31926641262675 %}
                          <p class="line-item-property__field">
                          <label for="custom_photo">Photo (JPG or PNG)</label>
                          <input id="custom_photo" type="file" name="properties[Photo]">
                          </p>
                      <style>
                        .ep_inline_block {display:inline-block;vertical-align:middle;margin-left:10px;}
                        .ep_block {display:block;margin-top:10px;margin-bottom:2px;}
                        </style>
                       {% else %}
                    {% endif %}
               {% endfor %}
            {% endif %}
0 Likes