Blurry logo on Narrative theme password page

Serenachan
New Member
2 0 0

Hi, I realised my logo on the header of the waiting/password page of the Narrative theme appears blurry even though it is fine in the other pages. Does anyone know why?

0 Likes

Hey,

Can you please send the URL of your store so we can debug it? Thanks.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
david9641
New Member
2 0 0

Hi, what is the solution to this?  I am having the same problem.  I wanted to either replace the logo with an SVG file or fix the PNG file that comes out blurry on the password page.  Doesn't have this issue on other pages.  Using the brooklyn theme.

0 Likes

@david9641 please send the URL to your store, it needs investigation to identify the issue.

Thank you

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Add a slider to product page images: Minimal theme | Debut theme | Brooklyn theme
◦ Contact: ezfycode@gmail.com.
0 Likes
Serenachan
New Member
2 0 0
Hi,

Apologies for the late reply. It is: baaba.co
0 Likes
david9641
New Member
2 0 0

sigruntennis.com

0 Likes
EMPTYWORLD
New Member
1 0 0

Hey I have the exact same issue. What can I do?

 

My url is: revivedsense.com

0 Likes
ChuckBeGone
New Member
1 0 0

While troubleshooting this problem for my own page I stumbled upon a solution:

https://community.shopify.com/c/Shopify-Design/Blurry-header-logo-in-password-page-of-Debut-Theme/td... 

The solution on the above page works for Narrative as well.

Replace lines 3 and 4 in password-header.liquid with the following:

 {% 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;">

 

Just remember that you will have to size your logo to a reasonable width so it doesn't explode outside the margins. There is probably a workaround where the width of the user's browser can be detected but that is outside of my technical know how.

0 Likes
harliandme
New Member
1 0 0

Hi!

I am having this same issue, can you please help! I have kept the logo off the password page until I can fix it as it just looks horrible.

 

My website is www.harliandme.com.au

 

Thank you so much

0 Likes
allan24
New Member
2 0 0

DM me to fix this blurry image logo for you for only $5. Gonna fix it before payment.

0 Likes