SVG Logo in Palo Alto Theme

Highlighted
New Member
1 0 0

I am trying to update my logo to SVG format in the Palo Alto theme. None of the existing instructions I have found appear to apply to this theme. It seems like the update needs to be made in the site-logo.liquid code, which can be seen below. Thanks.

 

<!-- /snippets/site-logo.liquid -->
{%- capture logo_not_home -%}
  {%- assign image = section.settings.logo_not_home -%}
  {%- if image != blank -%}
    <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link site-header__logo-link--other {% if section.settings.logo == blank %}site-header__logo-link--single{% endif %}">
      {%- assign image_url_pattern = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]" -%}
 
      <img 
         class="lazyload"
         src="{{ image | img_url: 'small' }}"
         data-src="{{ image_url_pattern }}"
         data-widths= "{{ image_widths }}"
         data-aspectratio="{{image.aspect_ratio }}"
         data-sizes="auto"
         height="{{ section.settings.logo_max_width | divided_by: image.aspect_ratio }}px"
         alt="{{ image.alt | escape }}">
      <noscript>
      <img src="{{ 'Benlogo.svg' | asset_url }}"  alt="{{ shop.name }}" itemprop="logo"> 
      </noscript>
    </a>
  {%- endif -%}
{%- endcapture -%}
 
{%- capture logo_home -%}
  {%- assign image = section.settings.logo -%}
  {%- if image != blank -%}
    <a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link site-header__logo-link--home {% if section.settings.logo_not_home == blank %}site-header__logo-link--single{% endif %}">
      {%- assign image_url_pattern = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048, 2450, 2700, 3000, 3350, 3750, 4100]" -%}
 
      <img 
         class="lazyload"
         src="{{ image | img_url: 'small' }}"
         data-src="{{ image_url_pattern }}"
         data-widths= "{{ image_widths }}"
         data-aspectratio="{{image.aspect_ratio }}"
         data-sizes="auto"
         height="{{ section.settings.logo_max_width | divided_by: image.aspect_ratio }}px"
         alt="{{ image.alt | escape }}">
      <noscript>
        
      </noscript>
    </a>
  {%- endif -%}
{%- endcapture -%}
 
{%- if logo_not_home != blank or logo_home != blank or section.settings.show_shop_name -%}
  <div class="grid__item largest--one-third one-half">
    <h1 class="site-header__logo large--left" itemscope itemtype="http://schema.org/Organization">
      
      {{- logo_not_home -}}
      {{- logo_home -}}
 
      {%- if section.settings.show_shop_name -%}
        <a class="site-header__logo-text" href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
      {%- endif -%}
    </h1>
  </div>
{%- endif -%}
0 Likes
Highlighted

Hello,

This is a bit more of a complex issue. It would require a custom solution based on top of Liquid/CSS to implement it, I'm afraid that unfortunately there is no simple copy-paste solution otherwise I'd happily guide you through.

If it is of your wish feel free to reach me out via email so we can talk about it.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Needing urgent help? I'm available for hire, same day response guaranteed: diego.boarutto.fortes@gmail.com
◦ My app free for limited time: Add a navigation styled like Instagram Stories to your website!
0 Likes