How can we use a .svg logo on the Brooklyn theme?

Highlighted
Tourist
9 0 1

Guys, the question is pretty clear. I've been trying to find an answer to this question for the past couple of days and went through all the threads there are. Unfortunately, none of them work. Thanks in advance.

0 Likes

Hello @dimitrieraw,

1. Go to Online Store->Theme->Edit code
2. Asset->Add new asset (as logo.svg)

 

then go to header.liquid

search below 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">

Replace with this

<img src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo"> 
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
9 0 1

Hey, thanks for your reply. However, my code is looking different from what you've sent. If I remember well, it's the same solution you've provided on another thread that I've read and tried.

 

This is the code which I have found in regard to the logo on headler.liquid

{% if section.settings.logo %}
                    <img class="site-header__logo-image" 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">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ transparent_logo | img_url: image_size }}" srcset="{{ transparent_logo | img_url: image_size }} 1x, {{ transparent_logo | img_url: image_size, scale: 2 }} 2x" alt="{{ section.settings.logo.alt | default: shop.name }}" itemprop="logo">
                    {% endif %}
0 Likes
Highlighted

@dimitrieraw,

Did you add logo.svg in asset

 

Replace your code with this

{% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">
                    {% endif %}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
9 0 1

Thanks again but now the logo doesn't show at all. Of course, I've added the logo to my assets. 

 

I guess the name doesn't have anything to do with this as long as I am using the same asset name in "Assets" as in code, right?

0 Likes
Highlighted

did you add logo.svg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
9 0 1

Of course I did. It just does not show.  The .svg file is added as logo.png in the Assets.

 

Here is the code in my header.liquid

{% if request.page_type == 'index' %}
                <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% else %}
                <div class="h1 site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
              {% endif %}
                {% capture image_size %}{{ logo_max_width | escape }}x{% endcapture %}

                <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
                  {% if section.settings.logo %}
                    <img class="site-header__logo-image" src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">

                    {% if request.page_type == 'index' and section.settings.transparent_header_enable %}
                      {% if section.settings.transparent_logo == blank %}
                        {%- assign transparent_logo = section.settings.logo -%}
                      {% else %}
                        {%- assign transparent_logo = section.settings.transparent_logo -%}
                      {% endif %}

                      <img class="site-header__logo-image site-header__logo-image--transparent" src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo">
                    {% endif %}
                  {% else %}
                    {{ shop.name }}
                  {% endif %}
                </a>
              {% if request.page_type == 'index' %}
                </h1>
              {% else %}
                </div>
              {% endif %}
0 Likes
Highlighted
New Member
5 0 0

Hi @dimitrieraw , I also use Brooklyn theme, and I realised that maybe this is not working for you, because you must replace it in both "if".

 

So, after you upload your .svg logo with the name "logo.svg", in your theme assets, search for this code (mine is around line 193-207): 

 

 

{% if section.settings.logo-inverted and template.name == 'index' %} <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">

 

<img id="dab-header-logo" 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="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">

 

<img id="dab-header-logo" 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 replace both bold code with this one,

 

<img src="{{ 'logo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo"> 

 

0 Likes
Highlighted
Tourist
9 0 1

Thank you very much, man. I have passed this theme for a paid one but I am sure that someone will take advantage of your input. Have a nice one!

0 Likes