Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I am trying to add the the image url as a data attribute so that I can use it for Java Script, however it the data it gives me is not the variant image url. In the below code you would be looking at where it says 'data-image-url', I would apprecaite any help.
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="product-form">
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
{% assign option_position = forloop.index %}
<fieldset>
{%- for value in option.values -%}
<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="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
data-image-url="{{ variant.featured_image | img_url: 'small' }}">
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{value}}
</label>
{%- endfor -%}
</fieldset>
{% endfor %}
{% endunless %}
{{ current_variant.price | money }}
<label for="Quantity">quantity</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
<button type="submit" name="add" id="AddToCart">Add to cart</button>
</form>
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025