Adding a Second Product Image on Hover: A Fun and Personal How-To Journey

The first time I tried to get fancy with my Shopify store—let me tell you, it was like diving headfirst into a whirlpool of digital chaos. I once spent an entire afternoon figuring out how to make a second image appear on hover, and it felt like trying to corral a particularly rambunctious puppy—full of energy and seemingly impossible to control. But getting that smooth transition from a static picture to one bursting with detail felt like a small victory in our online shopping universe.

Today, we're going to unravel the mystery of this little trick that makes your Shopify store pop: how to show a second product image on hover. Félix over at Matubu Coffee is asking the same question—let’s help him out!

Step 1: Selecting Your Theme

Before we dive into the technical sorcery, let's chat about themes. Choosing the right theme on Shopify is akin to picking the perfect outfit: it sets the tone. Most modern Shopify themes have built-in support for alternate image on hover. Head over to your Themes section under the Online Store tab in the Shopify Admin. Ensure you’re using one of these themes—if not, it might be worth a switch.

Step 2: Time to Get Code-Savvy

Let's roll up our sleeves and tiptoe into the theme code. Don't worry—it's going to be fun. Promise. Here’s where we get technical:

1. In Admin, navigate to Online Store -> Themes.
2. Hit that Edit Code button under the Actions dropdown of your current theme.
3. Now, pause and breathe. It's like walking into the backroom of the digital world.

Here’s where we'll be working our magic.

Step 3: Modifying Product-Card Code

This part is like building a sandcastle—make sure you’re steady. We’re going to locate and modify the file responsible for rendering product items on your collection pages, usually named product-card.liquid or similar.

{% comment %} Have no fear; we do minor tweaks here {% endcomment %}
<div class="product-image-hover">
  <img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" />
  <img
    src="{{ product.images[1] | img_url: 'large' }}"
    alt="{{ product.title }}"
    class="hover-image"
  />
</div>

Behold, our nifty addition. We're telling the page to use the second image from the product's image array (product.images[1]) and give it a special class name: hover-image.

Step 4: Style and Shine

Now, let’s sprinkle a little CSS magic. Hunt down theme.scss.liquid under the Assets directory. This is the wardrobe change section:

.product-image-hover .hover-image {
  display: none;
}

.product-image-hover:hover .hover-image {
  display: block;
}

.product-image-hover:hover img:first-child {
  display: none;
}

This dance of styles ensures that when our digital friends hover over the product, the first image recedes with a bow and welcomes the second image with grace.

Step 5: Testing Time

Testing is like checking if the cookies are ready. Save your changes and head back to your storefront. Refresh. Try hovering over a product image. Is it working? Did we get it? (I’ll be on the edge of my seat!)

Conclusion: A Little Extra Love

As we wrap up this journey, remember it’s these little tweaks that bring personality and dynamism to our web store. Félix, you are now armed with the power to enliven your products with a simple hover. You’ve donned the mantle of a true digital innovator!

So, gather your courage, delve deeply into the code, and unleash this visual party on your unsuspecting shoppers. Let them discover that little extra flair hiding beneath the surface. And should you need to revisit, this guide will be here—a testament to our venture into Shopify wizardry.

Until next time, may your hover images be smooth and your coffee as robust as Matubu's finest roast. Cheers!