Can I use SVG logo in Dawn 2.0 Shopify theme?

schaschlyk
Excursionist
18 0 5

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.

Replies 11 (11)

KetanKumar
Shopify Partner
36839 3635 11972

@schaschlyk 

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

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

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
schaschlyk
Excursionist
18 0 5

https://schaschlyk.de/

password: leeklas

KetanKumar
Shopify Partner
36839 3635 11972

@schaschlyk 

thanks for URL

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
schaschlyk
Excursionist
18 0 5

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

KetanKumar
Shopify Partner
36839 3635 11972

@schaschlyk 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

ptrcole
Visitor
1 0 0

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

schaschlyk
Excursionist
18 0 5

Unfortunately, no.

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

Paulo_Solinho
Visitor
1 0 0

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:

 

    <img srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
              src="{{ section.settings.logo | img_url: image_size }}"
              loading="lazy"
              class="header__heading-logo"
              width="{{ section.settings.logo.width }}"
              height="{{ section.settings.logo.height }}"
              alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
            >

 

Replace with:

 

<img srcset="https://cdn.shopify.com/s/files/1/0476/8428/8670/files/XXXXXXXX(COPY OUR LINK).svg?v=1624014689"
src="https://cdn.shopify.com/s/files/1/0476/8428/8670/files/XXXXXXXX(COPY OUR LINK).svg?v=1624014689"
loading="lazy"
class="header__heading-logo"
width="{{ section.settings.logo.width }}"
height="{{ section.settings.logo.height }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}"
>

 


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

ParisLefleur
Visitor
1 0 0

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. 

Eleneby
Tourist
13 0 1

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

Vierettt
Tourist
10 0 3

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.