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
23 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
23 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
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
Highlighted
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 %}

0 Likes
Highlighted
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!

0 Likes