output variant image in option loop

dcus-tfd
New Member
3 0 0

Using an option loop within the product form I am trying to output an image in a data attribute if assigned to each variant under each option is this possible? my loop code is below

{% for value in option.values %}
<option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}


Thanks in advance

0 Likes
Jasoliya
Shopify Expert
4299 569 1073

Hi @dcus-tfd 

You have to use ' image.attached_to_variant?' but you can not get this image in option loop you have to add withing variant loop so you can get it like:

{% if image.attached_to_variant? %}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
dcus-tfd
New Member
3 0 0

great thanks for the response

0 Likes
Jose13
Shopify Partner
117 1 12

Hey! Do you have any insight as to how would the variant loop look? I'm having a similar issue than OP, I changed the variant selector on the product page to radio buttons instead of dropdown, and I want each radio button to display the image assigned to the variant, but I'm stuck. I've tried calling variant.image instead of featured image, but it won't work because I'm looping over the options, not the variants.

{% unless product.has_only_default_variant %}
              {% for option in product.options_with_values %}
                <label style="font-weight: 700; font-size: 1.2em;"{% if option.name == 'default' %}class="label--hidden" {% endif %}for="currentVariant-{{ forloop.index0 }}">
                 ¡Escoge la versión que quieres!
                </label>
                {% assign option_position = forloop.index %}
                <fieldset class="botones-radio">
                  {%- for value in option.values -%}
                  <div class="imagen-mas-boton">
                     <input type="radio" class="single-option-selector-{{ section.id }} "
                        {% if option.selected_value == value %} checked="checked"{% endif %}
                        value="{{ value | escape }}"
                        data-index="option{{option_position}}"
                        name="{{ option.name | handleize }}"
                        id="SingleOptionSelector-{{option_position}}">
                       
                       

         
                   
                       
                        <img src="{{ featured_image | img_url: '200x' }}" />
               
                   
                      <label style="text-align: center;" for="SingleOptionSelector-{{ forloop.index0 }}">
                        {{value}} {{current_variant.price | money }}
                      </label>
                  
                    </div>
                  {%- endfor -%}
                </fieldset>
              {% endfor %}
            {% endunless %}

 

0 Likes