How to add an SVG logo in the Impact theme?

Store Design
1

Hello,

I am in the process of redoing my website using a new theme, and I cannot figure out how to add an SVG Logo. I have been able to do this for every other theme; however, I cannot figure out how to do this with the new code.

Previously I would put this code:

img data-src="{{ 'logo.svg' | asset_url }}"

Below is the code for my theme that I cannot figure out:

{%- capture logo_content -%}
        {%- if section.settings.logo -%}
          {%- capture sizes -%}{{ section.settings.logo_max_width }}px{%- endcapture -%}
          {%- capture widths -%}{{ section.settings.logo_max_width }}, {{ section.settings.logo_max_width | times: 2 | at_most: section.settings.logo.width }}{%- endcapture -%}
          {{ shop.name }}
          {{- section.settings.logo | image_url: width: section.settings.logo.width | image_tag: sizes: sizes, widths: widths, class: 'header__logo-image' -}}

          {%- if section.settings.transparent_logo -%}
            {{- section.settings.transparent_logo | image_url: width: section.settings.transparent_logo.width | image_tag: sizes: sizes, widths: widths, class: 'header__logo-image header__logo-image--transparent' -}}
          {%- endif -%}
2

Hi @robkaufman

Certainly, you just need to share the theme name to investigate further.

However, the code above you shared can be modified in a way you can put svg code in a text field and that will do the trick for you.

Change this

{
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.header.settings.logo.label"
    }

to

{
      "type": "text",
      "id": "logo",
      "label": "t:sections.header.settings.logo.label"
    }

Here, note the “type” for both the code fields, so do that and try if that works in your theme.

This is I assumed to get a text field and I could paste svg code there in customization and probably that will work.

Thanks

3

Hello,

Thank you for the reply. The theme is Impact.

I would rather not use the proposed method, and instead link the SVG to the file in my themes asset “{{ ‘logo.svg’ | asset_url }}” by changing the code in header.liquid