Unlock a Unique Look: How to Add a Vertical Left Nav & Mobile Bottom Bar to Your Shopify Dawn Theme

View original discussion by vaniiccc on Shopify Community →

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! Let's dive into what we learned and how you can implement this cool navigation style for your own store.

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 relatively straightforward to add without directly editing core theme files (though it's always smart to duplicate your theme first!).

Here’s how Ploqo's solution looks in action:

Desktop View: Vertical Left Rail

Desktop: vertical left rail

Mobile View: Fixed Bottom Bar

Mobile: fixed bottom bar

Step-by-Step: Implementing the Custom Navigation

Ready to give this a try? Here are the detailed steps, based on Ploqo’s excellent guide:

  1. Duplicate Your Theme: Seriously, this is step zero for any code change! Go to Online Store > Themes, find your Dawn theme, click Actions > Duplicate. Work on the duplicate copy.
  2. Access the Customizer: On your duplicated theme, click Customize.
  3. Add a Custom Liquid Section: In the left panel of the customizer, under the Header section, click Add section. Scroll down and select Custom Liquid.
    Add section, then Custom Liquid, under Header
  4. Position the Section: Drag the newly added 'Custom Liquid' section to the very top of your Header sections list. This ensures it loads before other header elements and can properly hide them.
  5. Paste the Code: In the 'Custom Liquid' section settings, you'll see a code input area. Paste the entire code block provided below into this area.
    Paste the code, then Save
  6. Save Your Changes: Click Save in the top right corner.

This code hides Dawn's default top header, ensuring only your new custom navigation shows. Here's the code:



{%- capture nav -%}
  Menu
  Search
  Wish List
  Recent
{%- endcapture -%}
{%- capture logo -%}
  
{%- endcapture -%}





×

Customizing Your New Navigation

Ploqo's code is pretty flexible. Here’s how you can tweak it:

  • Colors and Width: At the very top of the