How can I change logo.png to SVG in Grid theme?

neudenken · June 28, 2021, 3:15pm

Hi there,

I am trying to change the logo.png to a SVG file using the Grid theme (https://support.pixelunion.net/hc/en-us/sections/360003950473-Grid). I tried several approaches from https://community.shopify.com/c/Shopify-Design/Use-svg-file-for-logo/td-p/352373 and some videos.

I successfully uploaded the logo.svg to the assets folder. BUT: The code in my header.liquid looks like:


          {%- if section.settings.logo -%}
            {%
              render 'rimg',
              img: section.settings.logo,
              class: 'logo-image',
              size: '200x100',
            %}
          {%- else -%}
            # {{- shop.name -}}
          {%- endif -%}

If I try to insert the suggested code I get an error or a blank space where the logo should appear.

If anyone could help I would be very glad!

Cheers, Felix

KetanKumar · June 28, 2021, 7:41pm

@neudenken

thanks for post

update this code code work to if image doesn’t upload then show svg

upload your svg logo assept folder


          {%- if section.settings.logo -%}
            {%
              render 'rimg',
              img: section.settings.logo,
              class: 'logo-image',
              size: '200x100',
            %}
{% elsif  %}
 
          {%- else -%}
            # {{- shop.name -}}
          {%- endif -%}

neudenken · June 29, 2021, 6:17am

Hi @KetanKumar ,

thanks for the input. If I exchange the code with your example, I get the following error message:

Line 112 — Liquid syntax error: [:end_of_string] is not a valid expression in “”

Yet, I can’t find the code mentioned in the error message.

(Sorry for asking such simple questions, I am a Shopify / Liquid newby while quite experienced with CSS, HTML and so on)

Cheers, Felix

KetanKumar · June 29, 2021, 6:50am

can you please share full code?

neudenken · June 29, 2021, 8:16am

Yes, of course. Thanks for looking in to it.


{%- capture arrow_right -%}
  {%-
    render 'icons',
    id: 'chevron-right'
  -%}
{%- endcapture -%}

{% assign mega_nav_handle = section.settings.mega-nav-handle %}

{%- capture header_classes -%}
  header
  header-layout-{{ section.settings.header_layout }}

  {% if section.settings.header_full_width %}
    header-full-width
  {% else %}
    header-content-width
  {% endif %}

  {% if section.settings.sticky_header and section.settings.sticky_header_logo and section.settings.logo %}
    header-sticky-show-logo
  {% endif %}

  {% if section.settings.header_border and template != 'index' %}
    header-border
  {% endif %}
{%- endcapture -%}

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "header",
      "content": "Logo"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image",
      "info": "200px tall recommended"
    },
    {
      "type": "header",
      "content": "Header"
    },
    {
      "type": "select",
      "id": "header_layout",
      "label": "Logo layout",
      "info": "Logo layouts are only active on screens wider than 1080px",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "compact-center",
          "label": "Compact center"
        },
        {
          "value": "compact-left",
          "label": "Compact left"
        }
      ],
      "default": "default"
    },
    {
      "type": "checkbox",
      "id": "header_full_width",
      "label": "Enable full width header ",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "header_border",
      "label": "Show header border",
      "info": "This will appear on all pages except the home page."
    },
    {
      "type": "checkbox",
      "id": "sticky_header",
      "label": "Enable sticky header"
    },
    {
      "type": "checkbox",
      "id": "sticky_header_logo",
      "label": "Show logo image in sticky header"
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": "Mini Cart"
    },
    {
      "type": "checkbox",
      "id": "enable_checkout_lock_icon",
      "label": "Show lock icon on checkout button in mini cart",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "Mega menu",
      "settings": [
        {
          "type": "text",
          "id": "menu_item",
          "label": "Menu item",
          "info": "Enter menu item to apply a mega menu dropdown. [Learn more](https://support.pixelunion.net/hc/en-us/articles/360022052534-How-to-set-up-your-store-s-navigation)"
        },
        {
          "type": "image_picker",
          "id": "menu_image",
          "label": "Featured image",
          "info": "480 x 1000px recommended"
        }
      ]
    }
  ]
}

{% endschema %}

KetanKumar · June 29, 2021, 9:48am

@neudenken

thanks for full code i have update please check


{%- capture arrow_right -%}
  {%-
    render 'icons',
    id: 'chevron-right'
  -%}
{%- endcapture -%}

{% assign mega_nav_handle = section.settings.mega-nav-handle %}

{%- capture header_classes -%}
  header
  header-layout-{{ section.settings.header_layout }}

  {% if section.settings.header_full_width %}
    header-full-width
  {% else %}
    header-content-width
  {% endif %}

  {% if section.settings.sticky_header and section.settings.sticky_header_logo and section.settings.logo %}
    header-sticky-show-logo
  {% endif %}

  {% if section.settings.header_border and template != 'index' %}
    header-border
  {% endif %}
{%- endcapture -%}

{% schema %}
{
  "name": "Header",
  "settings": [
    {
      "type": "header",
      "content": "Logo"
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo image",
      "info": "200px tall recommended"
    },
    {
      "type": "header",
      "content": "Header"
    },
    {
      "type": "select",
      "id": "header_layout",
      "label": "Logo layout",
      "info": "Logo layouts are only active on screens wider than 1080px",
      "options": [
        {
          "value": "default",
          "label": "Default"
        },
        {
          "value": "compact-center",
          "label": "Compact center"
        },
        {
          "value": "compact-left",
          "label": "Compact left"
        }
      ],
      "default": "default"
    },
    {
      "type": "checkbox",
      "id": "header_full_width",
      "label": "Enable full width header ",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "header_border",
      "label": "Show header border",
      "info": "This will appear on all pages except the home page."
    },
    {
      "type": "checkbox",
      "id": "sticky_header",
      "label": "Enable sticky header"
    },
    {
      "type": "checkbox",
      "id": "sticky_header_logo",
      "label": "Show logo image in sticky header"
    },
    {
      "type": "header",
      "content": "Navigation"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    },
    {
      "type": "header",
      "content": "Mini Cart"
    },
    {
      "type": "checkbox",
      "id": "enable_checkout_lock_icon",
      "label": "Show lock icon on checkout button in mini cart",
      "default": false
    }
  ],
  "blocks": [
    {
      "type": "mega_menu",
      "name": "Mega menu",
      "settings": [
        {
          "type": "text",
          "id": "menu_item",
          "label": "Menu item",
          "info": "Enter menu item to apply a mega menu dropdown. [Learn more](https://support.pixelunion.net/hc/en-us/articles/360022052534-How-to-set-up-your-store-s-navigation)"
        },
        {
          "type": "image_picker",
          "id": "menu_image",
          "label": "Featured image",
          "info": "480 x 1000px recommended"
        }
      ]
    }
  ]
}

{% endschema %}

neudenken · June 29, 2021, 11:41am

Hi there,

thanks again, this solution seems to be almost perfect. I had to remove the logo.PNG in the theme settings, of course. Then the logo.SVG showed up.

But unfortunately, the logo disappears in the sticky header: https://ame730f5156l7crk-19387283.shopifypreview.com.

KetanKumar · June 29, 2021, 1:56pm

@neudenken

can you please update also stick logo condition

neudenken · June 30, 2021, 2:20pm

Sorry, I can’t find the respective code

KetanKumar · June 30, 2021, 2:33pm

@neudenken

you can check HTML and CSS code

neudenken · July 1, 2021, 1:50pm

Sorry, I feel really stupid. In the sticky header the logo.svg is in the code but doesn’t show up. See the attached screenshot or here: https://xe252ov1r8irp98v-19387283.shopifypreview.com

Any help is very much appreciated!

KetanKumar · July 1, 2021, 7:06pm

@neudenken

Go to Online Store->Theme->Edit code
Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.sticky-header .header-branding-desktop {opacity: 1;}

neudenken · July 2, 2021, 6:02am

@KetanKumar Thanks again for your help!

KetanKumar · July 2, 2021, 10:34am

@neudenken

it’s my pleasure to help us

Topic		Replies	Views
Why isn't my SVG header logo working in Blockshop theme? Store Design	14	4	August 25, 2022
Logo.svg not working in theme "Dawn" Design di Shopify design , header	1	1	July 24, 2023
How can I add an SVG logo to a minimal theme? Store Design	3	0	January 24, 2022
How can I replace a PNG logo with an SVG in Dawn theme? Store Design	11	6	November 17, 2022
How can I use an SVG logo in a minimal theme and add a hover color to my cart icon? Store Design	5	24	January 14, 2022

How can I change logo.png to SVG in Grid theme?

Related topics