Shopify themes, liquid, logos, and UX
I finally decided to replace the blurred .png logo with a vector based one on our site.
It seems nice on the desktop but on mobile devices the logo looks terrible. The font does not seem to be loaded correctly in the svg file and the entire logo looks compressed.
On desktop it looks fine:
On mobile device it looks awful:
This is what I have done:
1. Uploaded a .svg-logo to assets.
2. Edited the code as follows
In the header.liquid I removed this code...
<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">
and replaced with this magic...
<p><a href=""><img src="https://cdn.shopify.com/s/files/1/0412/8843/3815/files/logo.svg?v=1634737206" alt="" style="display: block; margin-left: auto; margin-right: auto;" /></a></p>
Venture theme
Are there any tips on how to tweak this so the logo looks okey on the mobile as well?
Thanks.
User | RANK |
---|---|
137 | |
97 | |
79 | |
62 | |
61 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023