Brooklyn - Upload SVG File for Logo

New Member
1 0 0

Hi,

 

I am trying to upload an SVG file for my logo using the Brooklyn Theme.

 

Does anybody know how I would do this, or where in the code I can change this? I read a few topics about this but none of the code matches and I can't figure it out. 

The reason I ask is that my PNG logo is VERY blurry. If anyone knows how to fix this as well, please let me know!

Thanks!

0 Likes
Shopify Partner
1838 173 595

Hi Evan

You can upload your SVG logo to the theme's Assets folder and proceed to use it. Alternatively, you can inline it in CSS. Whichever suits you best.

Hope that helps!

I turn coffee in to code - since 1998
0 Likes
Tourist
6 0 7

I've tried doing this, but the header.liquid file has the following code in it:

                {% if section.settings.logo-inverted and template.name == 'index' %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                    <img src="{{ section.settings.logo-inverted | img_url: image_size }}"
                    srcset="{{ section.settings.logo-inverted | img_url: image_size }} 1x, {{ section.settings.logo-inverted | img_url: image_size, scale: 2 }} 2x"
                    alt="{{ section.settings.logo-inverted.alt | default: shop.name }}"
                    itemprop="logo">
                  </a>
                {% elsif section.settings.logo %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                     <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">
                  </a>

I've tried changing it to:

                {% if section.settings.logo-inverted and template.name == 'index' %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                    <img src="{{ 'logo-inverted.svg' | asset_url }}"
                    srcset="{{ 'logo-inverted.svg' | asset_url }} 1x, {{ 'logo-inverted.svg' | asset_url }} 2x"
                    alt="{{ section.settings.logo-inverted.alt | default: shop.name }}"
                    itemprop="logo">
                  </a>
                {% elsif section.settings.logo %}
                  <a href="/" itemprop="url" class="site-header__logo-link">
                     <img src="{{ 'logo.svg' | asset_url }}"
                     srcset="{{ 'logo.svg' | asset_url }} 1x, {{ 'logo.svg' | asset_url }} 2x"
                     alt="{{ section.settings.logo.alt | default: shop.name }}"
                     itemprop="logo">
                  </a>

But the logos simply disappear when loading on a desktop, and on a smartphone they show up but they're huge, and I see no way of customizing their size.

====================

EDIT: Nevermind, I've figured it out. Just had to add a "width" property to the <img> tag.
 

1 Like
Tourist
8 0 1

Hey Lucas, can you please provide the full code that you've got working? I've tried to adjust the code and couldn't make it work without your width parameters. Thanks in advance.

0 Likes