Product Detail Dropdown (That shows Product title, image and price) inside a contact form Shopify

[irum_s]

I am trying to add a select dropdown (That shows Product title, image and price) form field inside a contact form that enable user to select product and selected products show under the field. I am using this code but it only display 50 product and just showing product titles and product image path, not the actual image.

<label for="ContactFormProductNameField">Products</label>
    <select id="ContactFormProductNameField" name="contact[Product]" required>
        <option selected disabled>Choose your product</option>
        <option value="Others - No product-related concerns">Others - No product-related concerns</option>
        {% for product in collections['all'].products %} 
             <option value="{{ product.title }}">{{ product.title}}{{ product.featured_image}}</option>
        {% endfor %}   
              
    </select>

[SB_90]

Hi @irum_s

Unfortunately, the element is a text-only element.

Therefore, the HTML tags that would normally generate an actual image are removed when this is rendered.

You’ll need a JS based solution, I would think, in order to get this to work correctly.

[irum_s]

[quote=“SB_90”]
Hi @irum_s

Unfortunately, the

Can you send me the required Js based code. Also this code is only displaying 50 products I have tried many other solutions but couldn’t find the the right one to display all products.

The most important thing I am looking for is how to show these selected options under the drop-down field ?