A different logo for webite and mobile version?

Solved
New Member
10 0 0

Hi everyone,

 

I'm wondering if it is possible to use two different logos for your desktop page and your mobile page? The logo I have designed for my site is square, so looks great on the desktop version of the theme I'm using (Pop), but on the mobile version it shrinks to a tiny size unless I increase the size of the 'Mobile main menu height', which then looks too big.

 

I've put together an image which hopefully explains what I mean... I'd like the two ticked images to work for my website... Is this possible?

 

website example.jpg

Thanks for the help!

0 Likes
Astronaut
950 116 214

Yes it can be done, but will require some custom code work. If you'd like to send me a personal message on here with your myshopify.com store address, I can request access to your store and do this for you. I work at a fair rate and this shouldn't take more than a half an hour. Message me if you're interested, you'll have to enable messaging in your profile. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
10 0 0

Hi Ninthony,

 

Many thanks for your kind offer of looking at this for me, however this is something I'd like to learn to edit and code myself. Thank you for taking the time to come back to me :)

0 Likes
Astronaut
950 116 214

That's not a problem, if you want to learn I can show you too. If I can though I try to make a little money here and there, but I really don't mind helping anyone out. Are you using a free theme? If so I won't need access to your store I can just use a developer store to figure it out. Otherwise I would still need access to see how your section is set up to show you how you can add options to your customize editor. 

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
10 0 0

Hi Ninthony,

I am using the free theme 'Pop' :) Unfortunately I thought this might've been an easy setting I could change that I was somehow missing in the customisation options!  

0 Likes
Astronaut
950 116 214

I figured it out, when I get home tonight I'll work out some of the kinks and work up a small tutorial for you with explanations on what I'm doing and post it for you tomorrow.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
10 0 0

Thanks very much! Really appreciate it :)

0 Likes

Success.

Astronaut
950 116 214

Alllllrighty. First, duplicate your theme so that you have a backup -- then go to your theme code in whichever one you want to edit (Online Store > Actions > Edit Code) open your Sections folder, and open "header.liquid".

 

Scroll down to the {% schema %} tags and locate this little chunk of code:

 

image1.png

 

Mine says desktop custom logo in the english "label" section. It just said custom logo before. Copy the code, including the brackets and the comma at the end and place it immediately underneath it. In the newly pasted code, you're going to change the id to "mobile_logo", and you can change the label to "Mobile Custom Logo" and go ahead and change the "info" to 250 x 50 max -- That's going to be the ideal size of your new logo. Essentially what you're doing here is setting up another setting that you're going to be able to interact with through the customize menu. The code should look like this(I only changed the english versions of everything):

image2.png

Then scroll up to about line 157 -- You should see a little spot that look like this:

 

image3.png

 

You'll want to change that. You can change the {% else %} portion of the code too, or just leave it as your shop name. I chose to change mine to a placeholder image:

 

image4.png

 

Here's the code if you want to copy it:

 

        {% if section.settings.mobile_logo != blank %}
          <a href="/" itemprop="url">
            <img src="{{ section.settings.mobile_logo | img_url }}" alt="{{ shop.name }}" itemprop="logo">
          </a>
        {% else %}
          <a href="/" itemprop="url">
            <img src="https://placehold.it/250x50" alt="{{ shop.name }}" itemprop="logo">
          </a>
        {% endif %}

 

Then we're going to change the little bit in the media query. Go to here and change this:

 

@media screen and (max-width: 1024px) {
  .header-logo img {
    max-height: {{ logoMaxHeight }};
  }
}

To this:

 

@media screen and (max-width: 1024px) {
  .header-logo img {
    width: 100%;
    max-width: 250px;
    max-height:65px;
  }
  .header-logo {
    width:100%;
    margin: 0;
  }
}

And you should be good to go, now you can go into your customize editor and add a mobile logo:

 

preview.png

 

Let me know how it goes for you. You may have to change some things based on the height of your navbar, but I think this should be good.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
10 0 0

Perfect! :) It works, thanks very much for your help on this!

 

Only thing is the resolution is fuzzy on the mobile logo... I'm not sure what I'm missing! 

 

Annotation 2019-07-09 204606.jpg

0 Likes
Highlighted
Astronaut
950 116 214

It's probably because your image is smaller than 250 pixels wide and I have that img element set to 100% width and a max-width of 250px. Save your logo out with a 250 width.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes