Shopify themes, liquid, logos, and UX
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:
<a class="logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo -%}
{%
render 'rimg',
img: section.settings.logo,
class: 'logo-image',
size: '200x100',
%}
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
</a>
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
Solved! Go to the solution
This is an accepted solution.
Yes, of course. Thanks for looking in to it.
<script
type="application/json"
data-section-type="static-header"
data-section-id="{{ section.id }}"
data-section-data
>
{
"stickyHeader": {{ section.settings.sticky_header }},
"compactCenter": "{{ section.settings.header_layout }}"
}
</script>
{%- 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 -%}
<section
class="{{ header_classes | replace: ' ', ' ' | strip_newlines }}"
{% if section.settings.sticky_header %}data-sticky-header{% endif %}
{% if section.settings.header_layout == 'compact-center' %}data-header-compact-center{% endif %}
>
<header
class="main-header"
role="banner"
data-header-main
>
<div class="header-tools-wrapper">
<div class="header-tools">
<div class="aligned-left">
<div id="coin-container"></div>
</div>
<div class="aligned-right">
{% if shop.customer_accounts_enabled %}
<div class="customer-links">
{% if customer %}
<a href="{{ routes.account_url }}">{{ 'layout.header.my_account' | t }}</a>
<div class="customer-links-inner">
<span class="arrow"></span>
<ul>
<li><a href="{{ routes.account_url }}">{{ 'customers.general.purchases' | t }}</a></li>
<li><a href="{{ routes.account_addresses_url }}">{{ 'customers.addresses.header' | t }}</a></li>
<li>{{ 'layout.header.logout' | t | customer_logout_link }}</li>
</ul>
</div>
{% else %}
{{ 'layout.header.account' | t | customer_login_link }}
{% endif %}
</div>
{% endif %}
<div class="mini-cart-wrapper">
<a class="cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% render 'mini-cart' %}
</div>
<form class="checkout-link" action="{{ routes.cart_url }}" method="POST"><button class="checkout-link__button" type="submit" name="checkout">{{ 'layout.header.checkout' | t }}</button></form>
</div>
</div>
</div>
<div class="header-main-content" data-header-content>
{% unless section.settings.menu == blank %}
<div class="header-content-left">
<button
class="navigation-toggle navigation-toggle-open"
aria-label="{{ 'layout.header.menu' | t }}"
data-header-nav-toggle
>
<span class="navigation-toggle-icon">
{%-
render 'icons',
id: 'menu'
-%}
</span>
</button>
</div>
{% endunless %}
<div class="header-branding header-branding-desktop" data-header-branding>
<a class="logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo -%}
{%
render 'rimg',
img: section.settings.logo,
class: 'logo-image',
size: '200x100',
%}
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
</a>
<span
class="navigation-toggle navigation-toggle-close"
data-header-nav-toggle
>
{%-
render 'icons',
id: 'close',
-%}
</span>
</div>
{% unless section.settings.menu == blank %}
<div class="navigation-wrapper" data-navigation-wrapper>
<nav class="navigation navigation-has-mega-nav" data-navigation-content>
<ul class="navigation-menu">
{% for link in linklists[section.settings.menu].links %}
{% assign first_tier_link = link %}
{% assign uses_blocks = true %}
{% comment %}Inject is-dropdown-or-meganav begin{% endcomment %}
{% comment %}
A helper snippet for detecting if a link has a mega nav
or dropdown associated with it.
@param first_tier_link
@param uses_blocks
{% endcomment %}
{% assign is_dropdown = false %}
{% assign is_meganav = true %}
{% if first_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% for second_tier_link in first_tier_link.links %}
{% if second_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% endfor %}
{% if is_meganav %}
{% assign is_dropdown = false %}
{% endif %}
{% if uses_blocks %}
{% assign found_mega_item_handle = false %}
{% if section != blank and section.blocks != blank %}
{% for block in section.blocks %}
{% if block.type == 'mega_menu' %}
{% assign menu_item_handle = block.settings.menu_item | handle %}
{% if first_tier_link.handle == menu_item_handle %}
{% assign found_mega_item_handle = true %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% if found_mega_item_handle %}
{% if is_dropdown %}
{% assign is_meganav = true %}
{% assign is_dropdown = false %}
{% endif %}
{% elsif found_mega_item_handle == false %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% else %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% endif %}
{% endif %}
{% comment %}Inject is-dropdown-or-meganav end{% endcomment %}
<li
class="{% if is_dropdown %}has-dropdown{% elsif is_meganav %}has-mega-nav{% endif %}"
{% if is_meganav %}data-mega-nav="true"{% endif %}
>
<a
id="navigation-{{ link.handle }}"
class="navigation-menu-link"
href="{{ link.url }}"
{% if is_dropdown or is_meganav %}aria-haspopup{% endif %}
>
{{ link.title }}
{% if is_dropdown or is_meganav %}
<span class="navigation-submenu-toggle" tabIndex="0" role="button" aria-controls="navigation-{{ link.handle }}" aria-expanded="false" data-subnav-toggle>
{{- arrow_right -}}
</span>
{% endif %}
</a>
{% if is_dropdown %}
{% assign direction = 'right' %}
{% assign halfway = linklists[section.settings.menu].links.size | divided_by: 2 %}
{% if forloop.index0 > halfway %}
{% assign direction = 'left' %}
{% endif %}
{%- render 'dropdown', direction: direction, link: link -%}
{% elsif is_meganav %}
{%- render 'mega-nav', link: link -%}
{% endif %}
</li>
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-link">
<a href="{{ routes.account_url }}">
{{ 'layout.header.my_account' | t }}
</a>
</li>
<li class="mobile-link">
{{ 'layout.header.logout' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-link">
{{ 'layout.header.account' | t | customer_login_link }}
</li>
{% endif %}
{% endif %}
</ul>
</nav>
</div>
{% endunless %}
<div class="header-content-right" data-header-content-right>
<form class="header-search-form" action="{{ routes.search_url }}" method="get" data-header-search>
<input
class="header-search-input"
name="q"
type="text"
placeholder="{{ 'layout.header.search_placeholder' | t }}"
value="{{ search.terms }}"
>
<input
class="header-search-button"
type="submit"
value=""
aria-label="{{ 'layout.header.search_submit' | t }}"
data-header-search-button
>
<button
class="header-search-button-close"
aria-hidden="true"
data-header-search-button-close
>
{%-
render 'icons',
id: 'close',
-%}
</button>
</form>
{% if section.settings.sticky_header %}
<a class="sticky-header-cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% endif %}
</div>
</div>
</header>
</section>
{% 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 %}
This is an accepted solution.
thanks for full code i have update please check
<script
type="application/json"
data-section-type="static-header"
data-section-id="{{ section.id }}"
data-section-data
>
{
"stickyHeader": {{ section.settings.sticky_header }},
"compactCenter": "{{ section.settings.header_layout }}"
}
</script>
{%- 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 -%}
<section
class="{{ header_classes | replace: ' ', ' ' | strip_newlines }}"
{% if section.settings.sticky_header %}data-sticky-header{% endif %}
{% if section.settings.header_layout == 'compact-center' %}data-header-compact-center{% endif %}
>
<header
class="main-header"
role="banner"
data-header-main
>
<div class="header-tools-wrapper">
<div class="header-tools">
<div class="aligned-left">
<div id="coin-container"></div>
</div>
<div class="aligned-right">
{% if shop.customer_accounts_enabled %}
<div class="customer-links">
{% if customer %}
<a href="{{ routes.account_url }}">{{ 'layout.header.my_account' | t }}</a>
<div class="customer-links-inner">
<span class="arrow"></span>
<ul>
<li><a href="{{ routes.account_url }}">{{ 'customers.general.purchases' | t }}</a></li>
<li><a href="{{ routes.account_addresses_url }}">{{ 'customers.addresses.header' | t }}</a></li>
<li>{{ 'layout.header.logout' | t | customer_logout_link }}</li>
</ul>
</div>
{% else %}
{{ 'layout.header.account' | t | customer_login_link }}
{% endif %}
</div>
{% endif %}
<div class="mini-cart-wrapper">
<a class="cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% render 'mini-cart' %}
</div>
<form class="checkout-link" action="{{ routes.cart_url }}" method="POST"><button class="checkout-link__button" type="submit" name="checkout">{{ 'layout.header.checkout' | t }}</button></form>
</div>
</div>
</div>
<div class="header-main-content" data-header-content>
{% unless section.settings.menu == blank %}
<div class="header-content-left">
<button
class="navigation-toggle navigation-toggle-open"
aria-label="{{ 'layout.header.menu' | t }}"
data-header-nav-toggle
>
<span class="navigation-toggle-icon">
{%-
render 'icons',
id: 'menu'
-%}
</span>
</button>
</div>
{% endunless %}
<div class="header-branding header-branding-desktop" data-header-branding>
<a class="logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo -%}
{%
render 'rimg',
img: section.settings.logo,
class: 'logo-image',
size: '200x100',
%}
{%- else -%}
<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
</a>
<span
class="navigation-toggle navigation-toggle-close"
data-header-nav-toggle
>
{%-
render 'icons',
id: 'close',
-%}
</span>
</div>
{% unless section.settings.menu == blank %}
<div class="navigation-wrapper" data-navigation-wrapper>
<nav class="navigation navigation-has-mega-nav" data-navigation-content>
<ul class="navigation-menu">
{% for link in linklists[section.settings.menu].links %}
{% assign first_tier_link = link %}
{% assign uses_blocks = true %}
{% comment %}Inject is-dropdown-or-meganav begin{% endcomment %}
{% comment %}
A helper snippet for detecting if a link has a mega nav
or dropdown associated with it.
@param first_tier_link
@param uses_blocks
{% endcomment %}
{% assign is_dropdown = false %}
{% assign is_meganav = true %}
{% if first_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% for second_tier_link in first_tier_link.links %}
{% if second_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% endfor %}
{% if is_meganav %}
{% assign is_dropdown = false %}
{% endif %}
{% if uses_blocks %}
{% assign found_mega_item_handle = false %}
{% if section != blank and section.blocks != blank %}
{% for block in section.blocks %}
{% if block.type == 'mega_menu' %}
{% assign menu_item_handle = block.settings.menu_item | handle %}
{% if first_tier_link.handle == menu_item_handle %}
{% assign found_mega_item_handle = true %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% if found_mega_item_handle %}
{% if is_dropdown %}
{% assign is_meganav = true %}
{% assign is_dropdown = false %}
{% endif %}
{% elsif found_mega_item_handle == false %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% else %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% endif %}
{% endif %}
{% comment %}Inject is-dropdown-or-meganav end{% endcomment %}
<li
class="{% if is_dropdown %}has-dropdown{% elsif is_meganav %}has-mega-nav{% endif %}"
{% if is_meganav %}data-mega-nav="true"{% endif %}
>
<a
id="navigation-{{ link.handle }}"
class="navigation-menu-link"
href="{{ link.url }}"
{% if is_dropdown or is_meganav %}aria-haspopup{% endif %}
>
{{ link.title }}
{% if is_dropdown or is_meganav %}
<span class="navigation-submenu-toggle" tabIndex="0" role="button" aria-controls="navigation-{{ link.handle }}" aria-expanded="false" data-subnav-toggle>
{{- arrow_right -}}
</span>
{% endif %}
</a>
{% if is_dropdown %}
{% assign direction = 'right' %}
{% assign halfway = linklists[section.settings.menu].links.size | divided_by: 2 %}
{% if forloop.index0 > halfway %}
{% assign direction = 'left' %}
{% endif %}
{%- render 'dropdown', direction: direction, link: link -%}
{% elsif is_meganav %}
{%- render 'mega-nav', link: link -%}
{% endif %}
</li>
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-link">
<a href="{{ routes.account_url }}">
{{ 'layout.header.my_account' | t }}
</a>
</li>
<li class="mobile-link">
{{ 'layout.header.logout' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-link">
{{ 'layout.header.account' | t | customer_login_link }}
</li>
{% endif %}
{% endif %}
</ul>
</nav>
</div>
{% endunless %}
<div class="header-content-right" data-header-content-right>
<form class="header-search-form" action="{{ routes.search_url }}" method="get" data-header-search>
<input
class="header-search-input"
name="q"
type="text"
placeholder="{{ 'layout.header.search_placeholder' | t }}"
value="{{ search.terms }}"
>
<input
class="header-search-button"
type="submit"
value=""
aria-label="{{ 'layout.header.search_submit' | t }}"
data-header-search-button
>
<button
class="header-search-button-close"
aria-hidden="true"
data-header-search-button-close
>
{%-
render 'icons',
id: 'close',
-%}
</button>
</form>
{% if section.settings.sticky_header %}
<a class="sticky-header-cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% endif %}
</div>
</div>
</header>
</section>
{% 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 %}
This is an accepted solution.
1. Go to Online Store->Theme->Edit code
2. 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;}
thanks for post
update this code code work to if image doesn't upload then show svg
upload your svg logo assept folder
<a class="logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo -%}
{%
render 'rimg',
img: section.settings.logo,
class: 'logo-image',
size: '200x100',
%}
{% elsif %}
<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
</a>
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
can you please share full code?
This is an accepted solution.
Yes, of course. Thanks for looking in to it.
<script
type="application/json"
data-section-type="static-header"
data-section-id="{{ section.id }}"
data-section-data
>
{
"stickyHeader": {{ section.settings.sticky_header }},
"compactCenter": "{{ section.settings.header_layout }}"
}
</script>
{%- 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 -%}
<section
class="{{ header_classes | replace: ' ', ' ' | strip_newlines }}"
{% if section.settings.sticky_header %}data-sticky-header{% endif %}
{% if section.settings.header_layout == 'compact-center' %}data-header-compact-center{% endif %}
>
<header
class="main-header"
role="banner"
data-header-main
>
<div class="header-tools-wrapper">
<div class="header-tools">
<div class="aligned-left">
<div id="coin-container"></div>
</div>
<div class="aligned-right">
{% if shop.customer_accounts_enabled %}
<div class="customer-links">
{% if customer %}
<a href="{{ routes.account_url }}">{{ 'layout.header.my_account' | t }}</a>
<div class="customer-links-inner">
<span class="arrow"></span>
<ul>
<li><a href="{{ routes.account_url }}">{{ 'customers.general.purchases' | t }}</a></li>
<li><a href="{{ routes.account_addresses_url }}">{{ 'customers.addresses.header' | t }}</a></li>
<li>{{ 'layout.header.logout' | t | customer_logout_link }}</li>
</ul>
</div>
{% else %}
{{ 'layout.header.account' | t | customer_login_link }}
{% endif %}
</div>
{% endif %}
<div class="mini-cart-wrapper">
<a class="cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% render 'mini-cart' %}
</div>
<form class="checkout-link" action="{{ routes.cart_url }}" method="POST"><button class="checkout-link__button" type="submit" name="checkout">{{ 'layout.header.checkout' | t }}</button></form>
</div>
</div>
</div>
<div class="header-main-content" data-header-content>
{% unless section.settings.menu == blank %}
<div class="header-content-left">
<button
class="navigation-toggle navigation-toggle-open"
aria-label="{{ 'layout.header.menu' | t }}"
data-header-nav-toggle
>
<span class="navigation-toggle-icon">
{%-
render 'icons',
id: 'menu'
-%}
</span>
</button>
</div>
{% endunless %}
<div class="header-branding header-branding-desktop" data-header-branding>
<a class="logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo -%}
{%
render 'rimg',
img: section.settings.logo,
class: 'logo-image',
size: '200x100',
%}
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
</a>
<span
class="navigation-toggle navigation-toggle-close"
data-header-nav-toggle
>
{%-
render 'icons',
id: 'close',
-%}
</span>
</div>
{% unless section.settings.menu == blank %}
<div class="navigation-wrapper" data-navigation-wrapper>
<nav class="navigation navigation-has-mega-nav" data-navigation-content>
<ul class="navigation-menu">
{% for link in linklists[section.settings.menu].links %}
{% assign first_tier_link = link %}
{% assign uses_blocks = true %}
{% comment %}Inject is-dropdown-or-meganav begin{% endcomment %}
{% comment %}
A helper snippet for detecting if a link has a mega nav
or dropdown associated with it.
@param first_tier_link
@param uses_blocks
{% endcomment %}
{% assign is_dropdown = false %}
{% assign is_meganav = true %}
{% if first_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% for second_tier_link in first_tier_link.links %}
{% if second_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% endfor %}
{% if is_meganav %}
{% assign is_dropdown = false %}
{% endif %}
{% if uses_blocks %}
{% assign found_mega_item_handle = false %}
{% if section != blank and section.blocks != blank %}
{% for block in section.blocks %}
{% if block.type == 'mega_menu' %}
{% assign menu_item_handle = block.settings.menu_item | handle %}
{% if first_tier_link.handle == menu_item_handle %}
{% assign found_mega_item_handle = true %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% if found_mega_item_handle %}
{% if is_dropdown %}
{% assign is_meganav = true %}
{% assign is_dropdown = false %}
{% endif %}
{% elsif found_mega_item_handle == false %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% else %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% endif %}
{% endif %}
{% comment %}Inject is-dropdown-or-meganav end{% endcomment %}
<li
class="{% if is_dropdown %}has-dropdown{% elsif is_meganav %}has-mega-nav{% endif %}"
{% if is_meganav %}data-mega-nav="true"{% endif %}
>
<a
id="navigation-{{ link.handle }}"
class="navigation-menu-link"
href="{{ link.url }}"
{% if is_dropdown or is_meganav %}aria-haspopup{% endif %}
>
{{ link.title }}
{% if is_dropdown or is_meganav %}
<span class="navigation-submenu-toggle" tabIndex="0" role="button" aria-controls="navigation-{{ link.handle }}" aria-expanded="false" data-subnav-toggle>
{{- arrow_right -}}
</span>
{% endif %}
</a>
{% if is_dropdown %}
{% assign direction = 'right' %}
{% assign halfway = linklists[section.settings.menu].links.size | divided_by: 2 %}
{% if forloop.index0 > halfway %}
{% assign direction = 'left' %}
{% endif %}
{%- render 'dropdown', direction: direction, link: link -%}
{% elsif is_meganav %}
{%- render 'mega-nav', link: link -%}
{% endif %}
</li>
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-link">
<a href="{{ routes.account_url }}">
{{ 'layout.header.my_account' | t }}
</a>
</li>
<li class="mobile-link">
{{ 'layout.header.logout' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-link">
{{ 'layout.header.account' | t | customer_login_link }}
</li>
{% endif %}
{% endif %}
</ul>
</nav>
</div>
{% endunless %}
<div class="header-content-right" data-header-content-right>
<form class="header-search-form" action="{{ routes.search_url }}" method="get" data-header-search>
<input
class="header-search-input"
name="q"
type="text"
placeholder="{{ 'layout.header.search_placeholder' | t }}"
value="{{ search.terms }}"
>
<input
class="header-search-button"
type="submit"
value=""
aria-label="{{ 'layout.header.search_submit' | t }}"
data-header-search-button
>
<button
class="header-search-button-close"
aria-hidden="true"
data-header-search-button-close
>
{%-
render 'icons',
id: 'close',
-%}
</button>
</form>
{% if section.settings.sticky_header %}
<a class="sticky-header-cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% endif %}
</div>
</div>
</header>
</section>
{% 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 %}
This is an accepted solution.
thanks for full code i have update please check
<script
type="application/json"
data-section-type="static-header"
data-section-id="{{ section.id }}"
data-section-data
>
{
"stickyHeader": {{ section.settings.sticky_header }},
"compactCenter": "{{ section.settings.header_layout }}"
}
</script>
{%- 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 -%}
<section
class="{{ header_classes | replace: ' ', ' ' | strip_newlines }}"
{% if section.settings.sticky_header %}data-sticky-header{% endif %}
{% if section.settings.header_layout == 'compact-center' %}data-header-compact-center{% endif %}
>
<header
class="main-header"
role="banner"
data-header-main
>
<div class="header-tools-wrapper">
<div class="header-tools">
<div class="aligned-left">
<div id="coin-container"></div>
</div>
<div class="aligned-right">
{% if shop.customer_accounts_enabled %}
<div class="customer-links">
{% if customer %}
<a href="{{ routes.account_url }}">{{ 'layout.header.my_account' | t }}</a>
<div class="customer-links-inner">
<span class="arrow"></span>
<ul>
<li><a href="{{ routes.account_url }}">{{ 'customers.general.purchases' | t }}</a></li>
<li><a href="{{ routes.account_addresses_url }}">{{ 'customers.addresses.header' | t }}</a></li>
<li>{{ 'layout.header.logout' | t | customer_logout_link }}</li>
</ul>
</div>
{% else %}
{{ 'layout.header.account' | t | customer_login_link }}
{% endif %}
</div>
{% endif %}
<div class="mini-cart-wrapper">
<a class="cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% render 'mini-cart' %}
</div>
<form class="checkout-link" action="{{ routes.cart_url }}" method="POST"><button class="checkout-link__button" type="submit" name="checkout">{{ 'layout.header.checkout' | t }}</button></form>
</div>
</div>
</div>
<div class="header-main-content" data-header-content>
{% unless section.settings.menu == blank %}
<div class="header-content-left">
<button
class="navigation-toggle navigation-toggle-open"
aria-label="{{ 'layout.header.menu' | t }}"
data-header-nav-toggle
>
<span class="navigation-toggle-icon">
{%-
render 'icons',
id: 'menu'
-%}
</span>
</button>
</div>
{% endunless %}
<div class="header-branding header-branding-desktop" data-header-branding>
<a class="logo-link" href="{{ routes.root_url }}">
{%- if section.settings.logo -%}
{%
render 'rimg',
img: section.settings.logo,
class: 'logo-image',
size: '200x100',
%}
{%- else -%}
<img src="{{ 'logo.svg' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
{%- else -%}
<h1>{{- shop.name -}}</h1>
{%- endif -%}
</a>
<span
class="navigation-toggle navigation-toggle-close"
data-header-nav-toggle
>
{%-
render 'icons',
id: 'close',
-%}
</span>
</div>
{% unless section.settings.menu == blank %}
<div class="navigation-wrapper" data-navigation-wrapper>
<nav class="navigation navigation-has-mega-nav" data-navigation-content>
<ul class="navigation-menu">
{% for link in linklists[section.settings.menu].links %}
{% assign first_tier_link = link %}
{% assign uses_blocks = true %}
{% comment %}Inject is-dropdown-or-meganav begin{% endcomment %}
{% comment %}
A helper snippet for detecting if a link has a mega nav
or dropdown associated with it.
@param first_tier_link
@param uses_blocks
{% endcomment %}
{% assign is_dropdown = false %}
{% assign is_meganav = true %}
{% if first_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% for second_tier_link in first_tier_link.links %}
{% if second_tier_link.links == blank %}
{% assign is_meganav = false %}
{% else %}
{% assign is_dropdown = true %}
{% endif %}
{% endfor %}
{% if is_meganav %}
{% assign is_dropdown = false %}
{% endif %}
{% if uses_blocks %}
{% assign found_mega_item_handle = false %}
{% if section != blank and section.blocks != blank %}
{% for block in section.blocks %}
{% if block.type == 'mega_menu' %}
{% assign menu_item_handle = block.settings.menu_item | handle %}
{% if first_tier_link.handle == menu_item_handle %}
{% assign found_mega_item_handle = true %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% if found_mega_item_handle %}
{% if is_dropdown %}
{% assign is_meganav = true %}
{% assign is_dropdown = false %}
{% endif %}
{% elsif found_mega_item_handle == false %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% else %}
{% if is_meganav %}
{% assign is_meganav = false %}
{% assign is_dropdown = true %}
{% endif %}
{% endif %}
{% endif %}
{% comment %}Inject is-dropdown-or-meganav end{% endcomment %}
<li
class="{% if is_dropdown %}has-dropdown{% elsif is_meganav %}has-mega-nav{% endif %}"
{% if is_meganav %}data-mega-nav="true"{% endif %}
>
<a
id="navigation-{{ link.handle }}"
class="navigation-menu-link"
href="{{ link.url }}"
{% if is_dropdown or is_meganav %}aria-haspopup{% endif %}
>
{{ link.title }}
{% if is_dropdown or is_meganav %}
<span class="navigation-submenu-toggle" tabIndex="0" role="button" aria-controls="navigation-{{ link.handle }}" aria-expanded="false" data-subnav-toggle>
{{- arrow_right -}}
</span>
{% endif %}
</a>
{% if is_dropdown %}
{% assign direction = 'right' %}
{% assign halfway = linklists[section.settings.menu].links.size | divided_by: 2 %}
{% if forloop.index0 > halfway %}
{% assign direction = 'left' %}
{% endif %}
{%- render 'dropdown', direction: direction, link: link -%}
{% elsif is_meganav %}
{%- render 'mega-nav', link: link -%}
{% endif %}
</li>
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-link">
<a href="{{ routes.account_url }}">
{{ 'layout.header.my_account' | t }}
</a>
</li>
<li class="mobile-link">
{{ 'layout.header.logout' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-link">
{{ 'layout.header.account' | t | customer_login_link }}
</li>
{% endif %}
{% endif %}
</ul>
</nav>
</div>
{% endunless %}
<div class="header-content-right" data-header-content-right>
<form class="header-search-form" action="{{ routes.search_url }}" method="get" data-header-search>
<input
class="header-search-input"
name="q"
type="text"
placeholder="{{ 'layout.header.search_placeholder' | t }}"
value="{{ search.terms }}"
>
<input
class="header-search-button"
type="submit"
value=""
aria-label="{{ 'layout.header.search_submit' | t }}"
data-header-search-button
>
<button
class="header-search-button-close"
aria-hidden="true"
data-header-search-button-close
>
{%-
render 'icons',
id: 'close',
-%}
</button>
</form>
{% if section.settings.sticky_header %}
<a class="sticky-header-cart-count" href="{{ routes.cart_url }}" data-cart-count>
<span class="cart-count-text">{{ 'layout.header.cart' | t }}</span>
(<span class="cart-count-number">{{ cart.item_count }}</span>)
</a>
{% endif %}
</div>
</div>
</header>
</section>
{% 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 %}
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.
can you please update also stick logo condition
Sorry, I can't find the respective code 😞
you can check HTML and CSS code
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!
This is an accepted solution.
1. Go to Online Store->Theme->Edit code
2. 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;}
it's my pleasure to help us
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024