Hello! I’m trying to change my Impulse theme logo to SVG because it looks blurry if I upload it as a high quality png.
I have tried to follow the various tricks on the forum but it seems that none can be applied to Impulse theme.
Could you help me?
This is the link to the store (password = demo)
https://boutique-encarnacion-gonzalez.myshopify.com/
header.liquid
{%- liquid
assign main_menu = linklists[section.settings.main_menu_link_list]
assign toolbar_menu = linklists[section.settings.toolbar_menu]
assign logo_alignment = 'left'
if section.settings.main_menu_alignment == 'center-left' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-drawer'
assign logo_alignment = 'center'
endif
assign dropdown_alignment = 'left'
if section.settings.main_menu_alignment == 'left-center' or section.settings.main_menu_alignment == 'center-split' or section.settings.main_menu_alignment == 'center'
assign dropdown_alignment = 'center'
endif
assign template_name = template | replace: '.', ' ' | truncatewords: 2, '' | handle
assign sticky_header = false
if section.settings.header_style == 'sticky'
assign sticky_header = true
endif
assign overlay_header = false
if template_name == 'index' and section.settings.sticky_index
assign overlay_header = true
endif
if template_name == 'collection' and collection.image and section.settings.sticky_collection
assign overlay_header = true
endif
-%}
{%- render 'drawer-menu',
section: section,
main_menu: main_menu,
toolbar_menu: toolbar_menu,
logo_alignment: logo_alignment
-%}
{%- render 'cart-drawer' -%}
{%- if overlay_header or section.settings.announcement_above_header -%}
{%- render 'announcement-bar', section: section -%}
{%- endif -%}
{%- unless overlay_header -%}
{%- if section.settings.show_locale_selector or section.settings.show_currency_selector or section.settings.toolbar_social or section.settings.toolbar_menu != blank -%}
{%- render 'toolbar',
section: section,
toolbar_menu: toolbar_menu,
overlay_header: overlay_header
-%}
{%- endif -%}
{%- endunless -%}
{%- if overlay_header -%}
{%- if section.settings.show_locale_selector or section.settings.show_currency_selector or section.settings.toolbar_social or section.settings.toolbar_menu != blank -%}
{%- render 'toolbar',
section: section,
toolbar_menu: toolbar_menu,
overlay_header: overlay_header
-%}
{%- endif -%}
{%- endif -%}
{%- unless overlay_header or section.settings.announcement_above_header -%}
{%- render 'announcement-bar', section: section -%}
{%- endunless -%}
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "link_list",
"id": "main_menu_link_list",
"label": "Navigation",
"default": "main-menu"
},
{
"type": "checkbox",
"id": "mega_menu_images",
"label": "Show mega menu images",
"default": true,
"info": "[How to create a mega menu](https://archetypethemes.co/blogs/impulse/how-do-i-create-a-mega-menu)"
},
{
"type": "select",
"id": "main_menu_alignment",
"label": "Header layout",
"default": "left",
"options": [
{
"value": "left",
"label": "Logo left, menu left"
},
{
"value": "left-center",
"label": "Logo left, menu center"
},
{
"value": "left-drawer",
"label": "Logo left, menu drawer"
},
{
"value": "center-left",
"label": "Logo center, menu left"
},
{
"value": "center-split",
"label": "Logo center, menu split"
},
{
"value": "center",
"label": "Logo center, menu below"
},
{
"value": "center-drawer",
"label": "Logo center, menu drawer"
}
]
},
{
"type": "select",
"id": "header_style",
"label": "Header style",
"default": "normal",
"options": [
{
"value": "normal",
"label": "Normal"
},
{
"value": "sticky",
"label": "Sticky"
}
]
},
{
"type": "checkbox",
"id": "sticky_index",
"label": "Overlay header over home page",
"default": false
},
{
"type": "checkbox",
"id": "sticky_collection",
"label": "Overlay header over collection",
"info": "(if collection image is enabled)",
"default": false
},
{
"type": "header",
"content": "Announcement bar"
},
{
"type": "checkbox",
"id": "announcement_compact",
"label": "Use compact style"
},
{
"type": "checkbox",
"id": "announcement_above_header",
"label": "Always show above header"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "link_list",
"id": "toolbar_menu",
"label": "Navigation",
"info": "This menu won't show dropdown items"
},
{
"type": "checkbox",
"id": "toolbar_social",
"label": "Show social icons"
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "checkbox",
"id": "show_currency_flags",
"label": "Show currency flags",
"default": true
}
],
"blocks": [
{
"type": "logo",
"name": "Logo",
"limit": 1,
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo"
},
{
"type": "image_picker",
"id": "logo-inverted",
"label": "White logo",
"info": "Used when on top of an image"
},
{
"type": "range",
"id": "desktop_logo_width",
"label": "Desktop logo width",
"default": 200,
"min": 100,
"max": 400,
"step": 10,
"unit": "px"
},
{
"type": "range",
"id": "mobile_logo_width",
"label": "Mobile logo width",
"default": 140,
"min": 60,
"max": 200,
"step": 10,
"unit": "px",
"info": "Set as a max-width, may appear smaller"
}
]
},
{
"type": "announcement",
"name": "Announcement",
"limit": 3,
"settings": [
{
"type": "text",
"id": "text",
"label": "Heading",
"default": "Hassle-free returns"
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "30-day postage paid returns"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
],
"default": {
"settings": {}
}
}
{% endschema %}
header-logo-block.liquid
{%- for block in section.blocks -%}
{%- if block.type == 'logo' -%}
{%- liquid
assign has_logo = true
assign header_logo_size = block.settings.desktop_logo_width | append: 'x'
assign header_logo_size_mobile = block.settings.mobile_logo_width | append: 'x'
-%}
{%- style -%}
.header-item--logo,
.header-layout--left-center .header-item--logo,
.header-layout--left-center .header-item--icons {
-webkit-box-flex: 0 1 {{ block.settings.mobile_logo_width }}px;
-ms-flex: 0 1 {{ block.settings.mobile_logo_width }}px;
flex: 0 1 {{ block.settings.mobile_logo_width }}px;
}
@media only screen and (min-width: 769px) {
.header-item--logo,
.header-layout--left-center .header-item--logo,
.header-layout--left-center .header-item--icons {
-webkit-box-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
-ms-flex: 0 0 {{ block.settings.desktop_logo_width }}px;
flex: 0 0 {{ block.settings.desktop_logo_width }}px;
}
}
.site-header__logo a {
width: {{ block.settings.mobile_logo_width }}px;
}
.is-light .site-header__logo .logo--inverted {
width: {{ block.settings.mobile_logo_width }}px;
}
@media only screen and (min-width: 769px) {
.site-header__logo a {
width: {{ block.settings.desktop_logo_width }}px;
}
.is-light .site-header__logo .logo--inverted {
width: {{ block.settings.desktop_logo_width }}px;
}
}
{%- endstyle -%}
{%- if template == 'index' -%}
#
{{ shop.name }}
{%- else -%}
{%- endif -%}
{%- if block.settings.logo -%}
{% comment %}
.logo--has-inverted is only applied to the default logo if the inverted logo exists. That way it'll only be hidden on the slider when it has a backup.
{% endcomment %}
{%- if block.settings.logo-inverted -%}
{%- endif -%}
{%- else -%}
{{ shop.name }}
{%- endif -%}
{%- if template == 'index' -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- unless has_logo -%}
{%- style -%}
/* prevent text-only logo from breaking mobile nav */
.header-item--logo {
max-width: 60%;
}
{%- endstyle -%}
{%- if template == 'index' -%}
#
{%- else -%}
{%- endif -%}
{{ shop.name }}
{%- if template == 'index' -%}
{%- else -%}
{%- endif -%}
{%- endunless -%}
I have the SVG uploaded in Files:
https://cdn.shopify.com/s/files/1/0549/3358/6100/files/LogoBoutiqueEncarnacionGonzalez.svg?v=1615814229
thank you!