Display an image for a specific Shopify variant

Question

I'm trying to display an image in my Shopify store if a product has a variant of "OS" , if it doesn't then I need to display a different image. I also need to display the title of each variant for the product. This is what I have now, but it doesn't seem to be working.

<div class="homepage-sizechart">
    <div class="sizes">
        {% if product.variants.title contains  'OS' %}
            {{ 'onesize-triangle.png' | asset_url | img_tag }} 
          {% else %}
            {{ 'size-triangle.png' | asset_url | img_tag }} 
        {% endif %}         
        {% for variant in product.variants %}
           <span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %}">{{ variant.title }}</span>
        {% endfor %}      
    </div>
</div>  

Answer 1

product.variants is a collection, so you'll need to loop through it to determine if one of the variants has a title containing 'OS'.

Something like this:

{% assign contains_os = false %}
{% for variant in product.variants %}
  {% if variant.title contains 'OS' %}
    {% assign contains_os = true %}
  {% endif %}
{% endfor %}

<div class="homepage-sizechart">
    <div class="sizes">
        {% if contains_os %}
            {{ 'onesize-triangle.png' | asset_url | img_tag }} 
          {% else %}
            {{ 'size-triangle.png' | asset_url | img_tag }} 
        {% endif %}         
        {% for variant in product.variants %}
           <span class="{{ variant.title }}-product {% if variant.inventory_quantity == 0 %}outofstock{% endif %}">{{ variant.title }}</span>
        {% endfor %}      
    </div>
</div>