Hover effect onFeatured Produc

Store Design
, , , ,
1

Hello! I am using the “Featured Product” section on my homepage and I would like to add a hover effect to show the second image on my product. I know that this is possible when using “featured collections” but that doesn’t work for me as I only have two products I want to feature and the images gets too big and blurry when using featured collections. Is it possible to add the hover effect on featured products? Any help is much appreciated!

I´m using Dawn

My webshop is: Lannerandfriends.com Password: Sommaren2025

2

Hi @Lannersocks :waving_hand:

You can definitely add a hover-to-show-second-image effect to the Featured Product section in Dawn. By default, Dawn applies this effect to product cards inside Featured Collection, but not to Featured Product, so we’ll add a small code snippet to replicate that behavior.

Here’s how you can do it:

:gear: 1. Duplicate your theme (for safety)

In Online Store → Themes → … → Duplicate your Dawn theme before editing.

:desktop_computer: 2. Add custom CSS

  1. Go to Online Store → Themes → … → Edit code.

  2. Open Assets → base.css (or component-card.css if you see that instead).

  3. Scroll to the very bottom and paste:

/* === Hover: Show 2nd image on Featured Product === */
.featured-product .product__media img:nth-child(1) {
  transition: opacity 0.3s ease-in-out;
}

.featured-product:hover .product__media img:nth-child(1) {
  opacity: 0;
}

.featured-product .product__media img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.featured-product:hover .product__media img:nth-child(2) {
  opacity: 1;
}

Notes:

  • This assumes your product has at least two images and the first two images are what you want to toggle.

  • The code fades out the first image on hover and fades in the second one.

:wrench: 3. Ensure your product images load

Sometimes Dawn uses lazyload which may delay loading the second image. To avoid flicker:

  • Make sure your product’s second image is uploaded in Shopify’s Media section.

  • Ensure the Featured Product block loads both images (usually automatic).

:white_check_mark: 4. Save and preview

Hover over your featured product on the homepage—now the second image should appear on hover.

:pushpin: If it doesn’t work

The class names may differ slightly based on your Dawn version. If hover still doesn’t work:

  • In Edit Code → Sections → featured-product.liquid, confirm the image container’s class names (look for something like product__media or media).

  • Replace .product__media in the CSS above with the correct class.

Would you like me to show you exactly where to find the correct class name inside your featured-product.liquid file?

3

Thank you for your reply! The hover effect works but it only shows white background instead of the second picture.. do you know how to fix that?

4

Hello Lannersocks,

I’m glad the hover effect is working! :blush:
The reason it’s showing a white background instead of the second image is usually because the product’s second image isn’t being targeted or loaded correctly by the code.

Here’s what we can do:

  1. Make sure that each featured product you want the hover effect on has at least two images uploaded in its product media.

  2. I can adjust the CSS/JavaScript snippet to specifically load the second product image instead of a blank placeholder.

  3. I’ll also optimize the code so the images stay sharp and don’t blur or stretch on hover.

Would you like me to go ahead and set this up for you so it displays your second product image smoothly on hover?

If you find my answer helpful, please like my reply and mark it as an answer.

5

Hello, okey I understand. Both products have 3/4 pictures uploaded which you can see when clicking on the product info. Yes that would be helpful!

6

Hi @Lannersocks,

Great question — by default, Dawn only has the hover-to-second-image feature on collection/product grid items (like in Featured Collection), not on the Featured Product section. But you can definitely add it with a lightweight code tweak.

Here’s a safe way to do it:

1. Duplicate your theme first

  • In Shopify admin, go to Online Store > Themes > … > Duplicate.

  • This gives you a backup in case something goes wrong.

2. Edit the Featured Product section

  • Go to Online Store > Themes > Edit Code.

  • Find: Sections/featured-product.liquid.

3. Insert second image logic
Inside the product image wrapper, you’ll see something like:

{{ product.featured_image | image_url: width: 1200 | image_tag }}

Replace it with:

<div class="featured-product__image-wrapper">
  <img 
    src="{{ product.featured_image | image_url: width: 1200 }}" 
    alt="{{ product.title }}" 
    class="primary-image"
  >
  {% if product.images.size > 1 %}
    <img 
      src="{{ product.images[1] | image_url: width: 1200 }}" 
      alt="{{ product.title }}" 
      class="secondary-image"
    >
  {% endif %}
</div>

4. Add CSS for hover effect
In base.css (or your theme’s stylesheet), add:

.featured-product__image-wrapper {
  position: relative;
}

.featured-product__image-wrapper img.secondary-image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featured-product__image-wrapper:hover img.secondary-image {
  opacity: 1;
}

.featured-product__image-wrapper:hover img.primary-image {
  opacity: 0;
}

5. Save and preview
Now when you hover the Featured Product image, it will swap to the second product image (if available).

7

This way you keep using Featured Product (so no blurry scaling from Featured Collection) while getting the hover effect you want.

Would you like me to package this into a ready-to-paste snippet (so you only need to copy-paste once), or would you prefer the step-by-step so you can learn along the way?