How to add an SVG logo in Sense theme?

Store Design

Topic summary

A user attempted to add an SVG logo to their Shopify store using the Sense theme, following a tutorial designed for the Debut theme. The tutorial’s instructions didn’t match the Sense theme’s code structure.

Technical Challenge:

  • The Sense theme requires modifications across multiple files (JavaScript at line 670, liquid/html at lines 350/351/152)
  • Simply editing header.liquid as suggested in the tutorial doesn’t work
  • Maintaining theme customization functionality requires additional logic

Recommended Solutions:

  • Convert SVG to PNG: Use an online converter to transform the SVG into a PNG format, which Shopify handles natively without code changes
  • Hire a professional: If unfamiliar with web development, professional help is advised for proper SVG implementation

Outcome:
The original poster chose to convert their logo to PNG format rather than attempt complex code modifications. Additional responses suggested browser-based conversion tools and noted that ICO format may be needed for favicons.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am trying to add an SVG logo on my Shopify store according to this tutorial : https://www.clickleaders.com/shopify-svg-logo/

But when i’m searching for the line in the header, i only have this : “{% if section.settings.logo %}
“logo”: {{ section.settings.logo | image_url: width: section.settings.logo.width | prepend: “https:” | json }},
{% endif %}”.

When i modify it, it doesn’t work on the website… I don’t know how to do it. If someone knows, it will be very helpful.

Thank you very much,

Gaël

1 Like
2

Hi @gaelrt !

Changing the code so that you can use svg as a logo is not trivial, as there are multiple lines of code you would need to change. In order to keep ThemeEditor customization functionality, you would also need to add new logic to the code.

The tutorial uses the Debut Theme and falsely suggests that the same changes could be applied to any themes’ header.liquid-file. This is wrong. In Sense Theme you would have to change javascript code starting line 670, aswell as liquid/html code in line 350/351/152. However, if you are not familiar with web development, I would strongly advise to hire a professional for that.

The easiest way is to use an online converter and convert the logo to png. This would be my recommendation for you! :slightly_smiling_face:

1 Like
3

Hello Ecom3,

Thank you for your answer. I understand that it is not easy for a beginner.

Thanks for the advice, i chose to do that :slightly_smiling_face:

Have a nice day,

Gaël

4

:light_bulb: Still struggling to display your SVG logo in the Shopify Sense theme?

A quick fix is to first convert the SVG into a clean, lightweight PNG—Shopify can handle it without any code changes.

I use the online converter | safeconvert space to do just that:

  • WebAssembly-based conversion happens on your device—your files never leave the browser, 100% private

  • One-click SVG → PNG (and many other formats) with perfect transparency

  • Drag-and-drop batch processing finishes a full icon set in seconds

  • Works offline after the first load—perfect on the subway or a flight

:backhand_index_pointing_right: Skip the Liquid edits and get your logo showing instantly: online converter | safe convert :rocket:

(Quick tip: After converting, rename the file to logo.png, upload it in your Shopify settings, and you’re good to go!)

5

If you’re adding a custom SVG logo in Shopify, one thing to keep in mind is that browsers and themes sometimes require an ICO format for favicons or app icons. A quick solution is to use an SVG to ICO converter online. It works directly in the browser, mobile-friendly, and generates high-quality ICO files for your store. This kind of favicon generator is super helpful if you want your branding to look consistent across all devices. :rocket: