Blurry header logo in password page of Debut Theme

Highlighted
New Member
2 0 1

Hi there,

I am new here and have searched the forum and online regarding this topic, but haven't found the solution, maybe you can help.

I am using the Debut theme. On the Password Page https://kimoberlin.com/password the logo doesn't appear as sharp as it actually is.

In the header of the theme itself, it does appear crystal sharp though.

Is there specific regulations for password page?

I have tried uploading 1080 width, a square version, 300px width.... not sure what else to try?
Inside the online store theme editor, I am sizing it to 300px width, which is the width I'd like it to show.. sharp :)
I hope you can help me!
Nana

1 Like
Highlighted
Shopify Partner
21 4 6

I suppose you have a Retina display and the theme is not optimized well for it. It uses a script to fit the image size to screen with, but actually, you don't need it.
Go to the `Themes -> Debut -> Actions -> Edit Code` and select `password-header.liquid` inside the `Sections` menu. You'll see such code from 4 to 20 lines.

    {% 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 }}"
           itemprop="logo"
           style="max-width: {{ section.settings.logo_max_width }}px;">
    </noscript>

Replace it with

      {% 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 }}"
           itemprop="logo"
           style="max-width: {{ section.settings.logo_max_width }}px;">

And you will get the right result. 
Please, do not forget to copy the theme before implementing such changes.

VT Labs
Growth-Driven Shopify Development
Email: dev@vtlabs.org
1 Like
Highlighted
New Member
2 0 1

Thanks, it worked!

0 Likes
Highlighted
New Member
1 0 0

I had this same problem and your solution worked perfectly! Thank you!

0 Likes
Highlighted
New Member
2 0 1

Hi Alex.  New here to the Shopify community.  I’m using the Brooklyn theme and I am having the EXACT same issues.  I tried to follow your instructions on replacing the codes BUT I see a bunch of different codes then what you posted for the Debut theme.  Can you help me out with doing the same for the Brooklyn theme please?

0 Likes
Highlighted
Shopify Partner
21 4 6

For Brookin theme you can replace lines 26 and 27 in the password-header.liquid section with the same code and it should work

VT Labs
Growth-Driven Shopify Development
Email: dev@vtlabs.org
1 Like
Highlighted
New Member
2 0 1

It WORKED!  THANK YOU

1 Like
Highlighted
New Member
1 0 0

Hello,

 

I'm new to Shopify and I'm having this same issue with the header on the Password page, I pasted the code that was given and there's been no change. Yet I know this is a high res logo file I'm uploading. What am I doing wrong? Help? Thank you.


 

0 Likes