How can I add a .svg logo to my store? THEME: Debut

New Member
1 0 0

Title says it all.


thanks in advance


Here is a step-by-step instruction that can help you to find the place where you can change the logo code.

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure it will work). Duplicate the theme and test things in the copy.

Follow these steps:

1.From your Shopify admin, go to Online Store > Themes (In this example I have managed Debut theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Sections / header.liquid file.
4. You should find the following lines in the file (the code is about 164 line):

 <div class="grid__item small--one-half {{ logo_classes }}">
        {% comment %}
          Use the uploaded logo from theme settings if enabled.
          Site name gets precedence with H1 tag on homepage, div on other pages.
        {% endcomment %}
        {% if == 'index' %}
          <h1 class="h2 site-header__logo" itemscope itemtype="">
        {% else %}
          <div class="h2 site-header__logo" itemscope itemtype="">
        {% endif %}
          {% if section.settings.logo %}
            {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture logo_alt %}{{ section.settings.logo.alt | default: }}{% endcapture %}
              <img class="lazyload js"
                   src="{{ section.settings.logo | img_url: '300x300' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                   alt="{{ logo_alt | escape }}"
                   style="max-width: {{ section.settings.logo_max_width }}px">
                {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
                <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: }}"
                     style="max-width: {{ section.settings.logo_max_width }}px;">
          {% else %}
            <a class="site-header__logo-link" href="/" itemprop="url">{{ }}</a>
          {% endif %}
        {% if == 'index' %}
        {% else %}
        {% endif %}


Hope this helps you!



Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency |
Shopify Partner
6 0 2

In the Debut theme I replaced the png with an svg like this:

In the visual editor upload a small png of the logo - you should see a fuzzy rubbish logo on the preview.

Go to the code editor and find the asset folder. Upload the svg version of the logo.

Find the header.liquid file (under sections for the Debut theme).

Find line the if / else statement at line 174 and replace this with the following:

 <a href="/" itemprop="url" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}">
              {% capture image_size %}{{ section.settings.logo_max_width }}x{% endcapture %}
              <img src="{{ 'logo-YOURONE.svg' | asset_url }}" width="{{section.settings.logo_max_width}}" alt="{{ }}" itemprop="logo">


I tried changing the original code in that statement so that it changed the img src from logo.png | img_url to logo-MINE.svg | asset_url but I couldn't get it to work. The simpler snippet above does work.

Shopify Partner
6 0 2

OK Debut code has change a bit and this is a better way of doing it with the newer code:

Change line 175 to : {%- assign img_url = 'logo-YOURSVG.svg' | asset_url -%}

Change line 179 to src="{{ 'logo-YOURSVG.svg' | asset_url }}"

You can probably make the same/similar changes to the noscript block directly below this or relay on the default png that you upload through the visual editor.

You will be able to control the size of the svg via the dimension box in the visual editor ('Custom logo width (in pixels)').

1 Like
New Member
1 0 0

Dear bwi,

it's already 4 months, but the code does not work.

So the only thing that works is Chrome, in Firefox and on the mobile phone the logo will not show at all, in Edge only in png.

Any idea to improve the code?

Best regards,
Ales Me


15 0 1

This worked great! Thanks