Shopify themes, liquid, logos, and UX
Hello, I am trying to upload my store logo onto my password page and whenever I do it simply does not show up. It just turns blank without the logo or store name. Ive added the same logo to my other pages but for some reason just wont work on the password page.
Great, this has worked. Thank you for your help!
Hi Ketan,
I was having the same issues as Maggie Pie but following these steps has resolved it for me as well. Thank you!
Thank you sooooooo much!!! Just following along and pasting the code you gave has fixed the same problem in my store's password page. Thank you again!
Adding the above code:
.template-password .site-header__logo-image img { display: inline-block; }
to the bottom line in assets / theme.css.liquid only displays the broken image icon.
Any other solutions out there? 🙂
Welcome to the Shopify community!
and Thanks for your question.
Please share your site URL,
So I will check and provide a solution here.
hi I need help, I tried to follow instructions and it said that it could not save so I deleted code but now feel I may have deleted the wrong thing.
I need help with my logo showing on the landing page also...
Please contact me with your store links.
@TrulyCreative You must did something wrong with the logo on password page.
can you please share the password header code so i will update.
<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
can you please update this code
<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"
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": {
"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 %}
Hi,
I am having the same problem. I have added the codes to the bottom of the page on assets - theme.css - However the logo on the password page appears to be blank.
My website is https://high-class-beauty001.myshopify.com/.
Thank you
Thanks
i have checked but sorry i can see the logo image can you please upload the logo again
Hi,
I have uploaded the logo again.
Could you please check one more time, please?
Thank you
Theme customization password page
I need your store login details. Yes, I know your login details are confidential. For this second option, I have added your store to my Shopify partner account so I will check your code easily and manage what you think about it?
My id is
Thanks for details
yes, i have an update code can you please check.
I like that the logo is on there but is it possible to get rid of the dark blue banner next to the logo?
how do you like exactly?
This dark blue banner, is it possible to get rid of it?
yes, i have removed can you please check.
When adding the logo, it does not appear on the password page at all.
Hello @KetanKumar ! I am having the same problem, I have tried the solution you provided but I am also getting a broken image after editing the code. Can you help me? My website is selvacosmeticos.com.br or selva-cosmeticos.myshopify.com. Thank you!!
It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like
Hello, I am also having a broken image link come up even after inserting the code. Could you help me?
can you please share store url.
@KetanKumar I'm having trouble as well. I can't view my logo and I'm having trouble in general customizing my password page and email signup on the password page.
my url: https://stablewest.myshopify.com/
Can you please help me? Thanks!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
can you please upload your logo or share code here
@KetanKumar sorry for the delay in my response. I'm using an SVG file and the code is below. Please let me know if this works.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800.94 122.44" style="enable-background:new 0 0 800.94 122.44;" xml:space="preserve">
<g>
<path d="M58.72,56.12c-1.21-8.3-8.3-11.93-18.68-11.93c-9.69,0-14.71,3.8-14.71,9.51c0,7.44,8.65,9,20.59,10.9
c16.95,2.77,35.64,5.71,35.64,25.78c0,19.2-17.13,29.06-37.37,29.06c-19.38,0-39.62-9.17-41.69-29.76h21.97
c2.25,8.48,9.86,12.46,20.59,12.46c9.52,0,15.74-3.11,15.74-9.69c0-6.75-7.09-7.95-19.9-10.03C22.57,79.3,4.75,76.36,4.75,55.95
c0-19.03,15.22-29.07,36.33-29.07c20.59,0,37.37,9.52,38.93,29.24C80.01,56.12,58.72,56.12,58.72,56.12z"/>
<path d="M798.44,99.81v18.66h-16.09c-15.24,0-25.51-5.65-25.51-25.17V49.14h-15.92V30.3h15.92V3.94l21.06,5.82V30.3h18.67v18.83
H777.9v41.09c0,6.16,1.71,9.59,8.73,9.59H798.44z"/>
<path d="M222.36,56.67v59.92h-19.69v-14.55c-6.16,9.93-15.75,16.44-29.62,16.44c-16.61,0-28.93-9.24-28.93-26.36
c0-19.17,15.75-24.65,28.24-26.37l18.49-2.57c4.62-0.68,10.1-1.71,10.1-8.73c0-7.19-5.65-10.44-14.9-10.44
c-11.47,0-17.98,4.96-19.86,12.5h-20.54c3.42-20.37,19.86-29.62,41.43-29.62C209.69,26.88,222.36,36.64,222.36,56.67z
M201.13,79.78v-4.45c-3.42,1.2-6.5,2.06-12.84,3.09l-9.25,1.37c-5.3,0.68-13.52,2.4-13.52,10.78c0,6.85,5.14,10.27,13.35,10.27
C191.71,100.84,201.13,92.11,201.13,79.78z"/>
<path d="M319.47,72.59c0,31.16-18.83,45.88-40.06,45.88c-15.24,0-25.68-7.88-29.1-16.44v14.55h-19.69V9.76L251.84,3v40.15
c4.62-10.1,15.75-16.27,28.76-16.27C301.49,26.88,319.47,42.46,319.47,72.59z M297.73,72.59c0-18.32-10.62-26.19-22.95-26.19
c-11.98,0-23.11,7.88-23.11,26.19c0,18.49,11.13,26.54,23.11,26.54C286.94,99.13,297.73,90.91,297.73,72.59z"/>
<path d="M348.95,3.94v114.53h-21.23V10.7L348.95,3.94z"/>
<path d="M439.85,79.78h-62.31c1.88,13.7,9.76,20.37,22.42,20.37c8.73,0,15.41-3.42,17.98-10.62h20.89
c-3.76,19.69-20.89,28.93-39.55,28.93c-24.14,0-42.8-15.24-42.8-44.85c0-26.54,15.59-46.74,43.15-46.74
c22.43,0,40.23,12.67,40.23,41.77v11.14H439.85z M419.47,63.35c-0.34-10.78-6.16-18.15-19.34-18.15
c-12.33,0-19.52,7.19-21.91,18.15H419.47z"/>
<path d="M558.41,30.3h22.08l-31.32,86.95h-20.21l-19.52-57.87l-19.52,57.87h-20.2L438.4,30.3h22.42l19.69,60.08l19.35-59.22h19.86
l19.86,59.04L558.41,30.3z"/>
<path d="M658.76,79.78h-62.31c1.88,13.7,9.76,20.37,22.42,20.37c8.73,0,15.41-3.42,17.98-10.62h20.89
c-3.76,19.69-20.89,28.93-39.55,28.93c-24.14,0-42.8-15.24-42.8-44.85c0-26.54,15.59-46.74,43.15-46.74
c22.43,0,40.23,12.67,40.23,41.77v11.14H658.76z M638.39,63.35c-0.34-10.78-6.16-18.15-19.34-18.15
c-12.33,0-19.52,7.19-21.91,18.15H638.39z"/>
<path d="M717.47,55.81c-1.2-8.22-8.22-11.81-18.48-11.81c-9.59,0-14.55,3.76-14.55,9.41c0,7.37,8.56,8.91,20.37,10.79
c16.78,2.74,35.27,5.65,35.27,25.51c0,19-16.95,28.76-36.98,28.76c-19.17,0-39.21-9.08-41.26-29.45h21.74
c2.22,8.39,9.76,12.33,20.37,12.33c9.42,0,15.58-3.08,15.58-9.59c0-6.68-7.02-7.87-19.69-9.93c-18.14-3.08-35.78-5.99-35.78-26.19
c0-18.83,15.06-28.77,35.95-28.77c20.37,0,36.98,9.42,38.52,28.93L717.47,55.81L717.47,55.81z"/>
<path d="M128.23,99.81c-7.02,0-8.73-3.43-8.73-9.59V49.14h18.67V30.3H119.5V3.94L98.44,9.76V30.3H82.52v18.83h15.92V93.3
c0,19.52,10.27,25.17,25.51,25.17h10.27l5.82-18.66H128.23z"/>
</g>
</svg>
store URL?
thanks for store url.
sorry i can't see logo can you please upload
yes, please upload this logo password page currently logo text base
When I upload the logo this is what happens unfortunately. It doesn't seem to matter which file format either. It just doesn't show.
can you please share password header code so i wiil update
I direct messaged it to you thank you!
no problem i will check code and update
Ok thank you. Please let me know if you need anything else form me..
thanks can you please add me on staff account
Yeah! What's your email and I'll add you today. Thanks
Lots of different themes are being discussed in here so it's become rather hard to find the right info/help on the topic. As such I'm closing this thread.
Others that need I welcome and encourage you to make a new thread, and be sure to post info like the theme and any context to make helping you on the forums easier.
As a side note, please don't feel pressured to give out staff accounts to those that ask for it. In many case the help can be offered on the forums, and has the advantage that others can learn from it.
I am also new to Shopify and am also unable to add my logo on the password page. The logo has been updated within the password page header section however it is not displayed.
Hello, @srwilkes
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
can you please update the above code on your theme?
I am having the same problem on my store with password page logo not showing. I posted in the line of code you provided and now its a broken image.
website:
toms-granola.myshopify.com
please help!
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