How can I replace a PNG logo with an SVG in Dawn theme?

Store Design
1

Hello,

  1. Any good way to replace .png with .svg logo in the header?

  2. How to use my custom payment icons (also .svg) instead of the original Shopify’s?

Thank you!

2

Hi @nd500 ,

1: Please follow these steps:

Ex: your logo is ‘logo.svg’

  • Step 3: Go to sections > header.liquid file, find ‘header__heading-logo’ and change code:

https://i.imgur.com/CQC58Ez.png => https://i.imgur.com/ABRuJ78.png

Code:

Hope it is clear to you.

1 Like
3

Great info!

Placing the original removed code as reference in case someone wants to add it back.

{%- if section.settings.logo != blank -%}
            {%- assign image_size = section.settings.logo_width | append: 'x' -%}
            
          {%- else -%}
            {{ shop.name }}
          {%- endif -%}
4

@nd500

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.

5

[Issue resolved, I’m not sure how to delete my reply though]

1 Like
6

Hi @print-success ,

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

7

@print-success

Good!

if you have post solution that’ would be great so in future someone else use that code and accept your solution

that’s it

8

Thanks, but the logo isn’t animated. It’s loaded as a static image. Any suggestion?

https://cdn.shopify.com/s/files/1/0583/6229/8574/files/animated_logo_with_transparent_bg.svg?v=1662189793

9

Fixed it myself. I was exporting the .svg as JS instead of CSS.

10

Hello LitExtension, thanks for your solution that works very good. I have a question about it, when I put my svg logo following your steps it worked fine for desktop. Regretably, in mobile devices the responsiveness of page become problematic because size of the logo (the actual size is perfect for desktop), it is possible to change size of the logo only for mobile devices??? Thanks

Size.png
Size.png1920×1080 312 KB

1 Like
11

Hi @NaMasPet ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

1 Like
12

Thank you @LitExtension , finally I reduced the size of the logo up to adjust it to mobile devices, I sacrified quality is desktop mode but was not so awful.

1 Like