Blurry header logo in password page of Debut Theme

nanaschmitz
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

Replies 24 (24)
Alex_Borodin
Shopify Partner
23 4 11

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
nanaschmitz
New Member
2 0 1

Thanks, it worked!

ArjunaLea
New Member
1 0 0

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

KGP100
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?

Alex_Borodin
Shopify Partner
23 4 11

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
KGP100
New Member
2 0 1

It WORKED!  THANK YOU

ble320
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.


 

julieelb
New Member
1 0 0

I'm having the same issue! I'm new to shopify and using the debut theme and my logo is very blurry on the password page.

 

I have tried everything, resizing the px file, different formats, resolutions etc. It keeps coming out as blurry.

 

Reading through a load of shopify forums, it's clear that I need to make a change to the code to either accept svg files (this would be ideal) or I set the logo maximum size capacity to my logo png file to match - can anyone help with this? My code is different to the other solutions posted. I'm assuming the code has been updated/changed since the last solution was written. 

 

Thanks in advance!

Below is the code for password-header.liquid 

 

<div class="password-content">
{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-image">
{% 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>
</a>
{% else %}
<h1 class="site-header__logo-link">
<span class="logo">{{ shop.name }}</span>
</h1>
{% endif %}

<span class="h2 password-content__title">{{ section.settings.header | escape }}</span>
</div>


{% schema %}
{
"name": {
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"hi": "हैडर",
"it": "Header",
"ja": "ヘッダー",
"ko": "머리글",
"nb": "Header",
"nl": "Koptekst",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": {
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logotipo",
"fi": "Logokuva",
"fr": "Image du logo",
"hi": "लोगो इमेज",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logotipo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"hi": "कस्टम लोगो की चौड़ाई",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタマイズする",
"ko": "사용자 지정 로고 폭",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pt-BR": "Largura do logotipo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 500,
"step": 10,
"unit": "px",
"default": 100
},
{
"type": "text",
"id": "header",
"label": {
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"hi": "शीर्षक",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"da": "Kommer snart",
"de": "Demnächst",
"en": "Coming Soon",
"es": "Próximamente",
"fi": "Tulossa pian",
"fr": "En construction",
"hi": "जल्द आ रहा है",
"it": "Presto disponibile",
"ja": "まもなく公開",
"ko": "곧 출시 예정",
"nb": "Kommer snart",
"nl": "Binnenkort",
"pt-BR": "Em breve",
"pt-PT": "Em breve",
"sv": "Kommer snart",
"th": "เร็วๆ นี้",
"zh-CN": "即将推出",
"zh-TW": "即將推出"
}
}
]
}
{% endschema %}

trb308
New Member
1 0 0

I have the same issue as the last message, waiting for a reply, this problem has been existent for a long time for the Debut theme.

Pls help!

chelsea1powell
Tourist
4 0 1

Hi Alex,

 

I did what you recommended to help with the blurry logo in my password page but it didn't do anything. My logo is also blurry on my header page but it's worse on the password page. Can you help me? My link is www.sonnyboyco.com

 

Thank you

thuffam
Tourist
4 1 2

While removing the lazy loading functionality appears to work, it does not address the fact that there is a bug in the lazy loading functionality. 

This feature works by first loading a low-quality version of the image (so the page loads quickly) then load a higher quality version of the image in the background.  The issue is that it is not loading the high quality image successfully.  So by removing the lazy loading software you will force the slowest page load possible (which isn't really an issue on the password page).

I have tried to debug it myself, but, interestingly, when I turn on Developer Tools in the browser (Chrome and Brave) Lazy loading starts to work properly - so I cannot see what error is being thrown.

It would be great if the Shopify support/developers would chime in and/or simply fix the issue.

Regards

Tim

Gaijin
New Member
1 0 0

@Alex_Borodin while this works I noticed that on my mobile device Galaxy S9 ( chrome ) the password page would show up zoomed in

dowblabber
New Member
2 0 2

This did fix the pixelation issue I was also experiencing, however, my logo now appears with a light grey box that extends the width of whatever screen I am viewing on. Any ideas?

sashajasmine
New Member
1 0 0

Hi,

I copied this exact code and pasted it into the right place and the image is no longer blurry, but now the width of the area where the image is to be placed is grey, I even redid the whole process to make sure I hadn't messed it up. Can you help me find a solution to this?Screenshot (24).png

kimf236
New Member
1 0 0

I am having the same issue, replaced the code, but now a light gray box appears behind my logo. Any fixes?

suyash1
Shopify Partner
5307 612 879

@kimf236 - can you please share your website link? may be logo background is grey hence that box, I can check 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30, to build shopify pages use pagefly
urbnsage
Tourist
10 0 5

If anyone is still having this issue, you'll actually want to change your data widths to "[1080, 1296, 1512, 1728, 2048]"

Here's how to do it:

1) Go to sections > password-header.liquid

2) search for 

data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
Copy

 3) change the widths to be "[1080, 1296, 1512, 1728, 2048]"

So your code should now look like: 

data-widths="[1080, 1296, 1512, 1728, 2048]"
Copy

 

Hope this helps!!

melissaz
New Member
1 0 1

@urbnsage 

^^^^ This answer is the easiest and best solution! ^^^^

Thank you!

Cycc
Tourist
5 0 2

Solved the problem in 1 min! Thank you!