Add different Logo for Desktop and Mobile

[ChloeCe]

Hi! 

I am looking to add 2 different versions of my logo on desktop and mobile. I use the eurus Theme. 

Anyone has an idea what code I need and where do I need to place it?

Thank you!

[TheUntechnickle]

Hey @ChloeCe! 👋

I can definitely help you with this! Having different logos for desktop and mobile is a great way to optimize your branding across devices. Here's how to do it with the Eurus theme:

Method 1: Using CSS Media Queries (Easiest)

1. Upload both logos to your theme's assets:
   • Go to Online Store → Themes → Actions → Edit Code
   • Upload your desktop logo and mobile logo to the Assets folder
   • Name them something like logo-desktop.png and logo-mobile.png
2. Add this CSS to your theme's stylesheet:
   • Find assets/theme.css (or similar) in your theme files
   • Add this code at the bottom:

.logo-desktop {
  display: block;
}

.logo-mobile {
  display: none;
}

@media screen and (max-width: 768px) {
  .logo-desktop {
    display: none;
  }
  
  .logo-mobile {
    display: block;
  }
}

1. Edit your header template:
   • Find sections/header.liquid (or wherever your logo is)
   • Replace your current logo code with something like:

<img src="{{ 'logo-desktop.png' | asset_url }}" alt="{{ shop.name }}" class="logo-desktop">
<img src="{{ 'logo-mobile.png' | asset_url }}" alt="{{ shop.name }}" class="logo-mobile">

Method 2: Theme Customizer (If available)

Some versions of Eurus might have built-in options for this:

• Go to Customize Theme
• Look for Header settings
• Check if there's an option for "Mobile Logo" or similar

Pro Tips:

• Keep your mobile logo more compact/square shaped
• Test on actual devices, not just browser resize
• Make sure both logos are optimized for web (under 100KB ideally)

Let me know if you run into any issues with the code placement - every theme can be slightly different!

Hope this helps! 🎉

Shubham | Untechnickle

[namphan]

Hi @ChloeCe,

Please go to Actions > Edit code > Sections > header.liquid file. 

Please send me the full code of the file, I will check and add option for you