How can I add a menu to the announcement bar?

Store Design
1

Hello, I would like to add a menu to the announcement bar, how can I do it? Thank you so much for your help

2

Hi @urbantis ,

Please follow these steps:

Hope it is clear to you.

If my answer can help you solve your issue, please kindly mark it as a solution. Thank you and good luck.

3

Hi @urbantis ,

Great question! While you cannot add a menu to the announcement bar directly, you can use the default main menu to help your customers navigate your site. Here’s a guide on Understanding Navigation with Shopify that walks you through how to build your menu, add links, create drop-downs, and so on.

Of course, there may be custom code solutions to your question as provided by @LitExtension , but we do not support and cannot offer help with these.

You may also find our Introduction to Information Architecture useful when deciding how to prioritize your information. Information architecture is a discipline that helps to arrange the parts of a product to make it more understandable as a whole.

Using the concepts of information architecture, for example, you’ll know that the announcement bar provides an excellent opportunity to highlight deals, discounts, shipping information, or notices of holidays. Indeed, anything that is urgent or time-sensitive could be displayed here as the first thing visitors see.

Could I ask why it is you wanted to include your menu within the announcement bar? And I’d love to know more about your brand and business goals more broadly to see if there’s anything else I can offer that will help!

All the best, Hyde.

4

Thank you for your detailed answer. I can not find the specific code in my header.liquid, this is what my header.liquid looks like

{%- assign main_menu = linklists[section.settings.main_menu_link_list] -%}

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

{% include ‘drawer-menu’ %}
{% include ‘cart-drawer’ %}

{%- 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 -%}
{%- assign has_logo = 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 %}

.site-nav__link { font-size: {{ section.settings.type_navigation_size }}px; {% if section.settings.type_navigation_size < 18 %} padding-left: 8px; padding-right: 8px; {% endif %} }

{% if section.settings.show_announcement %}
{% include ‘announcement-bar’ %}
{% endif %}

{% if logo_alignment == ‘left’ %}

{% include 'header-logo-block' %}
{% endif %}

{% if logo_alignment == ‘left’ and section.settings.main_menu_alignment != ‘left-drawer’ %}

{% include 'header-desktop-nav' %}
{% endif %}

{% if logo_alignment == ‘center’ %}

{% if section.settings.main_menu_alignment == 'center' or section.settings.main_menu_alignment == 'center-split' %} {% if section.settings.header_search_enable %} {% endif %} {% endif %}

{% if section.settings.main_menu_alignment == ‘center-left’ %}
{% include ‘header-desktop-nav’ %}
{% endif %}

{% include 'icon-hamburger' %} {{ 'general.drawers.navigation' | t }}

{% if section.settings.main_menu_alignment == ‘center-split’ %}
{% include ‘header-split-nav’ %}
{% endif %}

{% if section.settings.main_menu_alignment != ‘center-split’ %}

{% include 'header-logo-block' %}
{% endif %} {% endif %}
{% include 'header-icons' %}

{% if section.settings.main_menu_alignment == ‘center’ %}

{% include 'header-desktop-nav' %}
{% endif %}
{% if settings.search_results == 'products' %} {% endif %} {% include 'icon-search' %} {{ 'general.search.submit' | t }} {% include 'icon-close' %} {{ 'general.accessibility.close_modal' | t | json }}

{% schema %}
{
“name”: “Header and menus”,
“settings”: [
{
“type”: “link_list”,
“id”: “main_menu_link_list”,
“label”: “Menu”,
“default”: “main-menu”
},
{
“type”: “select”,
“id”: “main_menu_alignment”,
“label”: “Logo alignment”,
“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”,
“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 homepage”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “sticky_collection”,
“label”: “Overlay header over collection”,
“info”: “(if collection image is enabled)”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “header_search_enable”,
“label”: “Show search icon”
},
{
“type”: “header”,
“content”: “Typography”
},
{
“type”: “range”,
“id”: “type_navigation_size”,
“label”: “Text size”,
“default”: 18,
“min”: 12,
“max”: 40,
“unit”: “px”
},
{
“type”: “checkbox”,
“id”: “type_navigation_style”,
“label”: “Use heading font”
},
{
“type”: “header”,
“content”: “Announcement bar”
},
{
“type”: “checkbox”,
“id”: “show_announcement”,
“label”: “Show an announcement”
},
{
“type”: “text”,
“id”: “announcement_text”,
“label”: “Announcement text”,
“default”: “Free shipping and returns”,
“info”: “When closed, the announcement will remain closed until the next visit. Change the text to see it again.”
},
{
“type”: “url”,
“id”: “announcement_link”,
“label”: “Announcement link”
},
{
“type”: “checkbox”,
“id”: “announcement_closable”,
“label”: “Allow users to close announcement”
}
],
“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”
}
]
}
],
“default”: {
“settings”: {}
}
}
{% endschema %}

5

Hi @urbantis ,

What’s your site? And send me the code of file ‘announcement-bar.liquid’. I will check it.

6

HI @LitExtension do you think you can help me with this? I am using Dawn theme.

7

Hi @FWalter ,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.