Want to add a Product Detail Dropdown (That shows Product title, image and price) inside a contact form in shopify

Question

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>

Two questions in one 1) why only 50 options are shown - not clear from provided info 2) why image is not shown - clear from provided info — Емил Цоков, Feb 08 '23 at 20:18

score 0 · Answer 1 · answered Feb 08 '23 at 20:25

On the first question why displaying only 50 products: This could because of some data restriction from Shopify. Did you check that collections['all'].products in the current context has length more than 50?

On the second one "just showing product titles and product image path, not the actual image." {{ product.featured_image}} is probably just the image path not 'actual' image. Also the HTML <option> tag can contain only text inside it. It could not contain tag which is your intention. For that you will need custom select implementation.

Check this thread How to add images in select list?

Want to add a Product Detail Dropdown (That shows Product title, image and price) inside a contact form in shopify

1 Answers1