Product Image Hover Effect Not Working in Debut

New Member
5 0 0

Greetings, 

I'm quite inexperienced with HTML & CSS, but I've been trying to implement the hover effect to my product page (which is also my home page) using this guide: https://help.shopify.com/themes/customization/collections/add-hover-effect-to-product-images. I am only trying to implement the "Show an alternate product image on hover" effect. 

I pasted the github code into my theme.scss.liquid asset and pasted the respective code into my product-card-grid.liquid snippet. My whole Snippet code looks like this:

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless product.featured_image == blank %}
    {% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

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

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
        <div class="reveal">
    		<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
    		<img class="hidden" src="{{ product.images.last | img_url: 'large' }}" alt="{{ product.images.last.alt | escape }}" />
    	</div>
  </noscript>

  <div class="h4 grid-view-item__title" aria-hidden="true">{{ product.title }}</div>

  {% include 'product-price', variant: product %}

</div>

I don't see what could be wrong with this since the tutorial literarly required me to copy and paste 2 items, yet the effect does not work. 

 

Thanks in advance!

0 Likes
New Member
2 0 1

Did you figure this out?  Im having the same trouble.  

 

 

0 Likes
New Member
5 0 0

Hey, yes I was. I used this tutorial. Look at the answer by nadinelk. 

 

https://ecommerce.shopify.com/c/ecommerce-design/t/add-hover-effect-to-product-images-debut-theme-41...

0 Likes
Excursionist
17 0 4

I did that solution and it worked, but it has a bug where it changes all the prices to 19.99. Any workaround?

1 Like
New Member
1 0 1

Did you figure this out? I used this code and ran into the same issue with the $19.99 price

1 Like
Highlighted
Tourist
3 0 0