add svg LOGO

Ninthony
Shopify Partner
1723 243 666

Where are you trying to add the SVG

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
maxhot
Tourist
6 0 1

Primarily I'm trying to add the SVG as a favicon, it would also be good to add it on the left side of the brand if that's possible.

0 Likes
RobertGems
New Member
1 0 0

I'm also trying to add simple SVG logos to pages on my website and while most browsers and apps have made SVG the standard, Shopify has sadly chosen not to fix their broken, outdated image uploading back-end, evident here, by a post from 2017:  https://community.shopify.com/c/Shopify-Design/SVG-Icon-as-Section-Settings-Image-Picker-Theme-Setti...

 

I hope you find a solution and if you do, please share it with the rest of us.  Thanks.

0 Likes
rowena24
Tourist
3 0 1

Hey there,

 

I wrote a guide on how I did manage to use an SVG logo on my store in this post: https://marketingfuzz.com/svg-logo-in-shopify

Let me know if you encounter any problem.

joenudo
Tourist
10 0 1

Where would I put this code to display it? Does it have to go on a specific line?

 

<a href="/">{% include 'logo-svg' %}
0 Likes

Excellent article 

Working with small businesses to establish branding, online presence, and strategy for marketing and operations.
0 Likes
KetanKumar
Shopify Partner
16096 1770 5940

Hello, @maxhot 

Thanks for post 

sorry but i can't see your store.

image.png

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
ecotec
Excursionist
34 0 8

Hi Guys, 

I'm trying to add an SVG logo too. And i have succeeded, but its way too big now. 

ecotec_0-1602240602586.png

this is the logo code:

 

{%- capture header_logo -%}
          <a href="{{ routes.root_url }}" class="header__logo-link">
            {%- if section.settings.logo != blank -%}
              {%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
              <img class="header__logo-image"
                   style="max-width: {{ section.settings.logo_max_width }}px"
                   width="{{ section.settings.logo.width }}"
                   height="{{ section.settings.logo.height }}"
                   src="{{ section.settings.logo | img_url: image_size, scale: 2 }}"
                   alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
            {%- else -%}
              <span class="header__logo-text">{{ shop.name }}</span>
            {%- endif -%}
          </a>
        {%- endcapture -%}

        {%- if request.page_type == 'index' -%}
          <h1 class="header__logo">{{ header_logo }}</h1>
        {%- else -%}
          <div class="header__logo">{{ header_logo }}</div>
        {%- endif -%}

 

 I changed the src to 

 

<a href="/">{% include 'logo-svg' %}

 

how do i correctly make it the good size? 

Thanks in advance!

(I'm using the warehouse theme)

 

 

0 Likes
Ninthony
Shopify Partner
1723 243 666

Should be able to target it with a class in css and define the width:

img.header__logo-image {
width: 50px;
}

 

Where width is whatever you want the width to be. 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
ecotec
Excursionist
34 0 8

It's not working. Image doesn't seem to respond to it's class which is strange. I also tried removing the lines in the class 

style="max-width: {{ section.settings.logo_max_width }}px"
                   width="{{ section.settings.logo.width }}"
                   height="{{ section.settings.logo.height }}"

 and i tried it with just defining the width and deleting everything else in the css class like so:

.header__logo-image {
width: 50px;
}

but no luck..

0 Likes