Second Image on Hover - Collection Page

Second Image on Hover - Collection Page

ChrisW3
Pathfinder
256 1 15

Looking to show the second product image on hover on our collection page:

https://www.physioworldshop.co.uk/collections/pilates-equipment

 

I have seen the "reveal" module everywhere but cannot get it to work.

 

Can anyone advise?

 

Thanks

 

Replies 4 (4)

ShreyaRevize
Shopify Partner
55 5 11

Hey @ChrisW3 

To add a secondary image on hover for the collection page in the Supply theme for Shopify, you'll need to modify the theme's Liquid, CSS. Below are the steps and the full code to achieve this.

Step 1: Add CSS for Hover Effect

  1. Go to your Shopify Admin.

  2. Navigate to Online Store > Themes.

  3. Click Actions > Edit Code on the Supply theme.

  4. In the Assets folder, locate and open the file named theme.scss.liquid or theme.css.liquid.

  5. Add the following CSS code at the bottom of the file

 

 

/* Secondary Image on Hover */
.collection-grid-item {
  position: relative;
  overflow: hidden;
}

.collection-grid-item img {
  transition: opacity 0.3s ease;
}

.collection-grid-item .primary-image {
  opacity: 1;
}

.collection-grid-item .secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.collection-grid-item:hover .primary-image {
  opacity: 0;
}

.collection-grid-item:hover .secondary-image {
  opacity: 1;
}

 

 

 

Step 2: Modify the Collection Grid Item Liquid Code

  1. In the Sections folder, find main-collection.liquid or collection-template.liquid.

  2. Find the loop that renders the collection grid items. It will look similar to the snippet below

  3. Replace the existing code with the code below. This ensures that the secondary image is displayed if it exists.

 

 

{% for product in collection.products %}
  <div class="collection-grid-item">
    <a href="{{ product.url }}">
      <img src="{{ product.featured_image | img_url: '300x' }}" alt="{{ product.featured_image.alt }}" class="primary-image">
      {% if product.images.size > 1 %}
        <img src="{{ product.images[1] | img_url: '300x' }}" alt="{{ product.images[1].alt }}" class="secondary-image">
      {% endif %}
    </a>
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

 

 

 
Give it a try and don't hesitate to let me know if you need further assistance!

Cheers,
Shreya

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com
ChrisW3
Pathfinder
256 1 15

Thanks for your reply, struggling to find the right collection template.

 

I have "collection-template.liquid", which is below. I also have "collection-grid-item.liquid" and "product-grid-item.liquid"

 

 

 

 

{% assign limit = section.settings.grid | times: section.settings.rows %}
{% if section.settings.rm %}
{% style %}
  button.read-more{
    display:none;
  }
  @media(max-width:786px){
.ancdesc{
  height: 63px; 
    overflow: hidden;
    transition: height 0.4s ease-in-out;
}
    button.read-more {
      display:block;
    background: #00aeef;
    border: none;
    padding: 5px 10px;
    color: #fff;
    border-radius: 3px;
    margin-top: 10px;
}
  }
{% endstyle %}  
  {% endif %}
{% paginate collection.products by 300 %}
  {% include 'breadcrumb' %}

  {% assign has_sidebar = false %}
  {% if collection.all_tags.size > 0 and section.settings.enable_sidebar %}
    {% assign has_sidebar = true %}
  {% endif %}
  <div id="CollectionSection" data-section-id="{{ section.id }}" data-section-type="collection-template">
    <div class="grid grid-border">
      {% if has_sidebar %}
        <aside class="sidebar grid-item large--one-fifth collection-filters" id="collectionFilters">
          {% include 'collection-sidebar' %}
        </aside>
      {% endif %}

      <div class="grid-item{% if has_sidebar %} large--four-fifths grid-border--left{% endif %}">
        {% comment %}
          Different markup if description is set
        {% endcomment %}
        {% if collection.description != blank %}
          <header class="section-header">
            <h1>{{ collection.metafields.custom.collectionh1 }}</h1>
            <div class="rte rte--header ancdesc">
              {{ collection.description }}
            </div>
            {% if section.settings.rm %}
             <button class="read-more">Read More</button>
            {% endif %}
          </header>
          <hr
            {% if has_sidebar %}
              class="hr--offset-left"
            {% endif %}
          >
          <div class="section-header">
            <div class="section-header--right">
              {% include 'collection-sorting' %}
              {% include 'collection-views' %}
              {% include 'toggle-filters' %}
            </div>
          </div>
        {% else %}
          <header class="section-header">
            <h1 class="section-header--title section-header--left h1">{{ collection.title }}</h1>
            <div class="section-header--right">
              {% include 'collection-sorting' %}
              {% include 'collection-views' %}
              {% include 'toggle-filters' %}
            </div>
          </header>
        {% endif %}

        <div class="grid-uniform ">
          {%- case section.settings.grid -%}
            {%- when '2' -%}
              {%- assign grid_item_width = 'medium--one-half large--one-half' -%}
              {%- assign image_size = '540x600' -%}
              {%- assign width = '540' -%}
              {%- assign height = '600' -%}
            {%- when '3' -%}
              {%- assign grid_item_width = 'small--one-half medium--one-third large--one-third' -%}
              {%- assign image_size = '345x550' -%}
              {%- assign width = '345' -%}
              {%- assign height = '550' -%}
            {%- when '4' -%}
              {%- assign grid_item_width = 'small--one-half medium--one-quarter large--one-quarter' -%}
              {%- assign image_size = '250x' -%}
              {%- assign width = '250' -%}
              {%- assign height = '225' -%}
            {%- when '5' -%}
              {%- assign grid_item_width = 'small--one-half medium--one-fifth large--one-fifth' -%}
              {%- assign image_size = '195x' -%}
              {%- assign width = '195' -%}
              {%- assign height = '125' -%}
          {%- endcase -%}

          {% for product in collection.products %}
            {% comment %}
              {% if has_sidebar %}
                {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
              {% else %}
                {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
              {% endif %}
            {% endcomment %}
            {% if product.id == 5304806211745 %}
              {% include 'product-grid-item-taxoff' with grid_item_width %}
            {% else %}
              {% include 'product-grid-item' with grid_item_width %}
            {% endif %}
          {% else %}
            <div class="grid-item">
              <p>{{ 'collections.general.no_matches' | t }}</p>
            </div>
          {% endfor %}
        </div>
      </div>

      {% if paginate.pages > 1 %}
        <div class="grid-item pagination-border-top">
          <div class="grid">
            <div class="grid-item{% if has_sidebar %} large--four-fifths push--large--one-fifth{% endif %}">
              <div class="text-center">
                {% include 'pagination-custom' %}
              </div>
            </div>
          </div>
        </div>
      {% endif %}
    </div>
  </div>
{% endpaginate %}

<script>
  $(document).ready(function(){
  $(".grid-uniform .grid-item p").addClass("prd-name");
    {% if section.settings.rm %}
    $(".read-more").click(function(){
        var textContainer = $(this).siblings(".ancdesc");

        if (textContainer.height() === 63) {
            textContainer.animate({ height: textContainer[0].scrollHeight }, 400);
            $(this).text("Read Less");
        } else {
            textContainer.animate({ height: "63px" }, 400);
            $(this).text("Read More");
        }
    });
      {% endif %}
  });
</script>
{% if collection.url contains 'couch' %}
  <div class="faq">
    {{ pages.FAQs.content }}
  </div>
{% endif %}
{% if collection.url contains 'couch' %}
  {{ pages.related.content }}
{% endif %}

 

 

 

ShreyaRevize
Shopify Partner
55 5 11

Hey @ChrisW3,

You will find the code in product-grid-item.liquid

Please give it a try, and feel free to reach out if you need any assistance 

Cheers,
Shreya

With 7+ years of experience helping Shopify merchants succeed | www.untechnickle.com
Creator of Revize – Empowering customers to fix mistakes and buy more after purchase 
Let shoppers edit shipping addresses, change variants/quantities, add products, and more!
https://apps.shopify.com/revize | hello@untechnickle.com
ChrisW3
Pathfinder
256 1 15

Hi Shreya,

 

This is the code from "product-grid-item.liquid" - still not sure where it should go:

 

{% 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 }}" class="product-grid-item">
    <div class="product-grid-image">
      <div class="product-grid-image--centered">
        {% if product.compare_at_price and product.compare_at_price > product.price %}
          {% assign discount = product.compare_at_price
            | minus: product.price
            | times: 100.0
            | divided_by: product.compare_at_price
            | round
          %}
          <div class="sale-badge grid-sale-badge">
            SALE<br>
            {{ discount }}% OFF
          </div>
        {% endif %}

        {% 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="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 %}
              >
            </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>
    <span
      class=" stamped-product-reviews-badge"
      data-product-sku="{{ product.handle }}"
      data-id="{{ product.id }}"
      data-product-type="{{product.type}}"
      data-product-title="{{product.title}}"
      style="display:block;"
    >
      {{- product.metafields.stamped.badge -}}
    </span>

    <div class="product-item--price">
      <span class="h1 medium--left">
        {% if on_sale %}
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span></span></span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}

        {% include 'price' with product.price %}

        {% if on_sale %}
          <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="stamped-product-reviews-badge stamped-main-badge"
        data-id="{{ product.id }}"
        data-product-sku="{{ product.handle }}"
        data-product-type="{{product.type}}"
        data-product-title="{{product.title}}"
        style="display: inline-block;"
      >
        {{- product.metafields.stamped.badge -}}
      </span>
    {% endif %}
  </a>
</div>