Hover on product to display last image

Highlighted
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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
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
Highlighted
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
Highlighted
Tourist
5 0 0

Hi,

 

It's olly_l on a different account, i forgot my other account details :D

Ignore my previous post above, not sure what was going on there. 

 

Below is how i got it working in the Supply theme. I put the <div class="reveal"> tag further up in the nested <div> tags.

Maybe something like that will also work in the Venture theme. Might take a bit of trial and error.

 

Olly

 

 

 

{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-quarter medium-down--one-half' %}
{% endunless %}

{% unless image_size %}
  {%- assign image_size = '600x600' -%}
{% endunless %}

{% unless current_collection %}
  {% assign current_collection = collection %}
{% endunless %}

{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}

{% assign sold_out = true %}
{% if product.available  %}
  {% assign sold_out = false %}
{% endif %}

<div class="grid-item {{ grid_item_width }}{% if sold_out %} sold-out{% endif %}{% if on_sale %} on-sale{% endif %}">

  <a href="{{ product.url | within: current_collection }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if sold_out %}
          <div class="badge badge--sold-out"><span class="badge-label">{{ 'products.product.sold_out' | t }}</span></div>
        {% endif %}

        {% if product.featured_image %}
          {%- assign image = product.featured_image -%}
          {%- assign max_width = width | plus: 0 -%}
          {%- assign max_height = height | plus: 0 -%}

          {%- include 'image-logic' with width: max_width, height: max_height -%}

          {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          <div class="reveal">
            <div class="lazyload__image-wrapper no-js" style="max-width: {{ max_width }}px">
              <div style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">

                <img
                  class="lazyload no-js"
                  data-src="{{ img_url }}"
                  data-widths="[125, 180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}"
                  {% comment %}style="max-height: {{ height }}px;">{% endcomment %}>

                  <img class="hidden" src="{{ product.images[1] | img_url: '450x450' }}" alt="{{ product.images[1].alt | escape }}" />

              </div>
            </div>
          </div>

          <noscript>
           <img src="{{ image | img_url: '580x' }}"
             srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
             alt="{{ image.alt }}" style="opacity:1;">
         </noscript>

        {% else %}
        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
        <div>
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {% endif %}
      </div>
    </div>

    <p>{{ product.title }}</p>

    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
        {% endif %}
        {% include 'price' with product.price %}
        {% if on_sale and section.settings.product_show_compare_at_price %}
          <small>
            <s>
              <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
              {% include 'price' with product.compare_at_price %}
            </s>
          </small>
        {% endif %}
      </span>

      {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
        {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
      {%- endif -%}
    </div>
    {% if on_sale and section.settings.product_show_saved_amount %}
      <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
        {% assign compare_price = product.compare_at_price %}
        {% assign product_price = product.price %}
        {% include 'price-sale' %}
      </div>
    {% endif %}

    {% if section.settings.product_reviews_enable %}
      <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    {% endif %}
  </a>

</div>

 

 

0 Likes
Highlighted
Tourist
4 0 1

Here's what you do to get "Hover effect on product and display last image of that particular product"

Note :- Please backup file before performing modification

Step 1) Copy the code below :

<div class="product-card__overlay">
<img class="hidden" src="{{ product.images.last | img_url: '220x' }}" alt="{{ product.images.last.alt | escape }}" />
</div>

Step 2) Open "Product-card.Liquid" (Theme -> Edit Code -> Snippet -> Product-card.liquid)

In there search for "<noscript>" . Now exactly above it Paste the code .. it should look like this 

<div class="product-card__overlay">
<img class="hidden" src="{{ product.images.last | img_url: '220x' }}" alt="{{ product.images.last.alt | escape }}" />
</div>
<noscript>

Step 3) Now go to last line of the file and Remove the code shown below :

<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>

Thats it all done Enjoy .. Hover effect on product venture theme shopify

 

0 Likes