Change image logo on hover

Store Design

Topic summary

A user wants to swap their header logo on hover in Shopify’s Dawn theme—two identical logos with one subtle difference, switching instantly with no animation.

Initial attempts failed:

  • First suggestion used CSS content: url() with direct image URLs, but produced “invalid URL” errors
  • User confirmed they’re working with Dawn theme and targeting only the header logo

Two solutions proposed:

  1. CSS-only method: Upload hover logo to Assets, then add CSS to base.css using Liquid syntax: .header__heading-link:hover img { content: url('{{ "logo-hover.png" | asset_url }}'); }

  2. Stacked images method (more robust): Modify header.liquid to render both logos, position them absolutely overlapping, then toggle opacity on hover via CSS

Current status: User reports neither solution is working yet and expresses uncertainty about implementation. Key requirement: logos must have identical canvas dimensions to overlay perfectly without shifting the header layout.

Summarized with AI on October 23. AI used: claude-sonnet-4-5-20250929.
1

Hey there.

I’m looking to change the logo in my header when somebody hovers over it. The logos are identical apart from 1 subtle change, so I’d like them to overlay each other perfectly. I don’t want any sort of effect. Just switching from one logo/image to another when you mouse over it. I’m using the latest Dawn theme.

Thank you

2

Hi there! :waving_hand:You can swap the logo on hover in Dawn by adding this CSS under Theme Settings → Custom CSS or in base.css:

.header,heading-logo img {

content: url(“https://your-default-logo.png”);

}

.header,heading-logo:hover img {

content: url(“https://your-hover-logo.png”);

}

Just replace the image URLs with your own — it will instantly switch the logo with no animation. Let me know if you need help inserting it!

1 Like
3

Thank you for the reply but this doesn’t seem to work.

4

It’s giving invalid url errors.

1 Like
6

I’m using the dawn theme and yes, it’s just for the logo in the header. Thank you

1 Like
7

Hey @mikeylew :waving_hand:
Two easy ways to swap the header logo on hover in Dawn. No effects—just a clean switch.

Option A — CSS-only (fastest)

  1. Upload your hover logo to Assets (e.g., logo-hover.png).

  2. Add this to assets/base.css (bottom):

/* Swap header logo on hover (Dawn) */
.header__heading-link:hover img {
  content: url('{{ "logo-hover.png" | asset_url }}');
}

Make sure the hover image has exactly the same canvas size as your normal logo so it overlays perfectly and doesn’t shift the header.

Option B — Two images stacked (most robust)

If you prefer not to rely on content:url, render two logos and toggle opacity.

  1. In sections/header.liquid, find the logo <img> and replace it with:
<a href="{{ routes.root_url }}" class="header__heading-link" style="position:relative;display:inline-block">
  <img
    src="{{ settings.logo | image_url }}"
    alt="{{ shop.name }}"
    class="logo-primary"
    width="{{ settings.logo.width }}"
    height="{{ settings.logo.height }}"
    loading="eager"
  >
  <img
    src="{{ 'logo-hover.png' | asset_url }}"
    alt="{{ shop.name }}"
    class="logo-hover"
    width="{{ settings.logo.width }}"
    height="{{ settings.logo.height }}"
    loading="eager"
  >
</a>
  1. Add to base.css:
.logo-primary,
.logo-hover {
  display:block;
  width:100%;
  height:auto;
}

.header__heading-link .logo-hover {
  position:absolute;
  inset:0;
  opacity:0;
}

.header__heading-link:hover .logo-hover { opacity:1; }
.header__heading-link:hover .logo-primary { opacity:0; }

That’s it—no animation, just an instant swap on hover.
(If you also want it on focus for keyboard users, duplicate the :hover rules with :focus-visible.)

:hammer_and_wrench: You can check out our Shopify Partner profile — we’ve built and shared several free Shopify app solutions to help store owners. Feel free to explore our profile and see how our apps can make your Shopify experience better!

8

Heya

Neither of these seem to work but I’m not exactly sure what I’m doing.