Debut Theme - Hover Effect on Product Image

New Member
4 0 0

Hi, 

 

I'm using the debut theme and have used the code below. Once applied, its duplicates my vendor and It shows the other image under the first one instead of revealing it on hover. 

 

Here is my screenshot: (the second image also sits under/above the first image instead of revealing and out of alignment)

duplicate.JPG

 - https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images#reveal-...

Please help me make the same for this theme as well. 

Thanks, 

 

1. update the product-card-grid.liquid in Snippets with the following code.

{% 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[1] | img_url: grid_image_width }}" alt="{{ product.images[1].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' %}
    </div>
  </a>
</div>



2. Add these CSS to the very bottom of theme.scss.liquid

.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;
}

 

 

 

0 Likes
Shopify Expert
665 170 199

Hi, @tsmith1995 ,

This is Evita from On The Map.

 

Can you add your store URL? I think somethings off with CSS.

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes