Question 11703 in Shopify Question posted in
The Shopify help center can be found here.

Shopify Liquid – Get the URL for a variant's image

On a Shopify product page, I can loop through all the variants and get information about them like this:

  {% for variants in product.variants %}
  {{ variants.id }}<br>
  {{ variants.sku }}<br>
  {{ variants.title}}<br>
  {{ variants.price | divided_by: 100}}<br>
  {% endfor %}

This works perfectly fine, however when I try and get the variant image in the loop like this:

{{ variants.image}}

I have also tried using:

{{ variants.featured_image.src}}

Which produces exactly the same result.

The output is simpy products and then the name of the image file. For example ‘products/my-image.jpg‘.

This is obviously not the path to the image and when I try and display this within an image tag, a broken image is produced.

I am trying to get the path to the image that is stored on Shopify’s CDN for this variant product, which will look something like https://cdn.shopify.com/s/files/1/0022/4572/2212/products/WI1M1L1F1B1_grande.jpg?v=1656698226.

Does anyone know how this can be achieved within the loop I am using above?

Tags:

2

Answers


  1. 0

    You are looking for this

    {{ variant.image.src | product_img_url: '200x' }}

    I suggest you to take a look here to find many other useful functions: https://www.shopify.ca/partners/shopify-cheat-sheet

    Also is useful to download a free theme (Dawn for example) and use it as reference.

    Login or Signup to reply.
  2. 0

    Here is a code example to show each variant image and url :

    <div class="product_thumbnails">
{% for variant in product.variants %}
            <a href="{{ variant.url }}">
              <div class="h-[50px] w-[50px] bg-[#E6ECEB] rounded shrink-0 p-1">
          
                {{ variant.image | image_url: width: 50 | image_tag }}
  
  
                  </div>
            </a>
            
        {% endfor %}
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search