add svg LOGO

Tourist
8 0 1

Hi guys,

 

I tried to add my svg logo but didn't succeed. I uploaded it to my assets and try to change the header.liquid but the codes were given didn't work. Can someone help me out with this? I will post my header.liquid under here. The name of my svg logo is "logo.svg". Thanks a lot!

 

P.S. I anyone can help me with making the SVG logo animated that would be a great add 2! :)

(inspired by this post)

https://www.shopify.com/partners/blog/69475267-how-to-upload-and-animate-svg-icons-in-3-simple-steps

 

<header>
<div class="header-area {% if section.settings.header_sticky_enable %}style-6{% endif %}">
<div class="container-fluid">
<div class="{% if section.settings.header_sticky_enable %}header-sticky{% endif %}">
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-4 col-xs-4">
{% if section.settings.logo %}
<div class="logo">
<a href="/"><img src="{{ section.settings.logo | img_url: 'medium' }}" alt="{{ shop.name }}"></a>
</div>
{% else %}
<div class="logo">
<a href="/">{{ shop.name }}</a>
</div>
{% endif %}
</div>
<div class="col-md-6 col-lg-6 col-sm-2 col-xs-2 hidden-xs text-center">
<div class="main-menu display-inline">
{% include 'main-menu' %}
</div>
</div>
<div class="col-md-3 col-lg-3 col-xs-8 col-sm-6 text-right text-sm text-res">
<div class="cart-user-language">
{% include 'mini-cart' %}
{% if shop.customer_accounts_enabled and customer %}
<div class="user">
<a href="/account/logout" title="{{ 'layout.customer.log_out' | t }}"><i class="pe-7s-delete-user"></i></a>
</div>
{% else %}
<div class="user">
<a href="#" data-toggle="modal" data-target="#loginModal" title="{{ 'layout.customer.log_in' | t }}"><i class="pe-7s-add-user"></i></a>
</div>
{% endif %}
{% if section.settings.search_icon_enable %}
<div class="search-block-top display-inline">
<div class="icon-search">
<a href="#"><i class="pe-7s-search"></i></a>
</div>
<div class="toogle-content">
{% include 'search-bar' %}
</div>
</div>
{% endif %}
{% if section.settings.currency_picker_enable %}
<div class="language-menu none">
<div class="currency-select">
{% include 'currency-picker' %}
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="mobile-menu"></div>
</div>
</div>
</header>

 


<style>
{% if section.settings.header_sticky_enable and template == 'index' %}
main{
padding-top: 116px;
}
.breadcrumb-area {
padding-top: 116px;
}
{% endif %}
{% if section.settings.header_sticky_enable %}
.breadcrumb-area {
padding-top: 116px;
}
{% endif %}

.logo img {
max-width: {{ section.settings.logo_width }}px;
}

.main-menu ul li a,
.main-menu .mega-menu-li > a {
font-size: {{ section.settings.main_menu_font_size }}px;
}
</style>

 


{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "text",
"id": "logo_width",
"label": "Logo Width",
"default": "96",
"info": "Defined in pixels. Do not add the 'px' unit."
},
{
"type": "text",
"id": "main_menu_font_size",
"label": "Menu Font Size",
"default": "12",
"info": "Defined in pixels. Do not add the 'px' unit."
},
{
"type": "checkbox",
"id": "header_sticky_enable",
"label": "Header Sticky Enable",
"default": false
},
{
"type": "checkbox",
"id": "currency_picker_enable",
"label": "Show Currency Picker",
"default": true
},
{
"type": "checkbox",
"id": "search_icon_enable",
"label": "Show Search Icon",
"default": true
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

0 Likes
Shopify Partner
250 9 50

This is the logo line

 

<a href="/"><img src="{{ section.settings.logo | img_url: 'medium' }}" alt="{{ shop.name }}">

And it's based on an IMAGE file, not an asset file, and not an svg. It will look for the images in the 'files'.

 

The thing is with svg is, it's basically some text. If you store it in 'a file' e.g. a text file asset or something, including it on the page is going to be different because you don't just want to include an image, you want the content of the file itself to be output.

If e.g. you put it in files as a text file and you used something like

<a href="/">{{'logo.svg' | file_url}}

it wouldn't work because it'd just output the url of the file, not its contents. And you can't convert that url to an image, it's not an image file. You also can't really put it in 'assets' folder because that only let you get the asset url and not really the asset content.


Instead, in your liquid code, you need to INCLUDE a SNIPPET which contains the svg code. Copy paste the svg into a new snippet, e.g. "logo-svg.liquid' and then the code to display it would be like:

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

 

0 Likes
Tourist
8 0 1






{% if section.settings.logo %}

{% else %}

{% endif %}




{% include 'mini-cart' %}
{% if shop.customer_accounts_enabled and customer %}



{% else %}



{% endif %}
{% if section.settings.search_icon_enable %}



{% include 'search-bar' %}


{% endif %}
{% if section.settings.currency_picker_enable %}


{% include 'currency-picker' %}


{% endif %}












<br> {% if section.settings.header_sticky_enable and template == 'index' %}<br> main{<br> padding-top: 116px;<br> }<br> .breadcrumb-area {<br> padding-top: 116px;<br> }<br> {% endif %}<br> {% if section.settings.header_sticky_enable %}<br> .breadcrumb-area {<br> padding-top: 116px;<br> }<br> {% endif %}<br><br> .logo img {<br> max-width: {{ section.settings.logo_width }}px;<br> }<br><br> .main-menu ul li a, <br> .main-menu .mega-menu-li > a {<br> font-size: {{ section.settings.main_menu_font_size }}px;<br> }<br>




{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "text",
"id": "logo_width",
"label": "Logo Width",
"default": "96",
"info": "Defined in pixels. Do not add the 'px' unit."
},
{
"type": "text",
"id": "main_menu_font_size",
"label": "Menu Font Size",
"default": "12",
"info": "Defined in pixels. Do not add the 'px' unit."
},
{
"type": "checkbox",
"id": "header_sticky_enable",
"label": "Header Sticky Enable",
"default": false
},
{
"type": "checkbox",
"id": "currency_picker_enable",
"label": "Show Currency Picker",
"default": true
},
{
"type": "checkbox",
"id": "search_icon_enable",
"label": "Show Search Icon",
"default": true
}
]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
0 Likes
Tourist
3 0 0

Please can you help me to do the same thing ?

I cant find the code.

This is my code : 

<div class="grid--full">
      <div class="grid-item large--one-half">
        {% if template.name == 'index' %}
          <h1 class="header-logo" itemscope itemtype="http://schema.org/Organization">
        {% else %}
          <div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
        {% endif %}
          {% if section.settings.logo %}
          {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
          {%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
          {% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
          <a href="/" itemprop="url">
            <div class="lazyload__image-wrapper no-js header-logo__image" style="max-width:{{ section.settings.logo_max_width }}px;">
              <div style="padding-top:{{ 1 | divided_by: section.settings.logo.aspect_ratio | times: 100}}%;">
                <img class="lazyload js"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ logo_alt | escape }}"
                  style="width:{{ section.settings.logo_max_width }}px;">
              </div>
            </div>
            <noscript>
              {% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
              <img src="{{ section.settings.logo | img_url: image_size }}"
                srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
                alt="{{ logo_alt | escape }}"
                itemprop="logo"
                style="max-width:{{ section.settings.logo_max_width }}px;">
            </noscript>
          </a>
          {% else %}
            <a href="/" itemprop="url">{{ shop.name }}</a>
          {% endif %}
        {% if template.name == 'index' %}
          </h1>
        {% else %}
          </div>
        {% endif %}
      </div>
0 Likes
New Member
6 0 0

Hey Paul_West ,I tried that...

If you mean going to Snippets and create a file named as logo-svg.liquid and then put in the code you mentioned... it didn't work.

I also named my svg file as logo-svg. 

0 Likes
New Member
6 0 0

Hey I tried that...

If you mean going to Snippets and create a file named as logo-svg.liquid and then put in the code you mentioned... it didn't work.

I also named my svg file as logo-svg. 

0 Likes
Astronaut
884 106 197

Hey @maxhot can you specifically tell me what you're doing? I use svg files all the time. When you create your svg in illustrator, it should show the option to show code when you export it. Or if you save an svg you should be able to open it in a text file to see the code. What @Paul_West was saying is take that code, place it into a snippet like you said called "logo-svg.liquid" then include it on your page {% include "logo-svg" %} -- Maybe you included the .liquid extension? Did you get any errors on your page? 

 

Can you share your page so we can see? Password if password protected please. If you don't feel comfortable sharing it on the forums you can send me a personal message if you enable messaging in your profile.

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
New Member
6 0 0

Yes, I'm just trying to include an SVG logo made in Illustrator on my debut theme but it doesn't seem to be accepting SVG?

Any idea on how I can do that?

This is the logo:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#4D4545;}
	.st1{fill:none;}
	.st2{fill:#FFEDDC;}
</style>
<rect x="0" class="st0" width="801" height="801"/>
<rect x="-321.39" y="202" class="st1" width="139.39" height="221.8"/>
<g>
	<g>
		<path class="st2" d="M376.48,489.44c-0.85,7.1-2.87,13.12-5.8,18.07c2.28,0.52,4.44,1.37,6.31,2.6c2.48,1.63,4.31,3.75,5.35,6.11
			c1.02,0.12,2.04,0.22,3.07,0.31L376.48,489.44z"/>
		<path class="st2" d="M395.81,284c-64.34,0-116.5,52.16-116.5,116.5c0,25.34,8.09,48.78,21.83,67.9
			c2.45-13.76,8.55-25.4,16.73-32.66l-0.02-0.01l28.31-33.07c5.51-9.45,11.36-15.36,17.49-18.13c-0.77-2.26-1.3-4.62-1.3-7.12
			c0-8.03,3.67-19.63,15.93-25.07c2.78-10.94,8.73-17.82,11.86-20.8c0.47-0.44,1.13-0.63,1.78-0.5c0.63,0.13,1.16,0.55,1.42,1.14
			c3.23,7.49,4.07,18.43,4.28,22.39c1.94,1.65,4.02,3.33,7.02,4.45c3.23,1.2,5.98,3.45,7.83,6.43c0.44,0.7,0.83,1.42,1.19,2.17
			c2.14,4.42,6.02,7.68,10.66,8.95c1.35,0.37,2.42,1.42,2.86,2.8c0.42,1.37-0.08,2.73-0.76,3.98c-3.06,5.61-6.69,8.15-7.71,8.83
			c-1.68,1.11-3.45,1.84-5.2,2.35c-1.13,0.33-2.26,0.75-3.38,1.13c-1.25,0.72-7.94,5.03-6.13,14.37c3.89,20.2-1.92,30.94-11.27,40.5
			l2.37,39.07l4.89,17.6c3.41,0.4,6.65,1.33,9.38,2.89c2.52,1.44,4.45,3.26,5.7,5.3c55.17-9.18,97.23-57.13,97.23-114.9
			C512.31,336.16,460.15,284,395.81,284z"/>
	</g>
	<g>
		<path class="st2" d="M264.87,528.7v9.5h7.2v4.7h-7.2v14.69h-5.09v-33.6h14.06v4.7H264.87z"/>
		<path class="st2" d="M301.49,528.7v9.5h7.44v4.7h-7.44v9.99h9.22v4.7H296.4v-33.6h14.31v4.7H301.49z"/>
		<path class="st2" d="M347.81,552.79v4.8h-13.58v-33.6h5.09v28.8H347.81z"/>
		<path class="st2" d="M370.27,557.6v-33.6h5.09v33.6H370.27z"/>
		<path class="st2" d="M411.6,557.6l-6.67-22.27h-0.1v22.27h-4.8v-33.6h5.66l6,20.02h0.1v-20.02h4.8v33.6H411.6z"/>
		<path class="st2" d="M446.35,528.7v9.5h7.44v4.7h-7.44v9.99h9.22v4.7h-14.31v-33.6h14.31v4.7H446.35z"/>
		<path class="st2" d="M484.18,528.7v9.5h7.2v4.7h-7.2v14.69h-5.09v-33.6h14.07v4.7H484.18z"/>
		<path class="st2" d="M524.88,557.6h-5.09v-15.22l-7.06-18.38h5.38l4.27,11.9h0.1l4.08-11.9h5.28l-6.96,18.43V557.6z"/>
	</g>
</g>
</svg>
0 Likes
New Member
6 0 0
0 Likes
Highlighted
New Member
6 0 0

This is the page:  https://formycats.myshopify.com/

Password: mucrux

0 Likes