Add different Logo for Desktop and Mobile

Store Design
, , , ,
1

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!

2

Hey @ChloeCe ! :waving_hand:

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! :tada:

Shubham | Untechnickle

3

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