How do I make image change on hover for a product image? - Narrative Theme

Store Design
1

I’m trying to make it so that the image changes on hover for product images on Narrative theme.

How do I go about this?

https://9zkljeaaw89jydya-61511631065.shopifypreview.com

1 Like
2

@CureSupply

yes its possible to make some customization code can you please share code product card or product gird item or card product may be this file option

3

Thanks for getting back to me so quickly.

This is the code for product-card.liquid:


  

    {% if product.featured_media %}
      {% include 'card-image', type: product.featured_media.preview_image, grid_style: grid_style %}
    {% endif %}

    

      {% if section.settings.show_vendor %}
        
{{ product.vendor }}

      {% endif %}

      ### {{ product.title }}

      {% if product.available %}
        
          {%- assign variant = product.selected_or_first_available_variant %}
          {% 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.price' | t }} 
              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
            {% else %}
              {{ 'products.product.sale_price' | t }}
              {{ product.price | money_without_trailing_zeros }}

              {{ 'products.product.regular_price' | t }}
              
                {{ product.compare_at_price | money_without_trailing_zeros }}
              
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% 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 %}
              {{ product.price | money_without_trailing_zeros }}
              {%- if variant.available and variant.unit_price_measurement -%}
                {% include 'product-unit-price', variant: variant %}
              {% endif %}
            {% endif %}
          {% endif %}
        

      {% else %}
        
          {{ 'products.product.sold_out' | t }}
        

      {% endif %}
    

    {% if product.compare_at_price > product.price %}
      {% assign sale_text_length = 'products.product.on_sale' | t | size %}
      
        {{ 'products.product.on_sale' | t }}
      
    {% endif %}