Why is my logo still fuzzy?

Taylor_Naff
New Member
1 0 0

Hi,

I'm using the Trademark theme and I'm following all the guidelines, but my logo still appears fuzzy. I have a perfectly good logo that looks great at any size. Trademark asks for a 200x 60px .png file. I've uploaded the logo multiple times in multiple formats. I've even tried uploading it as a Shopify file instead of uploading it through my theme, but that didn't work. So I decided to upload my logo in my product images, and it shows up perfectly clear there!! 

If anybody has any new ideas I would be very grateful.

Thank you!

0 Likes
Stylesupplier
Tourist
34 0 1

This issue you should ask your trademark theme owner. They can help you.

0 Likes

Hi Taylor,

I've checked your logo and in fact it's fuzzy in Chrome but sharp in Firefox.
One way to fix it in Chrome is to set CSS property image-rednering: pixelated

NuuSol logo - Chrome image-rendering

HTH,
Lukasz

I'm a software engineer. I make things happen automatically.
0 Likes
JoesIdeas
Shopify Expert
1195 106 290

Try using a vector (.svg) instead of png.

Vector graphics are infinitely scalable without loss of resolution, and double bonus they're lighter in file weight too.

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfill orders + email notifications).
Creator of Theme Scientist (A/B testing app) and Tip Jar (add a tip button to your store).
0 Likes
JustLotus
New Member
3 0 0

It seems Shopify won't allow me to upload any vector files. :(

0 Likes
G_Nerd
New Member
1 0 0
Did you find a solution to the blurry logo issue?
0 Likes
JustLotus
New Member
3 0 0

I didn't find a solution but I did learn that the issue depends on the template I use. 

0 Likes
sitesmith
New Member
2 0 0

Just browsing through these threads on logos and wonder which template you found that worked... 

0 Likes
MAISONHIJAB
New Member
1 0 2

Hello!

 

Is there any chance for Shopify, to come with an answer that really solves the problem of the blurry logo. So many people seem to have this problem, causing to really stop with Shopify. And I have been researching myself for a while now, to find a solution. But it seems that Shopify doesn't respond to it. 

I tried all diff sizes and my logo remains blurry (maisonhijab.com). Can someone please help?

XCEPTION
New Member
1 0 1

I did a workaround for it.
I am new to Shopify and I am using debutify theme. I am not sure if the code looks exactly the same for all themes.
One more thing is I have used a transparent background logos everywhere.
Steps:

  • Go to Online Store > Customize > Theme Actions > Edit Code
  • In the left-hand side folder structure, you can see the "Add new asset" link in the Assets folder/directory.
  • Click on it and add your logo image(Keep its name easy for reference). In my case, it is "fleezy_logo_transparent.png" and "fleezy_logo_transparent_light.png"
  • Also, keep logos uploaded in the theme customization section in the header section, where you usually do. This can be avoided but then we will have to tweak the code more in that case.
  • Now open the file Sections > header.liquid
  • Find the code that starts with

 

{% if section.settings.inverted_logo and template.name......​

 

  • and ends with

 

......{% else %}
        <span class="default-logo">{{ shop.name }}</span>
        <span class="mobile-logo">{{ shop.name }}</span>
    {% endif %}​

 

 

  • If code does not looks exactly the same as above then search for <img class="logo.... Mostly you will get a start of it. 
  • Replace the whole code with below

 

{% if section.settings.inverted_logo and template.name == 'index' or template.name == 'collection' or template.name == 'article' %}
        <img class="logo inverted-logo" src="{{ 'fleezy_logo_transparent_light.png' | asset_img_url : 'x200' }}"
        srcset="{{ 'fleezy_logo_transparent_light.png' | asset_img_url : 'x200' }} 1x, {{ 'fleezy_logo_transparent_light.png' | asset_img_url : 'x200' }} 2x"
        alt="{{ 'fleezy' | default: shop.name }}"
        itemprop="logo">
    {% else %}
        <span class="inverted-logo">{{ shop.name }}</span> 
    {% endif %}

    {% if section.settings.default_logo %}
        <img class="logo default-logo" src="{{ 'fleezy_logo_transparent.png' | asset_img_url : 'x200' }}"
        srcset="{{ 'fleezy_logo_transparent.png' | asset_img_url : 'x200' }} 1x, {{ 'fleezy_logo_transparent.png' | asset_img_url : 'x200' }} 2x"
        alt="{{ 'fleezy' | default: shop.name }}"
        itemprop="logo">
    
        <img class="logo mobile-logo" src="{{ section.settings.default_logo | img_url: 'x80' }}"
        srcset="{{ 'fleezy_logo_transparent.png' | asset_img_url: 'x80' }} 1x, {{ 'fleezy_logo_transparent.png' | asset_img_url: 'x80', scale: 2 }} 2x"
        alt="{{ 'fleezy'| default: shop.name }}"
        itemprop="logo">
    {% else %}
        <span class="default-logo">{{ shop.name }}</span>
        <span class="mobile-logo">{{ shop.name }}</span>
    {% endif %}​

 

  • Note that where I have used 'fleezy_logo_transparent_light.png' is the one which appears on sticky bar that scrolls and 'fleezy_logo_transparent.png' is the default/dark logo.
  • The other thing to notice is the sizes(x80, x200). You can adjust them as per your requirements on web and mobile. In my case x80 is for mobile and x200 is for desktop

I hope this helps