Hover on product to display last image

New Member
2 0 0

Hello. I am using the theme 'Venture'. I am trying to implement https://help.shopify.com/en/themes/customization/collections/add-hover-effect-to-product-images#reve..., but I am running into some problems. Namely, the liquid file for product-card is completely different to what the article is supplying. I am new to using liquid, but I attempted a few possible solutions, none of which worked.

 

<!-- /snippets/product-card.liquid -->

{% comment %}
  The product card snippet is passed a liquid object, used in this file
  as "product". The object is either "product" or "item", the latter if
  it is from search results.
{% endcomment %}

{%- assign current_variant = product.selected_or_first_available_variant -%}

<a href="{{ product.url | within: collection }}" class="product-card">
  {% comment %} <div class="reveal">
        	<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
          	<img class="hidden" src="{{ product.images.last | img_url: '480x480' }}" alt="{{ product.images.last.alt | escape }}" class="product-card__image">
        </div> {% endcomment %}
  {% assign image = product.featured_image %}
  <div class="product-card__image-container">
    <div class="product-card__image-wrapper">
      <div class="product-card__image js" style="max-width: {% include 'image-width' with image: image, width: 235 %}px;" data-image-id="{{ image.id }}" data-image-with-placeholder-wrapper>
        <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <img class="lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">
          
        </div>
        <div class="placeholder-background placeholder-background--animation" data-image-placeholder></div>
      </div>
      <noscript>
      	<div class="reveal">
        	<img src="{{ product.featured_image.src | img_url: '480x480' }}" alt="{{ product.featured_image.alt | escape }}" class="product-card__image">
          	<img class="hidden" src="{{ product.images.last | img_url: '480x480' }}" alt="{{ product.images.last.alt | escape }}" class="product-card__image">
        </div>
      </noscript>
    </div>
  </div>
  <div class="product-card__info">
    {% if settings.product_vendor_enable %}
      <div class="product-card__brand">{{ product.vendor }}</div>
    {% endif %}

    <div class="product-card__name">{{ product.title }}</div>

    {% if product.available %}
      <div class="product-card__price">
        {% if product.compare_at_price > product.price %}
          {% comment %}
            Product is on sale
          {% endcomment %}
          {% if product.price_varies %}
            {% assign sale_price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>

            <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% else %}
          {% comment %}
            Not on sale, but could still have varying prices
          {% endcomment %}
          {% if product.price_varies %}
            {% assign price = product.price | money_without_trailing_zeros %}
            {{ 'products.product.from_text_html' | t: price: price }}
          {% else %}
            <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}

        {% endif %}
        {%- unless product.price_varies -%}
          {%- if current_variant.unit_price_measurement -%}
            {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
          {%- endif -%}
        {%- endunless -%}
      </div>
    {% else %}
      <div class="product-card__availability">
        {{ 'products.product.sold_out' | t }}
      </div>
    {% endif %}
  </div>

  {% if product.compare_at_price > product.price %}
    {% comment %}
      A visually-hidden label before regular/sale prices clarifies
      prices for screen readers, so hide the sale tag from them.
    {% endcomment %}
    <div class="product-tag product-tag--absolute" aria-hidden="true">
      {{ 'products.product.on_sale' | t }}
    </div>
  {% endif %}
  <div class="product-card__overlay">
    {% assign view_string_length = 'products.product.view' | t | size %}
    <span class="btn product-card__overlay-btn {% if view_string_length > 8 %} btn--narrow{% endif %}">{{ 'products.product.view' | t }}</span>
  </div>
</a>

This is the current code, that is showing no change to the website. I noticed <img> tags similar to those in the article, and implemented exactly what it said to do, but one is in a comment section and the other in a <noscript> tag. I then targeted this tag

<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <img class="lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">
          
        </div>

And turned it into this:

<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <div class = "reveal">
          <img class="lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">
          <img class="hidden lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">
          </div>
        </div>

However this just broke the product sheet, as it did not display either image.

I then tested seeing where the fault was coming from, and this made the image come back:

<div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100 }}%;">
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <div class = "reveal">
          <img class="lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">
          </div>
        </div>

Which leads me to believe that the issue is with this tag:

<img class="hidden lazyload"
            data-src="{{ img_url }}"
            data-widths="[100, 140, 180, 250, 305, 440, 610, 720, 930, 1080]"
            data-aspectratio="{{ image.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="contain"
            data-image
            alt="{{ image.alt | escape }}">

I could really use some help implementing this feature.

Thanks!

 

0 Likes

Hello 

This code changes based on theme.
The tutorial you are trying is applicable for other theme.

Thats why not apply on your theme.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
2 0 0

Hi,

 

I understand that code changes from theme to theme, but this article is actually generic in terms of themes, and does not specify a theme that is specifically needed to implement such a design. In fact, this article mentions using different themes several times.

However, since this code clearly does not work with the theme I am trying to use, would you have any idea of how to achieve the desired effect?

 

Thanks,

Astrobender.

0 Likes
New Member
1 0 0

Hi,

 

I found that if you follow the shopify tutorial, but replace the word 'reveal' with 'product-card' in the CSS then everything works fine in Debut, i assume it would also work for Venture.

I guess there's some issue with using the hover selector on the nested <div> tags...?

I'm pretty new to liquid/html/css so i'd be interested if anyone can explain what is the exact cause of this problem, i.e. why doesn't 'reveal' work and why does 'product-card' work?

 

Thanks

Olly 

0 Likes