A different logo for webite and mobile version?

Solved
New Member
10 0 0

The original image I was using was a high res 4716 x 1504 PNG, I just created a 250 x 50 PNG and uploaded it but unfortunately still fuzzy!

 

Annotation 2019-07-09 205903.jpg

0 Likes
Astronaut
1007 130 238

can you share a link to your store and a password to get in if password protected? I'm not sure if maybe there's something I did but forgot to document. Cause my image is 250 x 50 and it is crisp.

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
Astronaut
1007 130 238

For anyone following the topic the issue was I forgot to include the img_url dimensions in the code that I posted for copy and paste, here's the corrected code:

 

        {% if section.settings.mobile_logo != blank %}
          <a href="/" itemprop="url">
            <img src="{{ section.settings.mobile_logo | img_url: '250x' }}" alt="{{ shop.name }}" itemprop="logo">
          </a>
        {% else %}
          <a href="/" itemprop="url">
            <img src="https://placehold.it/250x50" alt="{{ shop.name }}" itemprop="logo">
          </a>
        {% endif %}
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
1 0 0

Hi @Ninthony,

I've been trying to follow your instructions and apply it to another theme ("Launch"), however, I am getting stuck at the part where I tell it to choose the mobile logo. It doesn't have the part of 

"{% if section.settings.logo != blank %}"

And I am not sure where else this could be in the "Launch" theme. 

Are you familiar with this theme at all, and if so, could you give me some pointers where I can find this. 

It's my first time working with liquid and I find it quite a bit confusing... 

 
0 Likes
Astronaut
1007 130 238

Unfortunately I'm not familiar with it. It's a premium theme so I don't have access to it. Yeah, I'm sure whatever changes I outlined here are specific to Pop, every theme has a different layout -- there's so many different approaches you can take to web design. You can send me a message on here if you want if you enable messaging in your profile and let me know what exactly you'd like to do. I can request access to your theme, duplicate it, and then take a look at the code.

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
1 0 0

Hi Ninthony,

 

Following your instructions for this on Debut but running into a hiccup. The code from the header file that controls the logo is as follows:

 

{% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
              <noscript>
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <img src="{{ section.settings.logo | img_url: image_size }}"
                     srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
              </noscript>
            </a>
          {% else %}
            <a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
          {% endif %}

If I change this to use the mobile settings similar to how you described, it uses the mobile logo on both desktop and mobile view. How do I tell it to differentiate between the two? Thank you!

0 Likes
Astronaut
1007 130 238

It should essentially be the same thing, duplicate the schema portion referencing the logo, rename the id to mobile_logo, then duplicate the HTML and replace all instances of {{ section.settings.logo }} to {{ section.settings.mobile_logo }}. Give your desktop logo the class of desktop-logo and the mobile a class of mobile-logo, and then use media queries to hide one or the other. I can't say exactly whats going on with yours since that's the original code and not your new code. I can take a look if you'd like. You can send me a personal message with your store name and I'll request access.

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