Skip to content

Instantly share code, notes, and snippets.

@rickydazla
Last active December 17, 2017 02:16
Show Gist options
  • Save rickydazla/9db599b454ab46178b82 to your computer and use it in GitHub Desktop.
Save rickydazla/9db599b454ab46178b82 to your computer and use it in GitHub Desktop.
Shopify Collection thumbnail:hover image swap
<a href="{{ product.url | within: collection }}">
{% assign imgSize = 'medium' %}
{% assign canSwap = false %}
{% if product.images.size > 1 %}
{% assign canSwap = true %}
{% assign swapImg = product.images[1] %}
{% assign swapImgSrc = swapImg.src | product_img_url: imgSize %}
{% assign swapImgAlt = swapImg.alt | escape %}
{% endif %}
<img{% if canSwap %} class="has-swap"{% endif %} src="{{ product.featured_image.src | product_img_url: imgSize }}" alt="{{ product.featured_image.alt | escape }}">
{% if canSwap %}
<img class="swap" src="{{ swapImgSrc }}" alt="{{ swapImgAlt }}">
{% endif %}
</a>
a{
.swap{ display:none;}
&:hover{
.has-swap { display:none;}
.swap{ display:block;}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment