Hover over Images for Debut Theme?

MCMod-ify
New Member
2 0 0

Has anyone had any luck implementing or modifying the directions found below for the Debut theme?

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

I can't get this to work and haven't had any luck tinkering around.

Site is www.mcmodify.com

 

Thank you!!!

0 Likes
Tmac
Shopify Partner
9 0 3

This code worked in my case.
You'll need to be comfortable editing HTML/CSS. 
I would back up your theme prior to making any changes.

I replaced the code in product-card-grid.liquid with:

<!-- product-card-grid.liquid -->
{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
    <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>

Then I follow the steps in Shopify's document "Add a hover effect to product images on your collection pages" 

I wanted to "show an alternate product image with custom text on hover"

This is what the end result of my code looks in product-card-grid.liquid

{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}


<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    
    <div class="reveal">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
      <div class="hidden">
      <img class="grid-view-item__image" src="{{ product.images.last | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.images.last.alt | escape }}" />
		<div class="caption">
      <div class="centered">
        <div class="h4 grid-view-item__title">{{ product.title }}</div>
        <div class="grid-view-item__meta">{% include 'product-price' %}</div>
      </div><!-- end of .centered -->
   	 </div><!-- end of .caption -->
 	 </div><!-- end of .hidden -->
    </div><!-- end of .reveal -->
  </a>
</div>

 

Customizations
------------------------------------------
I had to customize my product-price.liquid to get the price to center on the homepage but revert back to left-align for every other page. I used a liquid if statement, I'm sure there is a simpler and cleaner way but it worked for me.
This adds an inline style of "margin:0 auto" to center the text for only the homepage.
If you wanted to have your price centered on every page I'd just use CSS.

product-price.liquid edit (around line 26")

{% if template.name == "index"%}

  <div class="price__regular" style="margin:0 auto;">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% else %}
            {{ money_price }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </dd>
  </div>

{% else %}

   <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% else %}
            {{ money_price }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </dd>
  </div>

  {% endif %}


Hope this helps someone.

Tmac
Shopify Partner
9 0 3

The code above in product-card-grid.liquid will output the price of $19.99 for every product.

To fix this change "{% include 'product-price' %}" to "{% include 'product-price', variant: product %}" with in product-card-grid.liquid (line 17)
 

0 Likes
Shinelala
New Member
2 0 0

It's work ! Thanks !

0 Likes
Shinelala
New Member
2 0 0

Btw , My final code is this  :

{% unless grid_image_width %}
  {%- assign grid_image_width = '300x300' -%}
{% endunless %}
{%- assign grid_image_scale = '2' -%}
 
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
  <a class="grid-view-item__link" href="{{ product.url | within: collection }}">
    
    <div class="reveal">
    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.featured_image.alt }}">
      <div class="hidden">
      <img class="grid-view-item__image" src="{{ product.images.last | img_url: grid_image_width, scale: grid_image_scale }}" alt="{{ product.images.last.alt | escape }}" />
        
  </div><!-- end of .hidden -->
    </div><!-- end of .reveal -->
  </a>
</div>
 
  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>
 
  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>
 
  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

 

0 Likes