How can I add an SVG logo to Dawn 2.0 theme?

Store Design
1

I have my logo available as a png and svg file. I’ve read that svg files are better because they are smaller, have a better quality and are smaller in size.

I found tutorials online but i cant make it work because the code in dawn os 2.0 is different.

Thank you.

1 Like
2

@schaschlyk

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

https://schaschlyk.de/

password: leeklas

1 Like
4

@schaschlyk

thanks for URL

sorry but i can’t see your svg code if not its custom

5

i haven’t saved my svg logo into my code yet. do i have to in order for you to figure it out?

1 Like
6

@schaschlyk

It can be done by doing some code customization. please send me a personal message and we can discuss what you’d like

7

Hi,

were you able to solve this task? I actually got the same problem.

I’ve added a SVG File / Logo before for my narrative theme and want to do the same for DAWN.

Have a great day,

Matthias

8

Unfortunately, no.

I got private message from people who would do it for me, but not for free.

1 Like
9

I solved it this way:

1: Upload your SVG logo to shopify: Settings > Files in admin
2: Copy the Logo Link (Copy Link)
3: Go to Theme and Edit Code
4: Search header.liquid
5: Find this code:

Replace with:

See it working in my store: https://calcadoportugues.pt/

if anyone has a better solution please tell me

P.S: is NOT working on Firefox

10

Hello. Can anyone help with the Dawn Theme.

My goal is to be able to make my logo much bigger than what .PNG & .JPEG allows.

I was told if I use an .SVG logo, I can size it as I want. Is this true? And if so, how? I’ve tried the codes everyone is posting to delete in header.liquid but the Dawn theme doesn’t have any of those codes. Please help.

11

Hello,

Is this really only what you did to get the logo svg. Because in my case the size of the logo is huge. I can’t resize it as I can see on your site.

Have a good day

12

For anyone having the same problem (means pasting the link works, and you successfully replaced the logo with a vector file, but now it’s way too large) - I had the same problem in Dawn theme, and I found a solution that works for me. But I want to point out that I’m not a developer.

Go to your base.css file, find a line of code (around 1895 in my theme):

.header__heading-logo {
height: auto;
width: 100%;
}

and change the width value for whatever works for you (for me 50% was perfect).

Now, if you have the logo center-aligned, you might notice that it’s not in the middle anymore. In my case, I went to line 1816, and in this piece of code:

.header {
display: grid;
grid-template-areas: ‘left-icon heading icons’;
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
padding-top: 1rem;
padding-bottom: 1rem;
}

I’ve changed values to: grid-template-columns: 1.5fr 1fr 1fr;

This centered my logo back.