Skip to content

Instantly share code, notes, and snippets.

@whistlerbrad
Last active April 30, 2020 02:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save whistlerbrad/fa344ffb6dcba77242f4615052987d44 to your computer and use it in GitHub Desktop.
Save whistlerbrad/fa344ffb6dcba77242f4615052987d44 to your computer and use it in GitHub Desktop.
Duel logos for Pipeline (mobile/desktop) tested with v4.5.1 - Two files in this GIST - header.liquid and a new file nav-contents-2.liquid
{%- assign transparent_header = false -%}
{%- if template contains 'collection' and collection.image and section.settings.transparent_collection -%}
{%- assign transparent_header = true -%}
{%- elsif template contains 'article' and article.image and section.settings.transparent_article -%}
{%- assign transparent_header = true -%}
{%- elsif template contains 'blog' and section.settings.transparent_blog -%}
{%- assign transparent_header = true -%}
{%- elsif template contains 'page' and section.settings.transparent_page -%}
{%- assign transparent_header = true -%}
{%- elsif template == 'index' and section.settings.transparent_home -%}
{%- assign transparent_header = true -%}
{%- endif -%}
<style>
.header--transparent:not(.header--sticky):not(.header--stuck) .nav--desktop .main-menu>li>a{
color: {{ section.settings.transparent_text_color }};
}
.header--transparent:not(.header--sticky):not(.header--stuck) .icon{
fill: {{ section.settings.transparent_text_color }};
}
.header--transparent:not(.header--sticky):not(.header--stuck) .header-cart__bubble{
background-color: {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.5 }};
}
</style>
<div class="header__wrapper{% if transparent_header %} header--transparent{% endif %}"
data-header-transparent="{{ transparent_header }}"
data-header-sticky="{{ section.settings.header_sticky }}"
data-section-id="{{ section.id }}"
data-section-type="header">
{% if section.settings.header_enable_account or section.settings.header_enable_search or section.settings.header_message != '' %}
<div class="info-bar showMobile">
<div class="wrapper text-center">
{% if shop.customer_accounts_enabled and section.settings.header_enable_account %}
<div class="header-account-link">
<a href="/account"><img src="{{ 'account.svg' | asset_url }}"></a>
</div>
{% endif %}
{% if section.settings.header_message != '' %}
<div class="header-message uppercase{% if section.settings.header_enable_account or section.settings.header_enable_search %} header-message--crowded{% endif %}">
{% if section.settings.header_message_url != blank %}
<a href="{{ section.settings.header_message_url }}">{{ section.settings.header_message | escape }}</a>
{% else %}
{{ section.settings.header_message | escape }}
{% endif %}
</div>
{% endif %}
{% if section.settings.header_enable_search %}
<div class="header-search__wrapper">
<div class="header-search">
<form action="/search" method="get" class="input-group search" role="search">
{% if section.settings.search_only_products %}<input type="hidden" name="type" value="product">{% endif %}
<input class="search-bar" type="search" name="q">
<button type="submit" class="btn search-btn"></button>
</form>
</div>
</div>
{% endif %}
</div>
</div>
{% endif %}
<header class="site-header {{ section.settings.height }}" role="banner">
<div class="wrapper">
<div class="nav--desktop">
{% include 'nav-contents' with 'desktop' %}
</div>
<div class="nav--mobile">
{% include 'nav-contents-2' with 'mobile' %}
</div>
</div>
</header>
</div>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{% if section.settings.logo %}
{% assign image_size = section.settings.logo.width | append:'x' %}
"logo": {{ section.settings.logo | img_url: image_size | prepend: "https:" | json }},
{% endif %}
"sameAs": [
{{ settings.social_twitter_link | json }},
{{ settings.social_facebook_link | json }},
{{ settings.social_instagram_link | json }},
{{ settings.social_pinterest_link | json }},
{{ settings.social_google_link | json }},
{{ settings.social_youtube_link | json }},
{{ settings.social_vimeo_link | json }},
{{ settings.social_tumblr_link | json }},
{{ settings.social_fancy_link | json }}
],
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% if template.name == 'index' %}
{% assign potential_action_target = shop.url | append: "/search?q={search_term_string}" %}
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": {{ shop.name | json }},
"potentialAction": {
"@type": "SearchAction",
"target": {{ potential_action_target | json }},
"query-input": "required name=search_term_string"
},
"url": {{ shop.url | append: page.url | json }}
}
</script>
{% endif %}
{% schema %}
{
"name": "Header",
"settings": [
{
"type": "image_picker",
"id": "logo",
"label": "Logo image"
},
{
"type": "image_picker",
"id": "logo_mobile",
"label": "Logo mobile"
},
{
"type": "range",
"id": "logo_max_limit",
"min": 5,
"max": 495,
"step": 5,
"unit": "px",
"label": "logo width",
"default": 120
},
{
"type": "link_list",
"label": "Menu",
"id": "main_menu_linklist"
},
{
"type": "header",
"content": "Meganav image"
},
{
"type": "image_picker",
"id": "meganav_image",
"label": "Meganav image",
"info": "500 x 800px .jpg max"
},
{
"type": "url",
"id": "meganav_link",
"label": "Meganav Image Link"
},
{
"type": "header",
"content": "Sticky header"
},
{
"type": "select",
"id": "header_sticky",
"options": [
{ "value": "static", "label": "Default header"},
{ "value": "sticky", "label": "Sticky header"},
{ "value": "scroll", "label": "Sticky header only when scrolling up"}
],
"label": "Header behavior",
"default": "static"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "transparent_home",
"label": "Enable on the home page",
"default": false
},
{
"type": "checkbox",
"id": "transparent_collection",
"label": "Enable on collections",
"default": false
},
{
"type": "checkbox",
"id": "transparent_blog",
"label": "Enable on the blog",
"default": false
},
{
"type": "checkbox",
"id": "transparent_article",
"label": "Enable on articles",
"default": false
},
{
"type": "checkbox",
"id": "transparent_page",
"label": "Enable on pages",
"default": false
},
{
"type": "color",
"id": "transparent_text_color",
"label": "Text and icons color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Alternate logo"
},
{
"type": "image_picker",
"id": "transparent_logo_mobile",
"label": "Alternate logo mobile"
},
{
"type": "header",
"content": "Top Bar"
},
{
"type": "text",
"id": "header_message",
"label": "Announcement text",
"info": "45 characters or less recommended"
},
{
"type": "url",
"id": "header_message_url",
"label": "Announcement link"
},
{
"type": "checkbox",
"id": "header_enable_account",
"default": true,
"label": "Show account link in header"
},
{
"type": "checkbox",
"id": "header_enable_search",
"default": true,
"label": "Show search in header"
},
{
"type": "checkbox",
"id": "search_only_products",
"label": "Only search products"
}
]
}
{% endschema %}
<div class="mobile-wrapper">
<div class="header-cart__wrapper">
<a href="/cart" class="CartToggle header-cart">
{% include 'icon-cart' %}
</a>
<span class="header-cart__bubble cartCount{% if cart.item_count < 1 %} hidden-count{% endif %}"></span>
</div>
<div class="logo-wrapper{% if section.settings.logo %} logo-wrapper--image{% endif %}">
{% if template.name == 'index' %}
<h1 class="h4 header-logo">
{% else %}
<div class="h4 header-logo">
{% endif %}
<a href="/">
{% if section.settings.logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.logo_mobile | img_url: image_size }}"
class="logo--color"
srcset="{{ section.settings.logo_mobile | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo_mobile.alt | default: shop.name }}">
{% else %}
<span class="logo--text">{{ shop.name }}</span>
{% endif %}
{% if transparent_header and section.settings.transparent_logo != blank %}
{% capture image_size %}{{ section.settings.logo_max_limit }}x{% endcapture %}
<img src="{{ section.settings.transparent_logo_mobile | img_url: image_size }}"
class="logo--transparent"
srcset="{{ section.settings.transparent_logo_mobile | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.transparent_logo_mobile.alt | default: shop.name }}">
{% endif %}
</a>
{% if template.name == 'index' %}
</h1>
{% else %}
</div>
{% endif %}
</div>
<a href class="menuToggle header-hamburger"{% if nav-contents == 'mobile' %} aria-haspopup="true" aria-expanded="false" aria-controls="ariaHamburger"{% endif %}>
{% include 'icon-nav' %}
</a>
</div>
<div class="header-menu nav-wrapper">
<ul class="main-menu accessibleNav" role="navigation" aria-label="primary"{% if nav-contents == 'mobile' %} id="ariaHamburger" {% endif %}>
{% if section.settings.main_menu_linklist %}
{% assign main_menu_linklist = section.settings.main_menu_linklist %}
{% else %}
{% assign main_menu_linklist = 'main-menu' %}
{% endif %}
{% for link in linklists[main_menu_linklist].links %}
{% include 'nav-item' %}
{% endfor %}
<li class="cart-text-link">
<a href="/cart" class="CartToggle">
{{ 'layout.cart.title' | t }}
<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>
</a>
</li>
</ul>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment