Recently, I found a way to use SVG logo in Shopify. I have been searching for a tutorial online for months to no avail.
In this guide, I’m going to show you how to use an SVG format logo in your Shopify store to have a crisp-looking logo on your storefront.
Take note, I am not a developer by education. My knowledge of codes is self-taught. If I was able to do it, you can too!
Over the course of more than two years on the Shopify platform, I learned that most Shopify themes (free ones at least) do not support SVG logo uploads. This prompted me to look for a tutorial online but only found a bunch of users who have the same issue.
Before diving into the tutorial, let’s learn SVG 101.
What is SVG?
SVG is a graphic vector format that is used to display images around the web. It is a human-readable file that can be modified by using codes. That characteristic makes it stand out versus PNG and other famous image formats.
SVG was developed around the 1900s but did not get its place in the podium until 2017 when modern browsers started to support rendering of the said image format.
FREE DIGITAL LIBRARY ACCESS
What does SVG format look like?
Unlike PNG and JPG, SVG images cannot be viewed by how it really looks like on a website or other rendering applications. If it’s in one of your computer folders, it will have the icon of a browser.
This is how an SVG logo looks like when stretched versus a PNG format logo. Both originals are in small sizes. By looking at the comparison below, it is undeniable that SVG looks way better than PNG.
Why would you need to use an SVG logo in Shopify?
Your website will look more professional.
Even if you have a newly built Shopify store but you do have a nice-looking, sharp SVG logo, you are one step ahead of the game! A professional-looking site as we know it builds trust with visitors and customers. It is part of branding.
Have you encountered a big brand Shopify website that has a really crisp logo? What did you feel knowing that your Shopify store has a dull-looking logo?
I felt envious when I saw a really simple logo but has a very clear and defined edge. Whereas mine looks unprofessional no matter how big of an image I uploaded.
Driven by my envy and curiosity, I wanted to have the same quality of logo in my store header. I then stumbled to an SVG. That these logos are in SVG format, making it really sharp-looking.
So now what?
I obviously did not have any experience or knowledge about SVG. So how do I do it? I asked myself exhaustingly knowing that it takes a whole lot of work.
Shopify forum it is! I went and searched for a hint but nada! Even posts from 4 years ago were not resolved. Why does nobody talking about a working solution to this issue?
Few months passed, I tried many different options to upload an SVG logo yet neither works. Let me tell you how exhausting that was looking at my crap logo while I definitely know that I can make it better.
Here’s the guide on how to use SVG logo in Shopify
- Create a logo
- Convert it to an SVG
- Create an HTML version of the logo
- Download your current theme.
- Paste the code to your site header
- Save and view it from your website storefront
Disclaimer: This guide has my recommendations for applications that I personally use. You can, of course, use different apps that are convenient to you as long as it yields the same outcome.
Create a logo
Have an existing brand logo already? Perfect! You can skip to Step 2 in that case. Otherwise, follow the instruction below to create a nice logo for free.
Create a logo in Canva. Canva is very beginner-friendly. If you don’t have any experience in design, Canva is the way to go. It’s populated with hundreds if not thousands of templates that you can use for free.
Head over to Canva.com and sign up for a free account and create your logo. There should be enough free assets that you can use for your logo. If you want to up your design, premium vectors are available to purchase per usage. It only costs a dollar per premium asset.
Once you’ve clicked on “Create a design”, choices of the type of design will show up. The logo option should be immediately visible, otherwise, you can search for it.
Click on the “logo” option. A new tab will open with the design interface. On the left side, you can choose a template to start creating your logo the easy way.
Play around with the templates and elements until you are satisfied with your logo design. Once that height of satisfaction has been achieved, download your logo using the download button on the upper right part of the screen.
Notice the settings on the image above? Drag the resizer to the max size available which is 1500 x 1500 px and check the “Transparent Background” option. This way, the image downloaded will have no background on it which is the desired setting for logos.
Inkscape is an open-source application where you can create and edit vectors for absolutely free. The software runs in Linux, Mac OS X and Windows desktop computers. So you should be able to install it on your computer fine.
I’d like to add that you can skip with Canva and design directly in Inkscape. However, Inkscape isn’t beginner-friendly in my opinion. Canva also has the availability of good elements and nice fonts to choose from.
Back to Inkscape
Once you’ve installed the app, open it and click on “file”. The rectangle in the middle will be your working space.
Then click on “Import” and choose the logo that you have created from Canva.
The pop-up below will show, just go on and click “OK”.
Once your logo is imported, it will initially be placed somewhere outside the rectangle workspace. Just drag it to the center.
Next, click on your logo so it is selected.
Then click on “Path” and choose “Trace Bitmap”.
A pop-up will again show up. Choose “Color”, check “Remove Background”, click “Update”, then finally click “OK”.
If you did it successfully, there should be two images now on your workspace, one on top of the other.
Drag the first one off the workspace and delete the remaining image. To do this, just click on the image and press “delete” on your keyboard.
The first image that you dragged out of the rectangle is the SVG version that you need. Bring it back to the rectangle workspace.
Now, click on “Edit” at the upper left of the screen and then click on “Resize Page to Selection”.
The canvas of the image should change to the size of the image itself.
You are now ready to save your SVG logo. Click on “File” again and choose “Save as”. Follow the next screen prompts on saving to your computer.
Create an HTML version of the logo.
I’ve always been thankful to this awesome editor. It never disappoints me when it comes to creating HTML codes to use on my websites.
Before jumping into the HTML editor, you need to upload your SVG logo first to your Shopify files.
To do that, go to the settings page of your Shopify dashboard. Then click on “Files”.
Next, upload the SVG logo. Once finished, copy the URL for the file and hop on to the HTML editor.
In the editor, click on the image icon.
Then, paste the link that you copied from the Shopify files and click “OK”.
Resize the image according to your liking by changing the dimensions or by dragging the resize arrow of the image.
After this, you need to center your logo. Click on the center icon as shown in the image below.
In order for your logo to be clickable on your website, you need to link it to your homepage. Click the link icon and paste or type your website address in the URL form and hit “OK”.
Now, copy the generated HTML code on the right side.
Download your current theme
Before touching your theme with any code, make sure that you download your theme file first so that in case you break your site, you can re-upload the original template.
To download your theme, go to “Themes” on the Shopify dashboard and click on the dropdown options where you can see a “Download Theme File” link.
Paste the code to the “header.liquid” section of your template.
Go to your theme and click “Edit code”. Then, find the “header.liquid” file.
Paste the code that you copied from the HTML editor at the very top.
Important note: Make sure that you remove the logo that you previously uploaded.
To remove the previous logo, go to “Customize” and remove the logo inside the header section.
To place the logo to where your previous PNG originally situated, find the logo wrapper and paste the copied HTML code there. It takes trial and error sometimes to find that perfect spot for your logo.
For Debut Theme
If you are using a debut theme or similar, find the code highlighted below, delete the line and paste the code.
All that’s left to do now is save the changes and visit your Shopify storefront to view the new SVG logo.
If you are not satisfied with the size of the logo, you can always go back to the HTML editor (step 3) and change the size of the image. You can make the image bigger without losing quality as it’s now an SVG.
Clarifications and suggestions are welcome in the comments below.
If you find this post useful, please PIN IT to a business tips board on Pinterest. After all, sharing is caring!