Did you ever get this figured out? I am having the same issue in the Debut theme.
I used the code below to implement the image change, but it is not working for products that have a variant.
"Copy and paste this at the end of your theme.scss.liquid file:
(I recommend putting a note like <!-- code for image hovering --> before the code below -- just so it's easier for you or someone in your store next time that will modify the theme again what the codes are for.
/* ===============================================
// Reveal module
// =============================================== */
.has-secondary.grid-view-item__link img.secondary{ display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{ display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{ display:none;
}
@media screen and (min-width:767px){
.has-secondary.grid-view-item__link img.secondary{ display:none;
}
.has-secondary.grid-view-item__link:hover img.secondary{ display:block;
}
.has-secondary.grid-view-item__link:hover img.grid-view-item__image{ display:none;
}
}
@media screen and (max-width:767px){
.has-secondary.grid-view-item__link img.secondary{ display:none;
}
}
Next step, open your product-card-grid.liquid file and replace the whole code with this:
(I suggest you copy the old code to a notepad or something so you'll have a copy.)
{% unless grid_image_width %}
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>"
