Using an SVG Logo in Your Shopify Store
An SVG file is preferable to raster formats (PNG, JPEG) for your website logo. As a vector format, SVG stores your logo as paths, shapes, and fills, making it infinitely scaleable without any loss in quality.
Out of the box, Shopify only supports .png, .jpg, and .gif for custom logos in the theme customizer. This guide walks you through using an SVG instead. It requires editing theme code, but Shopify has version control so you can roll back any changes if needed.
Step 1: Launch the Shopify Code Editor
Go to Online Store → Themes, click Customize under your current theme, then click Theme Actions → Edit Code.
Step 2: Upload Your SVG Logo to Assets
From the code editor, add a new asset and upload your SVG file (in this guide, it’s named logo.svg).
Step 3: Edit header.liquid
Find header.liquid under Sections. Search for {% if section.settings.logo %} and replace that entire block (up to and including its closing {% endif %}) with:
<a href="{{ routes.root_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 | escape }}{% endcapture %}
<img src="{{ 'logo.svg' | asset_url }}"
alt="{{ shop.name }}"
style="max-width: {{ image_size }}px;">
</a>
Save the file. This loads logo.svg from your assets and respects the max width set in the theme customizer.
Step 4: Check Your Store
Revisit your store and confirm the logo displays correctly across different screen sizes.
Things to Note
- No srcset needed. SVG is resolution-independent, so unlike PNG/JPEG you don’t need to define responsive size variations.
- No lazy loading needed. An above-the-fold SVG logo is small by nature and should load immediately.
- Inline SVG is an alternative. Instead of linking an external file, you can hardcode the SVG directly into
header.liquid. Both approaches work. - The theme customizer logo becomes redundant. Changing the logo image in the customizer will have no effect while this code is in place. Logo alignment and max width settings will still be respected.