Customize Dawn Theme: Vertical Left Nav & Mobile Bottom Bar

Hey there, fellow store owners! Ever scroll through a beautiful website and notice a super slick navigation setup – maybe a vertical menu neatly tucked away on the left for desktop, then seamlessly transforming into a fixed bar at the bottom for mobile? It’s a fantastic way to offer a clean, modern look and improve user experience, especially on mobile where screen real estate is precious.

Recently, a store owner named vaniiccc brought this exact design challenge to the Shopify community forum, asking if it was possible to achieve this look on the popular Dawn theme. And as usual, the community stepped up with some truly insightful and actionable solutions! As experts in Shopify migrations and development at Shopping Cart Mover, we understand the importance of a well-crafted user experience. Let's dive into what we learned and how you can implement this cool navigation style for your own store.

Shopify theme editor showing Custom Liquid section with navigation code

The Dawn Theme & Custom Navigation: A Community Deep Dive

First off, it’s important to know that the standard Dawn theme doesn't offer this vertical left navigation or fixed mobile bottom bar out of the box. As Maximus3 pointed out in the thread, some older themes, like a specific version of Broadcast, used a more complex JavaScript-driven approach (think Alpine.js overlays) for this kind of menu. But don't worry, you don't need to rebuild your store from scratch to get a similar modern feel on Dawn.

The beauty of Shopify's flexibility, especially for those who want to start their own online store, is that with a bit of custom code (CSS and Liquid), you can achieve quite a lot. Our community experts offered a few pathways, but one solution really stood out for its completeness and ease of implementation.

The Comprehensive 'Custom Liquid' Approach

Ploqo shared a brilliant, ready-to-use solution that tackles both the desktop vertical rail and the mobile fixed bottom bar. What’s great about this is that it leverages the 'Custom Liquid' section within the theme editor, making it accessible even for those who prefer not to directly edit theme files. This method effectively replaces Dawn's default header with a custom-built, responsive navigation system.

Understanding the Desktop Vertical Navigation

For desktop users, a vertical left navigation offers several advantages. It keeps key menu items always visible without taking up valuable horizontal space at the top, which can be better utilized for hero images or product displays. The community's initial CSS suggestions, like mastroke's, focused on transforming the existing .header-wrapper into a fixed sidebar:

@media screen and (min-width: 990px) {
/* Turn the header into a fixed left sidebar */
.header-wrapper {
position: fixed;
top: 0;
left: 0;
width: 240px;
height: 100vh;
overflow-y: auto;
border-bottom: none;
border-right: 1px solid rgba(var(--color-border), 0.2);
}
.header {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 30px 20px;
height: 100%;
}
/* Stack the menu vertically */
.header__inline-menu {
margin-top: 30px;
width: 100%;
}
.list-menu--inline {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
/* Push page content to the right so it doesn't sit under the sidebar */
.shopify-section-header + * ,
main#MainContent {
margin-left: 240px;
}
/* Optional: hide the sticky header behavior since it's now a fixed sidebar */
.header-wrapper--sticky {
position: fixed;
}
}

This CSS snippet works by fixing the header to the left, giving it a set width, and then pushing the main content area over to prevent overlap. It's a solid foundation for desktop customization.

Implementing the Mobile Fixed Bottom Bar

On mobile, a fixed bottom navigation bar is a UX game-changer. It places essential navigation within easy thumb reach, mimicking the intuitive experience of native mobile apps. New_Dev wisely advised adding sufficient bottom padding to the page content and specific padding for iPhones to accommodate the home indicator, ensuring the fixed nav doesn't obscure any content.

Ploqo's Step-by-Step Implementation Guide

Ploqo's solution brilliantly integrates both concepts into one cohesive package. Here's how to implement it:

Go to your Shopify Admin: Online Store > Themes.
On your Dawn theme, click Customize.
In the left panel of the theme editor, locate the Header section.
Click Add section and choose Custom Liquid.
Paste the provided code into the Custom Liquid input area.
Click Save.

Because this Custom Liquid section is placed within the Header group, it will automatically appear on every page of your store, ensuring consistent navigation.

Diving into Ploqo's Code

The code provided by Ploqo includes both CSS and Liquid, creating a robust and responsive navigation system:

CSS (): This section defines the styling for both the desktop vertical rail (.ck-rail) and the mobile bottom bar (.ck-bar). It uses media queries (@media (min-width:990px) and @media (max-width:989px)) to apply different styles based on screen size. Crucially, it hides the default Shopify header (.section-header{ display:none !important; }) and adjusts body padding to make space for the new navigation.
Liquid ({%- capture nav -%} ... {%- endcapture -%}): This part generates the HTML structure for your navigation links, including SVG icons for Menu, Search, Wish List, and Recent items. It dynamically pulls your store's logo (settings.logo) and uses Shopify's routes object (e.g., routes.root_url) to ensure links are correct.
Navigation Panels (...): The solution also includes hidden panels for a full-screen menu and search functionality, which appear when their respective icons are clicked. The menu panel dynamically populates links from your 'main-menu' linklist (linklists['main-menu'].links), making it easy to manage your menu content from the Shopify admin.

This comprehensive approach ensures that your navigation is not only visually appealing but also fully functional and integrated with your Shopify store's existing structure.

Customization and Best Practices

While Ploqo's code is a fantastic starting point, you can further customize it:

Colors and Fonts: Adjust the --rail-bg and --rail-fg CSS variables to match your brand's color palette.
Icons: Replace the SVG icons with your own custom icons if desired.
Menu Items: Modify the Liquid code to include different links or pull from a different linklist if your main navigation is named differently.
Wishlist Page: Note that the wishlist link assumes you have a page at /pages/wishlist. Create this page or adjust the link accordingly.

As with any custom code implementation, remember these best practices:

Duplicate Your Theme: Always create a duplicate of your live theme before making any code changes. This provides a safe rollback option.
Test Thoroughly: Check your new navigation on various devices, browsers, and screen sizes to ensure it's responsive and functional everywhere.
Accessibility: Ensure that your custom navigation remains accessible to all users, including those using screen readers or keyboard navigation.
Performance: While this solution is lean, always monitor your store's loading speed after implementing custom code.

Conclusion

Transforming your Shopify Dawn theme with a vertical desktop navigation and a sticky mobile bottom bar is an excellent way to elevate your store's design and user experience. Thanks to the collaborative spirit of the Shopify community, solutions like Ploqo's make this advanced customization achievable. By following these steps and understanding the underlying code, you can create a more modern, intuitive, and engaging shopping environment for your customers, setting your brand apart in the competitive e-commerce landscape.

Advanced Shopify Dawn Theme Navigation: Vertical Desktop & Sticky Mobile Footer