Shopify themes, liquid, logos, and UX
I updated my password page header to show my logo. However, after choosing my logo image, it does not appear on the password page and I cannot figure out why. This is for the debut theme, any suggestions?
It still didnt work
Please share your site URL,
So I will check and provide a solution here.
can you please
https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts
Thanks
can you please add the below code
see guide line
<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: 'master' }}"
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": "Logo",
"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 logo 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 %}
Hi,
I'm having the same problem, could you please help me too?
https://chakta.myshopify.com/admin
Thank you
@KetanKumar I know tried the different codes you posted in this feed, but none of them didn`t work.
Thanks for post
can you pleases share us your theme password page password header code.
Hi @KetanKumar Thx for the reply, did you mean this one?
<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" data-image-loading-animation>
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
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": {
"cs": "Záhlaví",
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pl": "Nagłówek",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Üstbilgi",
"vi": "Đầu trang",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": {
"cs": "Obrázek loga",
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logo",
"fi": "Logokuva",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pl": "Obraz logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"tr": "Logo görseli",
"vi": "Hình ảnh logo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"cs": "Šířka vlastního loga",
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタマイズする",
"ko": "사용자 지정 로고 폭",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pl": "Niestandardowa szerokość logo",
"pt-BR": "Largura do logotipo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"tr": "Özel logo genişliği",
"vi": "Chiều rộng logo tùy chỉnh",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 500,
"step": 10,
"unit": "px",
"default": 100
},
{
"type": "text",
"id": "header",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Připravujeme",
"da": "Kommer snart",
"de": "Demnächst",
"en": "Coming Soon",
"es": "Próximamente",
"fi": "Tulossa pian",
"fr": "En construction",
"it": "Presto disponibile",
"ja": "まもなく公開",
"ko": "곧 출시 예정",
"nb": "Kommer snart",
"nl": "Binnenkort",
"pl": "Już wkrótce",
"pt-BR": "Em breve",
"pt-PT": "Em breve",
"sv": "Kommer snart",
"th": "เร็วๆ นี้",
"tr": "Çok Yakında",
"vi": "Sắp ra mắt",
"zh-CN": "即将推出",
"zh-TW": "即將推出"
}
}
]
}
{% endschema %}
Thanks for code can you please upload
<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" data-image-loading-animation>
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
data-src="{{ img_url }}"
src="{{ section.settings.logo | img_url: image_size }}"
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": {
"cs": "Záhlaví",
"da": "Overskrift",
"de": "Titel",
"en": "Header",
"es": "Encabezado",
"fi": "Ylätunniste",
"fr": "En-tête",
"it": "Header",
"ja": "ヘッダー",
"ko": "헤더",
"nb": "Header",
"nl": "Koptekst",
"pl": "Nagłówek",
"pt-BR": "Cabeçalho",
"pt-PT": "Cabeçalho",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Üstbilgi",
"vi": "Đầu trang",
"zh-CN": "标头",
"zh-TW": "標頭"
},
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": {
"cs": "Obrázek loga",
"da": "Logobillede",
"de": "Logo-Foto",
"en": "Logo image",
"es": "Logo",
"fi": "Logokuva",
"fr": "Image du logo",
"it": "Immagine del logo",
"ja": "ロゴ画像",
"ko": "로고 이미지",
"nb": "Logobilde",
"nl": "Afbeelding van logo",
"pl": "Obraz logo",
"pt-BR": "Imagem do logotipo",
"pt-PT": "Imagem do logótipo",
"sv": "Logobild",
"th": "รูปภาพโลโก้",
"tr": "Logo görseli",
"vi": "Hình ảnh logo",
"zh-CN": "logo 图片",
"zh-TW": "標誌圖片"
}
},
{
"type": "range",
"id": "logo_max_width",
"label": {
"cs": "Šířka vlastního loga",
"da": "Tilpasset logobredde",
"de": "Logobreite",
"en": "Custom logo width",
"es": "Ancho del logo personalizado",
"fi": "Mukautetun logon leveys",
"fr": "Largeur personnalisée du logo",
"it": "Larghezza logo personalizzato",
"ja": "ロゴの幅をカスタマイズする",
"ko": "사용자 지정 로고 폭",
"nb": "Tilpasset logobredde",
"nl": "Aangepaste logo-breedte",
"pl": "Niestandardowa szerokość logo",
"pt-BR": "Largura do logotipo personalizado",
"pt-PT": "Largura de logótipo personalizada",
"sv": "Anpassad logotypsbredd",
"th": "ความกว้างของโลโก้แบบกำหนดเอง",
"tr": "Özel logo genişliği",
"vi": "Chiều rộng logo tùy chỉnh",
"zh-CN": "自定义 logo 宽度",
"zh-TW": "自訂商標寬度"
},
"min": 50,
"max": 500,
"step": 10,
"unit": "px",
"default": 100
},
{
"type": "text",
"id": "header",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Připravujeme",
"da": "Kommer snart",
"de": "Demnächst",
"en": "Coming Soon",
"es": "Próximamente",
"fi": "Tulossa pian",
"fr": "En construction",
"it": "Presto disponibile",
"ja": "まもなく公開",
"ko": "곧 출시 예정",
"nb": "Kommer snart",
"nl": "Binnenkort",
"pl": "Już wkrótce",
"pt-BR": "Em breve",
"pt-PT": "Em breve",
"sv": "Kommer snart",
"th": "เร็วๆ นี้",
"tr": "Çok Yakında",
"vi": "Sắp ra mắt",
"zh-CN": "即将推出",
"zh-TW": "即將推出"
}
}
]
}
{% endschema %}
Thank you @KetanKumar
I copied the code into: Sections ->Password-Header.liquid but still there is NO Image showing on the password protected page. Any other suggestions?
can you please add me on staff account so i will quick fix
i have done this
Thanks for the update and support.
I'm having the same issue after pasting the code into password header and theme.css.
Can you please help?
Hi @KetanKumar - I am experiencing the same issue with my password LP. Would you be able to resolve it for me as well?
Hi Ketan,
I am having the same issue, the logo doesn't appear when uploaded and when edit code image appear broken
Can you please assist ?
Thanks
Hello, @spacetoysau
Thanks for post
can you please share password header code or can you please add staff so i will fix less than 10min
Hello, I am having the same issue with the logo on the password page.
My URL is: signebyM.com
Hello, @signebyM
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site password page header code,
So I will check and provide a solution here.
Hi Ketan,
i am having the same issue. my logo did not appear on password page so i copied this code .password-main__inner .site-header__logo-image img {display: inline-block !important;} into the correct section on assets and now it appears that there is just a broken blank image there now instead.
my domain is vaitsa.com if you could please respond and help sort this out for me that would be great!
thank you
Welcome to the Shopify community!
and Thanks for your Good question.
Please share the password page header code,
So I will check and provide a solution here.
I'm having the same problem! I would love to know a fix for this. This looks like it could be a an issue on the Shopify side.
Hi Ketan,
I am having this same issue. My logo won't appear on my password page, I have tried pasting the link you posted also but still isn't working. Are you able to pleas help? Thank you
Hi All
There is a line of code missing. It's a bug in 'debut' theme.
In file: password-header.liquid
After Line #6, which is <img class="lazyload js"
Add the following line:
src="{{ section.settings.logo | img_url: '300x300' }}"
I think, it also needs some tweak..
You also need the CSS code mentioned previously in one of the comments.
Also, if needed, add to theme.css.liquid, the following line:
.password-main__inner .site-header__logo-image {
background-color: unset;
}
Cheers
Thank you so much this worked! However, my logo is really big and there an off black box around it. What part of the code do I correct to fix this?
First, you need to remove the background behind the image, in your theme.css.liquid
add:
.password-main__inner .site-header__logo-image {
background-color: unset;
}
Regarding the size of the image, you can customize it in the theme itself in your account.
That is in your account:
On the left side of your screen click on Themes, then on the right side of your screen click on Customize, then click on the arrow next to Home Page at the top, you will see a drop down menu, then choose Password page, then click on Header on the right side. You can adjust the size of the image there using the slider.
Hope it helps.
I read multiple topics and you are one of the rare person to give a solution online, that everyone can benefit! Thank you
No Problem @astrogars
I can still see alot of people struggling with this issue even with my solution right there ,,, LOL
Well I hope everybody get their issues resolved..
I think we need to file an issue fix with Shopify to fix this bug in that theme.
They sould had to correct that from the first complaints! Especially since any beginner will search everywhere and modify everything, thinking that he has made a bad manipulation before doing research on the web to finally understand that it is a bug!
Hi all,
I'm new to this and I'm having the same problem, no logo on my password page.
I have gone to section password-header.liquid. I deleted the code that was there, also deleting the section. I'm thinking I wasn't supposed to do this?
I created a new section password-header.liquid and copy/pasted the long piece of code earlier in this thread.
No change.
Next I copy/pasted the following src="{{ section.settings.logo | img_url: '300x300' }}" after line 6 in the password-header.liquid. Still no change.
Can someone advise me what to do next please?
Thanks
Personally, I added it myself in HTML
@astrogars Excuse the total newbie question - when you say you added it in HTML is that the same as editing the code under section password-header.liquid?
I have edited password.liquid in Templates section, and added
<a href="linkURL" target="_blank">
<img src="imageURL" />
</a>
Be careful, I am a beginner, this is probably not the really good solution. But it helps.
Thanks @astrogars I tried that but no joy. Maybe someone else here might have a suggestion, fingers crossed.
theme.scss.liquid file under "Asset"
Add:
.password-main__inner .site-header__logo-image img {
display: inline-block !important;
}
And, NO you were not supposed to delete the section ,, 🙂
Thanks @Sarah00 I did that and now I have my logo on the password page. Delighted!
My logo is .png but it has applied an outer pale grey banner rectangle under it. See www.deburcadesign.ie
Anyone know is there a way to get rid of the banner rectangle or have it on the whole page?
Add to theme.css.liquid, the following line:
.password-main__inner .site-header__logo-image {
background-color: unset;
}
@Sarah00 @KetanKumar would it be possible to help me?
Our domain is www.goodlittleegg.com, i have done the below however the logo still isn't showing.
Thanks Kaylee 🙂
Hello, @goodlittleegg
Welcome to the Shopify community!
and Thanks for your Good question.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste below code at the bottom of the file.
.password-content .site-header__logo-image {background: transparent;}
.password-content .site-header__logo-image img { display: inline-block !important;}
@KetanKumar @Thank you for responding. I have a theme.css but not a theme.css.liquid.
am I looking in the right place?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024