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

Tourist
8 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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
8 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

@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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
8 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

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
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
8 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