When building a seamless shopping experience, navigation plays a crucial role. If you’re looking to give your storefront a boost, creating a custom section for Quick navigation is an efficient and customizable solution. This guide explores how to implement a quick navigation Shopify section that improves usability while aligning with your theme’s design and SEO goals.
Why Add a Quick Navigation Shopify Section?
A custom Shopify section allows merchants to create modular and reusable blocks across their storefront. By leveraging this flexibility, store owners can introduce intuitive navigation tools that help users explore collections or key pages more efficiently.
This custom Shopify section is a simple yet powerful feature. It lets you showcase navigation links as buttons, highlights the active link dynamically, and enhances the user experience—especially on collection or landing pages.
Features of This Custom Section in Shopify
Here are the main features of the code provided for this Shopify section:
- Dynamic highlighting: The active navigation item is styled differently using
activeclasses and custom CSS, improving UX. - Integration with Shopify menu: It uses Shopify’s
menusetting, making it easy to manage navigation items from the admin. - Flexible styling: The design is clean, responsive, and uses Shopify’s native button styles for consistency.
Whether you’re creating Shopify custom sections for a client or optimizing your own store, this section can be added without external apps, saving you time and $9.99/m subscription fee.
Shopify Sections Code Breakdown
Here’s a quick look at what this Shopify section includes:
- HTML & Liquid: Renders a
<nav>element only if navigation links are set, ensuring clean output. - CSS Styling: Rounded buttons, shadow effects, and a minimal aesthetic to fit most Shopify theme sections.
- Metafield integration: Dynamically checks for a parent collection to identify active navigation states.
This Shopify sections code can be dropped into your theme files under /sections, and then added to your page templates or theme editor as needed.
How to Use This Shopify Section Code (Step-by-Step)
Follow these steps to add the custom Shopify section for quick navigation to your store:
Step – 1: Navigate to the Online Store Code Editor
In the left sidebar, go to Online Store >> Themes, then click “…” >> Edit code on your current theme. In the Sections folder, click Add a new section, and name it: quick-navigation.liquid.
Step – 2: Add the liquid code
{% assign current_url = request.path %}
{% assign parent_collection = collection.metafields.custom.parent_collection.value %}
{% if section.settings.nav_links %}
<nav class="quick-nav">
<ul class="nav-list">
{% for link in section.settings.nav_links.links %}
<li class="nav-item {% if link.url == current_url or link.title == parent_collection.title %}active{% endif %}">
{%-
render 'button',
label: link.title,
link: link.url,
style: 'secondary',
size: 'small',
external: link.target == '_blank',
classes: 'nav-link',
-%}
</li>
{% endfor %}
</ul>
</nav>
{% else %}
<p class="no-links">No navigation links available.</p>
{% endif %}This code generates the HTML structure for a navigation menu as an unordered list. The links for this menu can be configured directly from the Shopify theme editor, making it flexible and easy to manage.
First, I created a variable to store the current page URL, which helps in identifying and highlighting the active menu item. Since I’m implementing this on a collection page, I also retrieved the parent collection of the current collection. To do this, I set up a custom meta field for each collection to store its parent. This allows the navigation to dynamically reflect the active state not just based on the current URL, but also by matching the parent collection’s title—useful when organizing collections into broader categories. This method makes the navigation more intuitive and context-aware across the store.
Step – 3: Adding the CSS styles
{% stylesheet %}
.quick-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 16px;
}
.nav-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
list-style: none;
padding: 0.5rem;
margin: 1.5rem auto;
background-color: white;
border-radius: 50px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.button:after {
border: 0px;
}
.nav-item.active .button {
background-color: rgb(23 23 23);
color: white;
}
{% endstylesheet %}To style the quick navigation bar, I added some custom CSS using Shopify’s {% stylesheet %} block. The .quick-nav class centers the entire navigation menu horizontally and vertically with some margin at the top for spacing. Inside it, the .nav-list class is used to style the unordered list. It displays the links in a flexible row that wraps when needed, adds spacing between each item using gap, removes default list styles, and adds padding and margin for better spacing. I also applied a white background, rounded corners (border-radius: 50px), and a subtle box shadow to give the nav a soft, elevated look.
For the buttons themselves, I removed the default border using .button:after and set up a special style for the active item. When a navigation item has the active class, its button gets a dark background (rgb(23 23 23)) with white text, making it stand out clearly from the rest. This helps visually indicate which page or category the user is currently viewing.
This styling ensures the navigation is clean, modern, and user-friendly—while also blending nicely with most Shopify theme designs.
Step – 4: Adding the settings of the Shopify section
% schema %}
{
"name": "Quick Navigation",
"settings": [
{
"type": "link_list",
"id": "nav_links",
"label": "Select Menu"
}
],
"presets": [
{
"name": "Quick Navigation",
"category": "Custom"
}
]
}
{% endschema %}To make the quick navigation section configurable in the Shopify theme editor, I added a schema block at the bottom of the section file using the {% schema %} tag. This defines how the section appears and behaves in the editor. In this case, I gave the section the name “Quick Navigation” so it’s easy to identify when customizing a page.
Inside the settings array, I added a single setting of type "link_list", which allows merchants or content managers to select a menu from the Navigation settings in the Shopify admin. This menu becomes the source for the links that appear in the navigation bar. The id is set to "nav_links", and the label shown in the editor is “Select Menu”.
Lastly, under presets, I defined a default configuration that allows this section to be added through the theme editor’s “Add Section” menu. I named the preset “Quick Navigation” and placed it under the “Custom” category for better organization. This setup ensures the section is not only functional but also user-friendly and easily reusable across different pages or templates in the store.
Creating a Shopify section for quick navigation is a smart move for improving your store’s layout and accessibility. With just a few lines of Shopify sections code, you can create an intuitive UI component that feels seamless and polished. Best of all, it’s a reusable, scalable feature you can implement across your store.
Take this as a base to build more advanced Shopify custom sections or even integrate icons, dropdowns, or mega menus. Start small, think modular, and let each Shopify section you create move your store closer to peak performance.
Need help customizing your Shopify store or building a website from scratch?
Whether it’s creating dynamic sections like this quick navigation or designing a fully custom theme, I’m here to help.
Get in touch today and let’s bring your vision to life!
Leave a Reply