Liquid, JavaScript, themes, sales channels
Solved! Go to the solution
This is an accepted solution.
<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-title="{{ variant.title }}" data-img="{{variant.image|img_url:"master"}}"value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->
This is an accepted solution.
This is an accepted solution.
add js for variant selection
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
This is an accepted solution.
<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-title="{{ variant.title }}" data-img="{{variant.image|img_url:"master"}}"value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->
<!---- variants calll---->
<select id="variant-select" name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option data-prices="{{variant.price | money }}" data-title="{{ variant.title }}" {%if variant.image != blank %}data-img="{{variant.image|img_url:"master"}}"{% endif%} value="{{variant.id}}">{{ variant.title }} for {{ variant.price | money_with_currency }}
{% if variant.price < variant.compare_at_price %} usually {{ variant.compare_at_price | money_with_currency }}{% endif %}</option>
{% else %}
<option value="{{variant.id}}" disabled="disabled">{{ variant.title }} - sold out!</option>
{% endif %}
{% endfor %}
</select>
<!---- end variants calll---->
This is an accepted solution.
This is an accepted solution.
add js for variant selection
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
Hi, where do you have to past that in order to change the image, when changing the (color) variant?
Hi,
This code would not work if you have a slider or carousel. Anyways. I was able to obtain this with no APP or external library.
If you have Dawn theme or Any Shopify 2.0 FREE themes, this should work. No APPs or EXTERNAL library needed. The code is made to call and listens all the variant options related images. You can have multiple variants options. Works with the Dawn product settings too, that includes thumbnail carousel and even the media size settings.
See video for more information.
We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024