How To Show Second Image on Hover in Collection Page Of Debut Theme

In this tutorial, you’ll learn how to show a second image on hover in the collection page of the Debut theme. This is a great way to give your users more information about the items in your collection.

You’ll learn how to show a second image on hover on the collection page of your Debut theme website. This is a great way to showcase more images of your products or services and can be easily implemented by following these simple steps.

Debut Theme Customization

product-card-grid.liquid

Replace the following code in the product-card-grid.liquid

 <div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>

With following code

<div class="{% if section.settings.show_second_image %}{% if product.images.size > 1 %} has-secondary{% endif %}{% endif %}" style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
{% if section.settings.show_second_image %}
        {% if product.images.size > 1 %}
          {% unless grid_image_width %}
  {%- assign grid_image_width = '600x600' -%}
{% endunless %}

     <img class="secondary" alt="{{ product.images.last.alt | escape }}" src="{{ product.images.last | img_url: grid_image_width }}" >
    {% endif %}
  {% endif %}

      </div>

Theme.css

Add the following code in the theme.css file

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div.has-secondary img.secondary{
    position: absolute;
    top: 0;
    margin: 0 auto;
}

div.has-secondary img.secondary{
 display:none;
}

.product-card:hover img.secondary{
 display:block !important;
-webkit-animation: fade-in 0.5s;
    animation: fade-in 0.5s;
}

.product-card:hover .has-secondary:first-child img {
  display:none;
}

Collection-template.liquid

Add the following code in collection-template.liquid file on line number 436:

{
      "type": "checkbox",
      "id": "show_second_image",
      "label": {
        "en": "Enable second image on hover"
      },
      "default": true
    },