Dear Shopify Community,
I am seeking guidance on adding a utility menu to the header of my Shopify store. Despite creating a ‘utility-menu’ in the Shopify admin panel, it does not appear on my Dawn theme, nor is there an option to enable it in the theme customization settings.
I attempted to integrate the following Liquid code into my theme:
{% if linklists.utility-menu.links.size > 0 %}
<ul class="utility-menu">
{% for link in linklists.utility-menu.links %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
I inserted this code into the header.liquid file, aiming to display the utility menu in the desired location. However, the menu still does not appear on my storefront.
I would appreciate any insights or suggestions on how to implement a utility menu in the header successfully. Specifically, I am interested in understanding:
- The correct placement of the above code within the header.liquid file.
- Any additional steps or configurations required to enable the utility menu.
- Potential conflicts or theme settings that might prevent the menu from displaying.
Thank you in advance for your assistance.
Hey @dewritos ,
Sorry, I’m late to the party. Let me help you out, please try this:
- Create your utility menu in Shopify admin:
- Go to Online Store > Navigation
- Create a new menu (e.g., “Utility Menu”)
- Add your desired links
- Replace your current header.liquid content with the code I provided. This code:
- Adds theme settings to enable/disable the utility menu
- Includes responsive styling
- Uses Dawn theme’s design patterns and variables
- Is properly structured for accessibility
- Configure the utility menu in theme customizer:
- Go to Online Store > Themes > Customize
- Find the Header section settings
- Enable the utility menu checkbox
- Select your created menu from the “Utility Menu” dropdown
{%- comment -%}sections/header.liquid{%- endcomment -%}
{% schema %}
{
"name": "t:sections.header.name",
"settings": [
{
"type": "checkbox",
"id": "enable_utility_menu",
"label": "t:sections.header.settings.enable_utility_menu.label",
"default": false
},
{
"type": "link_list",
"id": "utility_menu",
"label": "t:sections.header.settings.utility_menu.label",
"info": "t:sections.header.settings.utility_menu.info"
},
// ... your existing header settings ...
]
}
{% endschema %}
{% stylesheet %}
.utility-menu-wrapper {
background-color: var(--gradient-background);
border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
padding: 0.5rem 0;
}
.utility-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin: 0;
padding: 0;
}
.utility-menu li {
margin: 0 0 0 1.5rem;
}
.utility-menu__link {
color: rgba(var(--color-foreground), 0.75);
font-size: 1.2rem;
text-decoration: none;
transition: color var(--duration-short) ease;
}
.utility-menu__link:hover,
.utility-menu__link--active {
color: rgb(var(--color-foreground));
text-decoration: underline;
}
@media screen and (max-width: 749px) {
.utility-menu {
justify-content: center;
}
.utility-menu li {
margin: 0 0.75rem;
}
}
{% endstylesheet %}
Feel free to reach out in case you’ve any more questions for me, or you can simply email me.
Cheers!
Shubham | hello@untechnickle.com
1 Like
Hi Shubham,
Thanks for getting back to me. The reason I took so long to reply was I wanted to try every option I could to implement your code, not limited to ai. I think I successfully added the styling and schema but haven’t had the same result for the main header content. For reference, the first picture is what it looks like as of now and the other is what I’m taking inspiration from. Also the current code is under the images. What should I do to fully add the utility and mega menus like the other site?
Thanks again for your assistance.
{%- if settings.predictive_search_enabled -%}
{%- endif -%}
{%- if section.settings.menu_type_desktop == 'mega' -%}
{%- endif -%}
{%- if settings.cart_type == "drawer" -%}
{{ 'component-cart-drawer.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-totals.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-discounts.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{% stylesheet %}
.utility-menu-wrapper {
background-color: var(--gradient-background);
border-bottom: 1px solid rgba(var(--color-foreground), 0.08);
padding: 0.5rem 0;
}
.utility-menu {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
margin: 0;
padding: 0;
}
.utility-menu li {
margin: 0 0 0 1.5rem;
}
.utility-menu__link {
color: rgba(var(--color-foreground), 0.75);
font-size: 1.2rem;
text-decoration: none;
transition: color var(--duration-short) ease;
}
.utility-menu__link:hover,
.utility-menu__link--active {
color: rgb(var(--color-foreground));
text-decoration: underline;
}
@media screen and (max-width: 749px) {
.utility-menu {
justify-content: center;
}
.utility-menu li {
margin: 0 0.75rem;
}
}
{% endstylesheet %}
{%- style -%}
.header {
padding: {{ section.settings.padding_top | times: 0.5 | round: 0 }}px 3rem {{ section.settings.padding_bottom | times: 0.5 | round: 0 }}px 3rem;
}
.section-header {
position: sticky; /* This is for fixing a Safari z-index issue. PR #2147 */
margin-bottom: {{ section.settings.margin_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-header {
margin-bottom: {{ section.settings.margin_bottom }}px;
}
}
@media screen and (min-width: 990px) {
.header {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if settings.cart_type == "drawer" -%}
{%- endif -%}
{%- liquid
for block in section.blocks
if block.type == '@app'
assign has_app_block = true
endif
endfor
-%}
{%- comment -%}sections/header.liquid{%- endcomment -%}
