Solved

What is the fix for a blurry logo on the Impulse theme in Shopify?

ridethedesert
Excursionist
13 0 4

I have searched the forums here and spoke with customer service to no help. How do I fix a blurry logo on the Impluse theme?

 

 

Accepted Solution (1)
Uhrick
Shopify Partner
430 68 92

This is an accepted solution.

try replacing 

assign header_logo_size = block.settings.desktop_logo_width | append: 'x'

with

assign header_logo_size = '1000x'
Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution

View solution in original post

Replies 13 (13)

Uhrick
Shopify Partner
430 68 92

hello, Ridethedesert

can you send a link to your website with the problem?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ridethedesert
Excursionist
13 0 4
Uhrick
Shopify Partner
430 68 92

when you uploaded, are you sure that the image was high resolution? Checking the source of the image, it seems low res

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ridethedesert
Excursionist
13 0 4

This is what I uploaded, 3800X800 PNG File created from an AI image. I'm not sure how much more hi-res I can upload.

ridethedesert
Excursionist
13 0 4

It wouldn't let me upload it, doesn't support the file type.

Uhrick
Shopify Partner
430 68 92

can you send me here the code of your header.liquid file?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ridethedesert
Excursionist
13 0 4

{%- 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' -%}

<style>
.site-nav__link,
.site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
font-size: {{ settings.type_navigation_size }}px;
}
{% if settings.type_navigation_capitalize %}
.site-nav__link, .mobile-nav__link--top-level {
text-transform: uppercase;
letter-spacing: 0.2em;
}
.mobile-nav__link--top-level {
font-size: 1.1em;
}
{% endif %}

{% if mainmenu.length > 6 %}
.site-nav__link {
padding-left: 10px;
padding-right: 10px;
}
{% endif %}

{% unless section.settings.mega_menu_images %}
.megamenu__colection-image {
display: none;
}
{% endunless %}

{%- if settings.color_header == settings.color_body_bg or settings.color_body_bg contains settings.color_header -%}
.site-header {
box-shadow: 0 0 1px rgba(0,0,0,0.2);
}

.toolbar + .header-sticky-wrapper .site-header {
border-top: 0;
}
{%- endif -%}

{%- if settings.color_announcement == settings.color_body_bg -%}
.announcement-bar {
border-bottom: 1px solid;
}
{%- endif -%}
</style>

<div data-section-id="{{ section.id }}" data-section-type="header">
{%- 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 -%}

<div class="header-sticky-wrapper">
<div id="HeaderWrapper" class="header-wrapper{% if overlay_header %} header-wrapper--sticky is-light{% endif %}">

{%- 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 -%}
<header
id="SiteHeader"
class="site-header{% if settings.type_navigation_style == 'heading' %} site-header--heading-style{% endif %}"
data-sticky="{{ sticky_header }}"
data-overlay="{{ overlay_header }}">
<div class="page-width">
<div
class="header-layout header-layout--{{ section.settings.main_menu_alignment }}"
data-logo-align="{{ logo_alignment }}">

{%- if logo_alignment == 'left' -%}
<div class="header-item header-item--logo">
{%- render 'header-logo-block', section: section -%}
</div>
{%- endif -%}

{%- if logo_alignment == 'left' and section.settings.main_menu_alignment != 'left-drawer' -%}
<div class="header-item header-item--navigation{% if section.settings.main_menu_alignment == 'left-center' %} text-center{% endif %}">
{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
</div>
{%- endif -%}

{%- if logo_alignment == 'center' -%}
<div class="header-item header-item--left header-item--navigation">
{%- if section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-split' -%}
{%- if settings.search_enable -%}
<div class="site-nav small--hide">
<a href="{{ routes.search_url }}" class="site-nav__link site-nav__link--icon js-search-header">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.title' | t }}</span>
</a>
</div>
{%- endif -%}
{%- endif -%}

{%- if section.settings.main_menu_alignment == 'center-left' -%}
{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
{%- endif -%}

<div class="site-nav{% unless section.settings.main_menu_alignment == 'center-drawer' %} medium-up--hide{% endunless %}">
<button
type="button"
class="site-nav__link site-nav__link--icon js-drawer-open-nav"
aria-controls="NavDrawer">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 64 64"><path d="M7 15h51M7 32h43M7 49h51"/></svg>
<span class="icon__fallback-text">{{ 'general.drawers.navigation' | t }}</span>
</button>
</div>
</div>

{%- if section.settings.main_menu_alignment == 'center-split' -%}
{%- render 'header-split-nav', main_menu: main_menu, section: section, dropdown_alignment: dropdown_alignment -%}
{%- endif -%}

{%- if section.settings.main_menu_alignment != 'center-split' -%}
<div class="header-item header-item--logo">
{%- render 'header-logo-block', section: section -%}
</div>
{%- endif -%}
{%- endif -%}

<div class="header-item header-item--icons">
{%- render 'header-icons', section: section -%}
</div>
</div>

{%- if section.settings.main_menu_alignment == 'center' -%}
<div class="text-center">
{%- render 'header-desktop-nav', main_menu: main_menu, dropdown_alignment: dropdown_alignment -%}
</div>
{%- endif -%}
</div>
<div class="site-header__search-container">
<div class="site-header__search">
<div class="page-width">
<form action="{{ routes.search_url }}" method="get" role="search"
id="HeaderSearchForm"
class="site-header__search-form">
<input type="hidden" name="type" value="{{ settings.search_type }}">
<input type="hidden" name="options[prefix]" value="last">
<button type="submit" class="text-link site-header__search-btn site-header__search-btn--submit">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58zM54 54L41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
<input type="search" name="q" value="{{ search.terms | escape | replace: '*', '' }}" placeholder="{{ 'general.search.placeholder' | t }}" class="site-header__search-input" aria-label="{{ 'general.search.placeholder' | t }}">
</form>
<button type="button" id="SearchClose" class="js-search-header-close text-link site-header__search-btn">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><path d="M19 17.61l27.12 27.13m0-27.12L19 44.74"/></svg>
<span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t | json }}</span>
</button>
</div>
</div>
{%- if settings.predictive_search_enabled -%}
<div id="PredictiveWrapper" class="predictive-results hide" data-image-size="{{ settings.predictive_image_size }}">
<div class="page-width">
<div id="PredictiveResults" class="predictive-result__layout"></div>
<div class="text-center predictive-results__footer">
<button type="button" class="btn btn--small" data-predictive-search-button>
<small>
{{ 'general.search.view_more' | t }}
</small>
</button>
</div>
</div>
</div>
{%- endif -%}
</div>
</header>
</div>
</div>

{%- unless overlay_header or section.settings.announcement_above_header -%}
{%- render 'announcement-bar', section: section -%}
{%- endunless -%}
</div>

{% 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 %}

Uhrick
Shopify Partner
430 68 92

hey, from this code I notice that I need to see yet another file, can you send the code for the file 'header-logo-block.liquid'?

Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ridethedesert
Excursionist
13 0 4

{%- 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' -%}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
<span class="visually-hidden">{{ shop.name }}</span>
{%- else -%}
<div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization">
{%- 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 %}
<a
href="{{ routes.root_url }}"
itemprop="url"
class="site-header__logo-link{% if block.settings.logo-inverted %} logo--has-inverted{% endif %}"
style="padding-top: {{ 100 | divided_by: block.settings.logo.aspect_ratio }}%">
<img
class="small--hide"
src="{{ block.settings.logo | img_url: header_logo_size }}"
srcset="{{ block.settings.logo | img_url: header_logo_size }} 1x, {{ block.settings.logo | img_url: header_logo_size, scale: 2 }} 2x"
alt="{{ block.settings.logo.alt | default: shop.name }}"
itemprop="logo">
<img
class="medium-up--hide"
src="{{ block.settings.logo | img_url: header_logo_size_mobile }}"
srcset="{{ block.settings.logo | img_url: header_logo_size_mobile }} 1x, {{ block.settings.logo | img_url: header_logo_size_mobile, scale: 2 }} 2x"
alt="{{ block.settings.logo.alt | default: shop.name }}">
</a>
{%- if block.settings.logo-inverted -%}
<a
href="{{ routes.root_url }}"
itemprop="url"
class="site-header__logo-link logo--inverted"
style="padding-top: {{ 100 | divided_by: block.settings.logo-inverted.aspect_ratio }}%">
<img
class="small--hide"
src="{{ block.settings.logo-inverted | img_url: header_logo_size }}"
srcset="{{ block.settings.logo-inverted | img_url: header_logo_size }} 1x, {{ block.settings.logo-inverted | img_url: header_logo_size, scale: 2 }} 2x"
alt="{{ block.settings.logo-inverted.alt | default: shop.name }}"
itemprop="logo">
<img
class="medium-up--hide"
src="{{ block.settings.logo-inverted | img_url: header_logo_size_mobile }}"
srcset="{{ block.settings.logo-inverted | img_url: header_logo_size_mobile }} 1x, {{ block.settings.logo-inverted | img_url: header_logo_size_mobile, scale: 2 }} 2x"
alt="{{ block.settings.logo.alt | default: shop.name }}">
</a>
{%- endif -%}
{%- else -%}
<a href="{{ routes.root_url }}" itemprop="url">{{ shop.name }}</a>
{%- endif -%}
{%- if template == 'index' -%}
</h1>
{%- else -%}
</div>
{%- 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' -%}
<h1 class="site-header__logo" itemscope itemtype="http://schema.org/Organization">
{%- else -%}
<div class="h1 site-header__logo" itemscope itemtype="http://schema.org/Organization">
{%- endif -%}
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link">
{{ shop.name }}
</a>
{%- if template == 'index' -%}
</h1>
{%- else -%}
</div>
{%- endif -%}
{%- endunless -%}

Uhrick
Shopify Partner
430 68 92

This is an accepted solution.

try replacing 

assign header_logo_size = block.settings.desktop_logo_width | append: 'x'

with

assign header_logo_size = '1000x'
Shopify Developer
Hire me for theme customizations at ricardomsilvestre@outlook.com or Upwork
Was my answer helpful to you? Please like or mark as solution
ridethedesert
Excursionist
13 0 4

FIXED!!! THANK YOU!

ridethedesert
Excursionist
13 0 4

If I want to fix it for mobile, is there a separate code for that?

ridethedesert
Excursionist
13 0 4

Nevermind on the mobile, I just copied after the = sign '1000x' on the mobile code line under it and it worked. Thanks again!