Customize Shopify collection cards to display variant images on hover

Customize Shopify collection cards to display variant images on hover

In this Shopify tutorial, we'll show you how to display variant images when hovering over color swatches on the collection card. This advanced collection card customization feature isn’t available by default in Shopify, but with our step-by-step guide, you can easily implement it for your store.

Who should have display variant images on hover feature?

The feature allows customers to view variant-specific images when they hover over color swatches or product variants on a Shopify collection product card.

 

Why to have this feature, Benefits Of display variant images on hover feature

To enhance the customer shopping experience by allowing them to see how different product variants (such as colors) look directly from the collection page without navigating to the product page.

1. Better Visual Experience

  • Attracts customers more: Showing different product options when someone hovers over the image lets them see more without clicking on each product page.
  • Shows variety: Displaying different colors or styles helps customers see all the available options at a glance.

2. Faster Product Browsing

  • Saves time: Customers can quickly check other options like color or style without visiting each product page.
  • Easier decisions: Shoppers are more likely to buy when they can easily compare options from the collection page.

3. More Engagement

  • Makes the site more fun: Hover effects create a lively, interactive experience, making it more exciting for visitors.
  • Happier users: A smooth, engaging experience keeps people on the site longer, increasing the chances they'll buy something.

Here's a step by step guide to set it up

  • Go to your store>settings>custom data>add definition
  • Now add definition as shown in images



  • Create another metafield as shown in images





  • Now go to product>select product>bulk edit
  • Now select metafield, fill the value and save
  • Now go to Online store>themes>edit code>card-product.liquid
  • Paste the given code in card-product as shown in image


{%- if card_product.tags contains 'color_swatch' -%}
 {% if variant_type %} 
 {% render 'grt-var' variant_type:variant_type , variants:card_product.variants %}
 {% endif%}
 {%- endif -%}


  • Now add a snippet>grt-variant-swatches.liquid
  • Paste the given code as shown in images


{%liquid 
 assign color_sw_enable = false
%}
<div>{{ variant.metafields.custom.variant_color_code }}</div>
<div>{{ variant.metafields.custom.variant_img_url }}</div>

<div class="grt-variant_swatch-box" defimg="{{ defimg | image_url: width: 533 }}">
{% for variant in variants %}
 {%liquid
 assign sw_color = "#fff"
 if variant.metafields.custom.variant_color_code != blank
 assign sw_color = variant.metafields.custom.variant_color_code
 endif
 
 if variant.metafields.custom.variant_img_url != blank
 assign sw_color = "url('" | append : variant.metafields.custom.variant_img_url | append : "');background-size:100%;"
 endif
 %}
 <div class="variant_swatch-box" data-featuredimg="{{ variant.featured_image.src | image_url: width: 533 }}" style="background:{{ sw_color }}"></div>
 {% endfor %}
</div>


  • Now go to base.css and paste the given code



.grt-variant_swatch-box {
 position: relative;
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 z-index: 12
}

.grt-variant_swatch-box.left {
 justify-content: flex-start
}

.grt-variant_swatch-box .variant_swatch-box {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: #fff;
 margin: 2px 4px;
 display: block;
 border: solid 1px #dddcdc
}

.variant_color-swatch {width: 50px; height: 50px; border-radius: 50%; background: #fff; margin: 2px 4px; display: block; border: solid 1px #dddcdc; display: inline-flex; margin-right: 8px;
 position:relative; z-index:3;}
.variant_color-swatch.disabled{opacity:0.5;}
.variant_color-swatch{cursor:pointer;}
.tooltipmsg{position: absolute; white-space: nowrap; color:#fff; transform: translate(-50%, -50%); left: 50%; top: -50%; background: rgba(0,0,0,0.7); padding: 4px 8px; border-radius: 4px; display:none;}
.variant_color-swatch:hover .tooltipmsg{display:block;}
.variant_color-swatch svg {max-width: 100%; max-height: 100%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity:0.3;}


  • Now Go to global.js and paste the given code



$(function () {
 $(".grt-variant_swatch-box .variant_swatch-box").hover(function () {
 var _featuredefimg = $(this).attr("data-featuredimg");
 $(this).parents(".card.card--media").find(".featured_media_img_1").removeAttr("srcset").attr("src",_featuredefimg);
 })
})


  • Make sure You have added the tag color_swatch
Back to blog
null