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

Highlighted
Tourist
9 0 2

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
Highlighted

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
9 0 2

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
9 0 2

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
9 0 2

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 2

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
New Member
1 0 0

Hey!

I know you've switched the theme, but I think someone will find this helpful.

 

This worked for me!

 

1. Click Edit Code on your theme

2. Scroll down to Assets and Add a new asset with the name "logo.svg"

3. Go to header.liquid

4. Scroll down to line number 90 or so and spot the following code:

 

{% if section.settings.logo-inverted and request.page_type == 'index' %}
<a href="{{ routes.root_url }}" 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="{{ routes.root_url }}" 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>

 

5. Replace the bolded parts with this:

 

 <img src="{{ 'logo.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ shop.name }}" itemprop="logo">
 
Hope it helps.
0 Likes