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.
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.
Excellent article rowena24! Thank you.
Hello, @maxhot
Thanks for post
sorry but i can't see your store.
Hi Guys,
I'm trying to add an SVG logo too. And i have succeeded, but its way too big now.
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)
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.
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..
User | Count |
---|---|
447 | |
194 | |
139 | |
60 | |
44 |