How to add a logo to the Password page

Highlighted
New Member
3 0 0

Hi All

My site is still in development and I have a password holding page. However, I'd like to add my company logo here but am having trouble find how to do it. Presumably it's in customising the HTML/CSS settings, but I don't see where? 

Any advise welcome.

Store: http://vino-loco.myshopify.com/password

Thanks

Minivan

0 Likes
Highlighted
Shopify Staff
Shopify Staff
54 0 10

Hello John,

I'm Brian from the Guru team here at Shopify. :) Hope the week is treating you well.

You are correct in that the logo would have to be added through the HTML/CSS of your theme, and we actually have a guide on how to create the template for the password page here: https://docs.shopify.com/manual/configuration/store-customization/page-specific/password-page/can-i-...

Once the template is made, you will of course be able to edit the code to make the page look just the way you like, including adding your logo. Assuming that you have already uploaded a logo into your theme editor, or have one uploaded to your files section with the name logo.png, the snippet of liquid you will need to add the logo is:

{{ 'logo.png' | asset_url | img_tag }}

 I hope this helps get you on your way to make your password page the way you want it. :)

If you have any other questions or issues, then please do not hesitate to get in touch with us at support@shopify.com and one of our lovely gurus will be on hand to assist.

Have a wonderful day!

0 Likes
Highlighted
New Member
3 0 0

Hi, thanks for the reply.

I followed the guide an setup: password.alternate.liquid

Here's the code:

      {% comment %}
          Site name or logo
          {% endcomment %}
          <div class="password-page__logo">
            {% if settings.logo_use_image %}
              <img class="logo{% if settings.logo_use_inverted %} logo--has-inverted{% endif %}" src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
              {% if settings.logo_use_inverted %}
                <img class="logo logo--inverted" src="{{ 'logo-inverted.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
              {% endif %}
            {% else %}
              <h1 class="

 

I have uploaded the logo.png file, but it's not showing up.

I guess my two question are:

1. How do you set the site to use: password.alternate.liquid

2. How do I get the logo to show

Thaks for the help

John

0 Likes
Highlighted
Shopify Staff
Shopify Staff
54 0 10

Hello John,

I've taken a little look at your code, and can see that there is a slight error in it. I've pasted the correct code below, and made the problem area bold for you.

{% comment %}
          Site name or logo
          {% endcomment %}
          <div class="password-page__logo">
            {% if settings.use_logo %}
              <img class="logo{% if settings.logo_use_inverted %} logo--has-inverted{% endif %}" src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
              {% if settings.logo_use_inverted %}
                <img class="logo logo--inverted" src="{{ 'logo-inverted.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
              {% endif %}
            {% else %}
              <h1 class="h2">
                <span>{{ shop.name }}</span>
              </h1>
            {% endif %}
          </div>

Also, it's not possible to have the passord.alternate.liquid page load up instead. I would suggest moving any changes that you have made to that template into your password.liquid, as this is the only one that the theme will call up. :)

I hope this helps, and let me know if there's any other questions.

0 Likes
Highlighted
New Member
3 0 0

Hi Brian

Thanks for your help, that works perfectly.

Great customer support.

Cheers

John

0 Likes
Highlighted
New Member
2 0 0

Hello,

I tried doing what you also suggested and have not found a solution to the same problem. 

0 Likes