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!
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
HTH,
Lukasz
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.
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?
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:
{% if section.settings.inverted_logo and template.name......
......{% else %}
<span class="default-logo">{{ shop.name }}</span>
<span class="mobile-logo">{{ shop.name }}</span>
{% endif %}
{% 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 %}
I hope this helps
User | Count |
---|---|
19 | |
17 | |
13 | |
11 | |
11 |