I'm wanting to specify which product image to display on hover on my products page, but can't figure out how to choose the second image in HTML.
So far I've tried two methods for this bit of code:
{{ product.images | product_image_url | constrain: 20 }}
I'll also add that this code exists too, but it only specifies the default image:
{{ product.image | product_image_url | constrain: 20 }}
The methods I've tried are these:
{{ product.images[2] | product_image_url | constrain: 20 }}
{{ product.images | times 2 | product_image_url | constrain: 20 }}
Neither of which have worked, and I've also tried using loops such as:
{% for image in product.images offset:1 %}
{% for image in product.images limit:1 %}
However, these together seem to show all images (and I'm not sure if you can put two loops together like that, but one or the other doesn't achieve what I'm wanting to do.
Is there any way to specify the second image?