Shopify themes, liquid, logos, and UX
Hi!
I’m trying to upload my logo onto my password page and it doesn’t seem to be working. Anyone else experiencing this issue
Solved! Go to the solution
This is an accepted solution.
Same issue here, url www.spacetoys.shop
Can someone please assist
Thank you
This is an accepted solution.
Thanks for update
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.password-content .site-header__logo-image img {display: inline-block !important;}
after add above code see
Yes, I am, new site, Debut liquid theme. Added logo under header for the password page, doesn't show up. In searching the threads there are a bunch of users replying to years old posts about the same issue since Aug 15, 2020. Hoping this post gets some attention since it's new... and it seams an issue many people are experiencing starting 4 days ago.
Yes, I am having the exact same problem and can’t seem to find a solution or that many others who have encountered this.
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.
Thanks for store url
sorry i can't logo image uploaded can you please update and let me know
This is an accepted solution.
Same issue here, url www.spacetoys.shop
Can someone please assist
Thank you
Thanks
i can see logo in password page.
I am still have logo upload issues
This is an accepted solution.
Thanks for update
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.password-content .site-header__logo-image img {display: inline-block !important;}
after add above code see
This is an accepted solution.
Thank you !
Thanks for update and support.
Hello Ketan,
I have been tracking this problem across 2-3 threads. I got my logo to show up on the password page but it is now pixelated. I have already updated the password header code as instructed on a different thread BUT the logo is still pixelated.
Please instruct.
My site is:
stoutfitters.me
Thanks
sorry but i can't see the password page current open your store url
Hello! I am trying to go the same thing- upload my logo onto the Password Page. I am using the GRID theme. I tried adding that code from the previous comments under the theme.css.liquid , but it didn't work for me (unsure if that code was specific to the other users page). I would also like to change the background color of the password page, if you would point me in the right direction.
website www.somethinggoodmarket.com
Thank you in advance!
Hello, @SomethingGoodHG
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your password page header code,
So I will check and provide a solution here.
Where do I find the password page header code?
This is the full code under SECTION> password.liquid
<script
type="application/json"
data-section-type="password"
data-section-id="{{ section.id }}"
></script>
<div class="password-page main-content">
<div class="password-page-header">
<div class="password-page-inner">
<a href="#modal-login" class="admin-login-modal">
{{ 'general.password_page.password_link' | t }}
</a>
</div>
</div>
<div class="password-page-content">
<div class="password-page-inner">
<div class="password-page-logo">
<header class="main-header" role="banner">
<div class="password-branding">
<a class="logo-link" href="{{ routes.root_url }}">
<h1>{{ shop.name }}</h1>
</a>
</div>
</header>
</div>
<div class="password-page-signup-form">
<div class="password-page-form-header">
<h2>{{ 'general.password_page.opening_soon' | t }}</h2>
{% unless shop.password_message == blank %}
<p class="password-page-message">
{{ shop.password_message }}
</p>
{% endunless %}
</div>
{% form 'customer', class: 'newsletter-signup' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="form-success">{{ 'general.password_page.signup_form_success' | t }}</p>
{% else %}
{% if section.settings.newsletter_text != blank %}
{{ section.settings.newsletter_text }}
{% endif %}
<div class="password-page-field-wrap">
<input class="password-page-input" type="text" name="contact[email]" id="email" placeholder="{{ 'general.password_page.signup_form_email_placeholder' | t }}">
<input class="submit" name="commit" type="submit" value="{{ 'general.password_page.signup_form_submit' | t }}">
<input type="hidden" name="contact[tags]" value="prospect, password page">
</div>
{% endif %}
{% endform %}
</div>
</div>
</div>
<div class="password-page-footer" role="contentinfo">
<div class="password-page-inner">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com/" target="_blank" title="Create your own online store with Shopify">
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</div>
</div>
</div>
<div id="modal-login" class="password-page-modal-wrapper">
<div class="password-page-modal">
<div class="module header">
<p class="form-title">{{ 'general.password_page.login_form_heading' | t }}</p>
</div>
{% form 'storefront_password' %}
{{ form.errors | default_errors }}
<div class="password-page-field-wrap" {% if form.errors %}data-open-modal{% endif %}>
<input class="password-page-input" type="password" name="password" id="password" placeholder="{{ 'general.password_page.login_form_password_label' | t }}" autofocus>
<input class="submit" name="submit" type="submit" value="{{ 'general.password_page.login_form_submit' | t }}">
</div>
{% endform %}
</div>
</div>
{% schema %}
{
"name": "Password pages",
"class": "section-password",
"settings": [
{
"type": "header",
"content": "Newsletter"
},
{
"id": "newsletter_text",
"type": "richtext",
"label": "Text",
"default": "<p>Find out when we open:</p>"
}
]
}
{% endschema %}
please check this
I'm sorry, I don't know what to do. None of this means anything to me. I tried replacing the code that you just sent me to into the SECTIONS> password.liquid and it deleted all of the information I did on the Password Page. I also have the GRID theme, not debut, not sure if that makes a difference.
This is the code in SECTIONS> password.liquid on my page
<script
type="application/json"
data-section-type="password"
data-section-id="{{ section.id }}"
></script>
<div class="password-page main-content">
<div class="password-page-header">
<div class="password-page-inner">
<a href="#modal-login" class="admin-login-modal">
{{ 'general.password_page.password_link' | t }}
</a>
</div>
</div>
<div class="password-page-content">
<div class="password-page-inner">
<div class="password-page-logo">
<header class="main-header" role="banner">
<div class="password-branding">
<a class="logo-link" href="{{ routes.root_url }}">
<h1>{{ shop.name }}</h1>
</a>
</div>
</header>
</div>
<div class="password-page-signup-form">
<div class="password-page-form-header">
<h2>{{ 'general.password_page.opening_soon' | t }}</h2>
{% unless shop.password_message == blank %}
<p class="password-page-message">
{{ shop.password_message }}
</p>
{% endunless %}
</div>
{% form 'customer', class: 'newsletter-signup' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="form-success">{{ 'general.password_page.signup_form_success' | t }}</p>
{% else %}
{% if section.settings.newsletter_text != blank %}
{{ section.settings.newsletter_text }}
{% endif %}
<div class="password-page-field-wrap">
<input class="password-page-input" type="text" name="contact[email]" id="email" placeholder="{{ 'general.password_page.signup_form_email_placeholder' | t }}">
<input class="submit" name="commit" type="submit" value="{{ 'general.password_page.signup_form_submit' | t }}">
<input type="hidden" name="contact[tags]" value="prospect, password page">
</div>
{% endif %}
{% endform %}
</div>
</div>
</div>
<div class="password-page-footer" role="contentinfo">
<div class="password-page-inner">
{% capture shopify %}
<a class="shopify-link" href="//www.shopify.com/" target="_blank" title="Create your own online store with Shopify">
<span class="shopify-name">Shopify</span>
</a>
{% endcapture %}
{{ 'general.password_page.powered_by_shopify_html' | t: shopify: shopify }}
</div>
</div>
</div>
<div id="modal-login" class="password-page-modal-wrapper">
<div class="password-page-modal">
<div class="module header">
<p class="form-title">{{ 'general.password_page.login_form_heading' | t }}</p>
</div>
{% form 'storefront_password' %}
{{ form.errors | default_errors }}
<div class="password-page-field-wrap" {% if form.errors %}data-open-modal{% endif %}>
<input class="password-page-input" type="password" name="password" id="password" placeholder="{{ 'general.password_page.login_form_password_label' | t }}" autofocus>
<input class="submit" name="submit" type="submit" value="{{ 'general.password_page.login_form_submit' | t }}">
</div>
{% endform %}
</div>
</div>
{% schema %}
{
"name": "Password pages",
"class": "section-password",
"settings": [
{
"type": "header",
"content": "Newsletter"
},
{
"id": "newsletter_text",
"type": "richtext",
"label": "Text",
"default": "<p>Find out when we open:</p>"
}
]
}
{% endschema %}
Thanks for update
your theme is not theme logo upload option it can be done some customization can you please contact PM
Hello,
I'm facing this issue on http://www.shopfairroads.com. I see you are asking for us to provide our Password Page Header Code - can you let me know how this can be located?
Thank you,
Joelle
Thanks for post
yes, you have find this code section part left side edit code password header liquid file
(Tried to post this but I don't see it showing up - second attempt).
Found the following - do you find what you need here? Thank you!
<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 it
can you please upload 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"
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 %}
Thanks for the quick reply!
Can you please help me with understand how to get the photo to be non-blurry? https://shopfairroads.com/
These are high resolution images. Thank you!
Thanks
can you please update again
<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: 'master' }}"
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: 'master' }}"
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 %}
Works now - thank you!
Thanks for update and support.
Hi, I am having issues as well! I've tried copy and pasting your code but it havent word for me. It says 255 with a grey line. Please help!
Hello, @Aliyers
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.
Thanks
can you please add me to the staff so i will fix
i have done this
also if someone some issue please add this password header section 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"
data-src="{{ img_url }}"
src="{{ section.settings.logo | img_url: 'master' }}"
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>
<style>
.password-content .site-header__logo-image {
background: transparent;
}
.password-content .site-header__logo-image img {
display: inline-block !important;
}
</style>
{% 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 %}
You are truly amazing!!! thank you so much!
Thanks for the update and support.
I have tried to make my logo appear in the password page and I even copied the link provided in the asset theme but my logo still doesn't appear:
.password-content .site-header__logo-image img {display: inline-block !important;}
The URL of my page is www.almarecol.com
What should I do to fix this issue?
Thanks for post
can you please update the password header code i have provide above otherwise give me i will update
I am trying to do this because I cannot get my logo to show up on my password page but I cannot find where I am supposed to add the code. Can you please help me.
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.
I try the code but it isn't working on the password page still could anybody help me
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.
Hi! I am having the same issue. For one of my sites but not the other. Please help!
sorry for that any issue
can you please show me issue image and details
@KetanKumar I am unable to get the logo to show on the password page for this site.
oh sorry for that can you please share password page password header 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"
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 %}
<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 %}
here you go @KetanKumar I've tried posting this numerous times and it doesn't seem to show in message thread now.
<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 %}
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