Shopify themes, liquid, logos, and UX
Does anyone know how I can move my announcement bar under the header?
Thanks in advance guys!
Please provide website url and if your store is password protected then also provide password
@Jeffrey10
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media screen and (min-width: 1246px) {
#shopify-section-announcement {
position: absolute !important;
width: 100%;
top: 112px;
z-index: 2;
}
}
thanks for URL yes please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (min-width: 1240px) {
#shopify-section-announcement {
position: absolute;
width: 100%;
top: 112px;
z-index: 1;
}
}
After code view
That's cool! Would it also be possible to move it under the slideshow?
Looking forward in hearing from you guys.
Yes, is possible to change backend code
Hi,
How do I do this? 🙂
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
@Jeffrey10 - can we edit code to move code under header, if you want I can check it for you, can you add me to staff or as collaborator?
Dear @Jeffrey10
/* Start */
#shopify-section-announcement {position: fixed; z-index: 9; width: 100%; top: 113px;}
@media screen and (max-width: 1240px) {
#shopify-section-announcement {top: 67px;}
}
/* End*/
Hi,
This didn't work. It made me open the page at half of the page when but the announcement bar stayed at the same place.
Looking forward in hearing from you.
@Jeffrey10 - I recommend to change code location itself in header file, using css position can be changed but it creates issues with other pages and views
Hi Suyash,
If it creates issues with other pages then never mind.
How can I still do this?
@Jeffrey10 - change code location, you can put announcement bar anywhere you want
so far you tried with css and it creates issues
Hi,
Thanks for your fast response!
Do you have any suggestions in how I can do this?
@Jeffrey10 - go to header.liquid file, find announcement bar code, copy it and paste it where you want and then can remove from original location
{%- assign use_transparent_header = false -%}
{%- if template == 'index' and section.settings.enable_transparent_header -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}
{%- if template.name == 'collection' and section.settings.enable_transparent_header_collection and collection.image and collection.all_products_count > 0 and collection.template_suffix != 'no-image' -%}
{%- assign use_transparent_header = true -%}
{%- endif -%}
{%- if section.settings.navigation_style != 'sidebar' -%}
{%- assign use_sidebar_menu = false -%}
{%- else -%}
{%- assign use_sidebar_menu = true -%}
{%- endif -%}
{%- if settings.currency_conversion_enabled -%}
{%- capture currency_conversion_select -%}
<div class="Header__CurrencySelector Text--subdued Heading Link Link--primary u-h8 hidden-pocket hidden-lap">
<div class="Select Select--transparent">
<select class="CurrencySelector__Select u-h8">
{%- capture codes -%}USD,EUR,GBP,CAD,ARS,AUD,BBD,BDT,BSD,BHD,BRL,BOB,BND,BGN,MMK,KYD,CLP,CNY,COP,CRC,HRK,CZK,DKK,DOP,XCD,EGP,XPF,FJD,GHS,GTQ,GYD,GEL,HKD,HUF,ISK,INR,IDR,NIS,JMD,JPY,JOD,KZT,KES,KWD,LVL,LTL,MXN,MYR,MUR,MDL,MAD,MNT,MZN,ANG,NZD,NGN,NOK,OMR,PKR,PYG,PEN,PHP,PLN,QAR,RON,RUB,SAR,RSD,SCR,SGD,SYP,ZAR,KRW,LKR,SEK,CHF,TWD,THB,TZS,TTD,TRY,UAH,AED,UYU,VEB,VND,ZMK{%- endcapture -%}
{%- assign supported_codes = settings.currency_conversion_supported_currencies | remove_first: shop.currency | upcase | split: ' ' | uniq -%}
<option value="{{ shop.currency }}" selected="selected">{{ shop.currency }}</option>
{%- for code in supported_codes -%}
{%- if codes contains code -%}
<option value="{{ code }}">{{ code }}</option>
{%- endif -%}
{%- endfor -%}
</select>
{%- include 'icon' with 'select-arrow' -%}
</div>
</div>
{%- endcapture -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
HEADER CONTENT
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- capture section_settings -%}
{
"navigationStyle": {{ section.settings.navigation_style | json }},
"hasTransparentHeader": {% if use_transparent_header %}true{% else %}false{% endif %},
"isSticky": {% if section.settings.use_sticky_header %}true{% else %}false{% endif %}
}
{%- endcapture -%}
<header id="section-{{ section.id }}"
class="Header Header--{{ section.settings.navigation_style }} {% unless section.settings.navigation_style == 'inline' %}Header--initialized{% endunless %} {% if use_transparent_header %}Header--transparent{% endif %}"
data-section-id="{{ section.id }}"
data-section-type="header"
data-section-settings='{{ section_settings }}'
role="banner">
<div class="Header__Wrapper">
<div class="Header__FlexItem Header__FlexItem--fill">
<button class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" aria-expanded="false" data-action="open-drawer" data-drawer-id="sidebar-menu" aria-label="{{ 'header.navigation.open_sidebar' | t }}">
<span class="hidden-tablet-and-up">{%- include 'icon' with 'nav' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'nav-desktop' -%}</span>
</button>
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
DESKTOP NAVIGATION (if not using the sidebar mode)
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- unless use_sidebar_menu -%}
{%- assign main_menu_handle = section.settings.navigation_menu | default: 'main-menu' -%}
{%- assign main_menu = linklists[main_menu_handle] -%}
{%- assign mega_menu_names = '' -%}
{%- for block in section.blocks -%}
{%- if block.type == 'mega_menu' -%}
{%- assign mega_menu_names = mega_menu_names | append: block.settings.navigation_mega_menu | append: ',' -%}
{%- endif -%}
{%- endfor -%}
{%- assign mega_menu_names = mega_menu_names | downcase | split: ',' | compact -%}
<nav class="Header__MainNav hidden-pocket hidden-lap" aria-label="{{ 'header.navigation.title' | t }}">
<ul class="HorizontalList HorizontalList--spacingExtraLoose">
{%- for link in main_menu.links -%}
{%- assign downcased_link_title = link.title | downcase -%}
{%- assign use_mega_menu = false -%}
{%- capture menu_item_dropdown -%}
{%- if mega_menu_names contains downcased_link_title -%}
{%- for block in section.blocks -%}
{%- assign downcased_mega_menu_name = block.settings.navigation_mega_menu | downcase -%}
{%- if downcased_mega_menu_name != downcased_link_title -%}
{%- continue -%}
{%- endif -%}
{%- assign use_mega_menu = true -%}
{%- assign push_image_count = 0 -%}
{%- if block.settings.push_1_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}
{%- if block.settings.push_2_image -%}
{%- assign push_image_count = push_image_count | plus: 1 -%}
{%- endif -%}
{%- assign should_space_evenly = false -%}
{%- if push_image_count == 0 and link.links.size <= 3 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}
{%- if push_image_count == 1 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}
{%- if push_image_count == 2 and link.links.size == 1 -%}
{%- assign should_space_evenly = true -%}
{%- endif -%}
<div class="MegaMenu {% if push_image_count != 0 and link.links.size == 0 %}MegaMenu--spacingCenter{% elsif should_space_evenly %}MegaMenu--spacingEvenly{% endif %} {% if push_image_count == 0 and link.links.size > 4 %}MegaMenu--grid{% endif %}" aria-hidden="true" {{ block.shopify_attributes }}>
<div class="MegaMenu__Inner">
{%- for sub_link in link.links -%}
<div class="MegaMenu__Item MegaMenu__Item--fit">
<a href="{{ sub_link.url }}" class="MegaMenu__Title Heading Text--subdued u-h7">{{ sub_link.title | title }}</a>
{%- if sub_link.links != blank -%}
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- endfor -%}
{%- if push_image_count > 0 -%}
<div class="MegaMenu__Item" style="{% if push_image_count == 1 %}width: 370px; min-width: 250px;{% else %}width: 660px; min-width: 425px;{% endif %}">
{%- if block.settings.push_1_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_1_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_1_url }}">
{%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_1_image.width -%}
<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_1_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_1_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_1_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_1_image.alt | escape }}">
<span class="Image__Loader"></span>
</div>
{%- if block.settings.push_1_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_1_heading | escape }}</p>
{%- endif -%}
{%- if block.settings.push_1_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_1_subheading | escape }}</p>
{%- endif -%}
{%- if block.settings.push_1_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
{%- if block.settings.push_2_image -%}
<div class="MegaMenu__Push {% if push_image_count == 2 %}MegaMenu__Push--shrink{% endif %}">
{%- if block.settings.push_2_url != blank -%}
<a class="MegaMenu__PushLink" href="{{ block.settings.push_2_url }}">
{%- endif -%}
{%- assign max_width = 370 | at_most: block.settings.push_2_image.width -%}
<div class="MegaMenu__PushImageWrapper AspectRatio" style="background: url({{ block.settings.push_2_image | img_url: '1x1', format: 'jpg' }}); max-width: {{ max_width }}px; --aspect-ratio: {{ block.settings.push_2_image.aspect_ratio }}">
<img class="Image--lazyLoad Image--fadeIn"
data-src="{{ block.settings.push_2_image | img_url: '370x230', scale: 2 }}"
alt="{{ block.settings.push_2_image.alt | escape }}">
<span class="Image__Loader"></span>
</div>
{%- if block.settings.push_2_heading != blank -%}
<p class="MegaMenu__PushHeading Heading u-h6">{{ block.settings.push_2_heading | escape }}</p>
{%- endif -%}
{%- if block.settings.push_2_subheading != blank -%}
<p class="MegaMenu__PushSubHeading Heading Text--subdued u-h7">{{ block.settings.push_2_subheading | escape }}</p>
{%- endif -%}
{%- if block.settings.push_2_url != blank -%}
</a>
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}
</div>
</div>
{%- endfor -%}
{%- elsif link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_link in link.links -%}
<li class="Linklist__Item" {% if sub_link.links != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ sub_link.url }}" class="Link Link--secondary">{{ sub_link.title | escape }} {% if sub_link.links != blank %}{% include 'icon' with 'select-arrow-right' %}{% endif %}</a>
{%- if sub_link.links != blank -%}
<div class="DropdownMenu" aria-hidden="true">
<ul class="Linklist">
{%- for sub_sub_link in sub_link.links -%}
<li class="Linklist__Item">
<a href="{{ sub_sub_link.url }}" class="Link Link--secondary">{{ sub_sub_link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- endcapture -%}
<li class="HorizontalList__Item {% if link.links == blank and link.active %}is-active{% endif %}" {% if menu_item_dropdown != blank %}aria-haspopup="true"{% endif %}>
<a href="{{ link.url }}" class="Heading u-h6">
{{- link.title | escape -}}
{%- if use_mega_menu or menu_item_dropdown == blank -%}
<span class="Header__LinkSpacer">{{ link.title | escape }}</span>
{%- endif -%}
</a>
{{- menu_item_dropdown -}}
</li>
{%- endfor -%}
</ul>
</nav>
{{- currency_conversion_select -}}
{%- endunless -%}
</div>
{%- capture header_logo -%}
<a href="/" class="Header__LogoLink">
{%- if section.settings.logo != blank -%}
{%- capture image_size -%}{{ section.settings.logo_max_width }}x{%- endcapture -%}
<img class="Header__LogoImage Header__LogoImage--primary"
src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.logo.alt | default: shop.name | escape }}">
{%- if use_transparent_header and section.settings.transparent_logo != blank -%}
<img class="Header__LogoImage Header__LogoImage--transparent"
src="{{ section.settings.transparent_logo | img_url: image_size }}"
srcset="{{ section.settings.transparent_logo | img_url: image_size }} 1x, {{ section.settings.transparent_logo | img_url: image_size, scale: 2 }} 2x"
width="{{ section.settings.logo_max_width }}"
alt="{{ section.settings.transparent_logo.alt | default: shop.name | escape }}">
{%- endif -%}
{%- else -%}
<span class="Heading u-h4">{{ shop.name }}</span>
{%- endif -%}
</a>
{%- endcapture -%}
<div class="Header__FlexItem">
{%- if template == 'index' -%}
<h1 class="Header__Logo">{{ header_logo }}</h1>
{%- else -%}
<div class="Header__Logo">{{ header_logo }}</div>
{%- endif -%}
</div>
<div class="Header__FlexItem Header__FlexItem--fill">
{%- unless use_sidebar_menu -%}
<nav class="Header__SecondaryNav">
<ul class="HorizontalList HorizontalList--spacingLoose hidden-pocket hidden-lap">
{%- if settings.currency_conversion_enabled and section.settings.navigation_style == 'inline' -%}
<li class="HorizontalList__Item">
{{ currency_conversion_select }}
</li>
{%- endif -%}
{%- if shop.customer_accounts_enabled -%}
<li class="HorizontalList__Item">
<a href="{% if customer %}/account{% else %}/account/login{% endif %}" class="Heading Link Link--primary Text--subdued u-h8">
{{- 'header.navigation.account' | t -}}
</a>
</li>
{%- endif -%}
<li class="HorizontalList__Item">
<a href="/search" class="Heading Link Link--primary Text--subdued u-h8" data-action="open-modal" aria-controls="Search">{{ 'header.navigation.search' | t }}</a>
</li>
<li class="HorizontalList__Item">
<a href="/cart" class="Heading u-h6" {% unless template == 'cart' or settings.cart_type == 'page' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endunless %}>{{ 'header.navigation.cart' | t }} (<span class="Header__CartCount">{{ cart.item_count }}</span>)</a>
</li>
</ul>
</nav>
{%- endunless -%}
<a href="/cart" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable {% unless use_sidebar_menu %}hidden-desk{% endunless %}" {% if settings.cart_type == 'drawer' %}data-action="open-drawer" data-drawer-id="sidebar-cart" aria-expanded="false" aria-label="{{ 'header.navigation.open_cart' | t }}"{% endif %}>
<span class="hidden-tablet-and-up">{%- include 'icon' with 'cart' -%}</span>
<span class="hidden-phone">{%- include 'icon' with 'cart-desktop' -%}</span>
<span class="Header__CartDot {% if cart.item_count > 0 %}is-visible{% endif %}"></span>
</a>
</div>
</div>
</header>
<style>
{%- if section.settings.use_sticky_header -%}
:root {
--use-sticky-header: 1;
}
.shopify-section--header {
position: -webkit-sticky;
position: sticky;
}
{%- endif -%}
{%- if use_transparent_header -%}
:root {
--header-is-not-transparent: 0;
--header-is-transparent: 1;
}
.shopify-section--header {
margin-bottom: calc(-1 * var(--header-height));
}
.supports-sticky .Header--transparent {
box-shadow: 0 -1px {{ section.settings.transparent_text_color | color_modify: 'alpha', 0.25 }} inset;
color: {{ section.settings.transparent_text_color }};
}
{%- else -%}
:root {
--header-is-not-transparent: 1;
--header-is-transparent: 0;
}
{%- endif -%}
</style>
<script>
document.documentElement.style.setProperty('--header-height', document.getElementById('shopify-section-header').offsetHeight + 'px');
</script>
{% schema %}
{
"name": "Header",
"class": "shopify-section--header",
"settings": [
{
"type": "checkbox",
"id": "use_sticky_header",
"label": "Use sticky header",
"default": true
},
{
"type": "image_picker",
"id": "logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
},
{
"type": "range",
"id": "logo_max_width",
"min": 50,
"max": 350,
"step": 5,
"unit": "px",
"label": "Logo image width",
"default": 140
},
{
"type": "header",
"content": "Navigation"
},
{
"type": "link_list",
"id": "navigation_menu",
"label": "Menu",
"default": "main-menu"
},
{
"type": "select",
"id": "navigation_style",
"label": "Navigation style",
"info": "Setting will default to center style if screen width cannot fit all the links.",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "inline",
"label": "Inline"
},
{
"value": "center",
"label": "Center"
}
],
"default": "inline"
},
{
"type": "header",
"content": "Transparent header"
},
{
"type": "checkbox",
"id": "enable_transparent_header",
"label": "Enable on homepage",
"default": false
},
{
"type": "checkbox",
"id": "enable_transparent_header_collection",
"label": "Enable on collection pages",
"info": "Only if the collection has an image.",
"default": false
},
{
"type": "color",
"id": "transparent_text_color",
"label": "Text/icon color",
"default": "#ffffff"
},
{
"type": "image_picker",
"id": "transparent_logo",
"label": "Logo image",
"info": "200 x 60px png recommended"
}
],
"blocks": [
{
"type": "mega_menu",
"name": "Mega menu",
"settings": [
{
"type": "text",
"id": "navigation_mega_menu",
"label": "Menu item",
"info": "Enter menu item to apply a mega menu dropdown. [Learn more](http://support.maestrooo.com/article/149-navigation-enabling-and-configuring-mega-menu)."
},
{
"type": "header",
"content": "Image push 1"
},
{
"type": "image_picker",
"id": "push_1_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_1_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_1_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_1_url",
"label": "Link"
},
{
"type": "header",
"content": "Image push 2"
},
{
"type": "image_picker",
"id": "push_2_image",
"label": "Image",
"info": "740 x 460 px jpg recommended"
},
{
"type": "text",
"id": "push_2_heading",
"label": "Heading",
"default": "Example heading"
},
{
"type": "text",
"id": "push_2_subheading",
"label": "Sub-heading",
"default": "Example sub-heading"
},
{
"type": "url",
"id": "push_2_url",
"label": "Link"
}
]
}
]
}
{% endschema %}
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024