Boost Mobile Sales: How to Add a Free Sticky Bottom Navigation Bar to Your Shopify Store

Hey everyone, let's talk about something that can seriously level up your store's mobile experience: a sticky bottom navigation bar. You know, that handy menu that stays fixed at the bottom of the screen as you scroll? It's a game-changer for mobile users, making it super easy to jump between key pages like Home, Shop, Cart, or Account without endless scrolling.

Recently, a store owner named Rakhirani hit us up in the forums, asking for some free Liquid code to get this setup on her Shopify store. She wanted it to be mobile-friendly and always visible. What started as a simple request turned into a fantastic community discussion, and the insights shared are golden for anyone looking to implement this feature without relying on a paid app. Let's dive into what we learned!

Why a Sticky Bottom Nav is a Mobile Must-Have

Think about your own phone usage. How often do you find yourself scrolling back to the top or bottom of a page to find the main menu? A sticky bottom navigation eliminates that friction, keeping essential links within thumb's reach. This isn't just a nice-to-have; it's a crucial part of a smooth mobile user experience (UX) that can directly impact conversion rates. Our community experts were quick to point out that you can absolutely achieve this with a bit of custom code – Liquid, HTML, and CSS – without installing a single app.

Key Principles from the Community

Several experts, like Steve_TopNewYork and ai-theme-code-editor, quickly chimed in with the core approach. Here's the rundown:

• Create a dedicated section or snippet: This keeps your code organized and makes it easier to manage.
• Use CSS position: fixed; bottom: 0;: This is the magic snippet that locks your navigation to the bottom of the viewport, ensuring it stays visible as users scroll.
• Target mobile devices with media queries: Most stores only want this on mobile. A CSS media query (e.g., @media (max-width: 768px)) ensures it only appears on smaller screens and stays hidden on desktop.
• Don't forget the z-index: To make sure your navigation sits on top of other elements, a high z-index (like 999 or 9999) is essential.
• Backup your theme: Always, always, always duplicate your theme before making any code changes! This gives you a quick revert option if anything goes wrong.

Addressing Rakhirani's Specific Issues

Rakhirani later clarified some issues she was facing: the bar wasn't visible on real mobile devices (though it showed in preview), there was excessive spacing at the bottom, and it wasn't remaining fixed. These are common hurdles, and the community's solutions directly tackle them:

• Visibility: Often related to incorrect CSS (like a missing z-index or a conflicting style) or where the code is placed. The provided solutions ensure proper placement and styling.
• Excessive spacing: When you add a fixed element to the bottom, it often covers content. To prevent this, you need to add padding-bottom to your body element equal to the height of your sticky navigation. This pushes the content up so it doesn't get hidden behind the bar.
• Not fixed: This is directly solved by the position: fixed; bottom: 0; CSS properties.

The Comprehensive Solution: Step-by-Step Implementation

While several helpful code snippets were shared, a truly standout solution came from Ploqo, offering not only robust code but also seamless integration with the Shopify theme editor. This means you can customize your nav bar without ever touching the code again after the initial setup. Here's how to implement it:

1. Add the Code as a New Section

• From your Shopify admin, go to Online Store > Themes.
• Find your current theme, click the ... (three dots) button, and select Edit code.
• Under the Sections directory, click Add a new section.
• Name it mobile-bottom-nav.
• Delete any starter code that's automatically generated in the new file.
• Paste the following complete code into the mobile-bottom-nav.liquid file.
• Click Save.

{%- comment -%} Sticky mobile bottom navigation bar {%- endcomment -%}
{%- liquid
  assign wrap_id = 'mbn-' | append: section.id
-%}







{% schema %}
{
  "name": "Mobile bottom nav",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Appearance" },
    { "type": "color", "id": "bg_color", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "icon_color", "label": "Icon and label", "default": "#5c5c5c" },
    { "type": "color", "id": "active_color", "label": "Active page", "default": "#111111" },
    { "type": "color", "id": "badge_color", "label": "Cart count badge", "default": "#e02b2b" },
    { "type": "color", "id": "border_color", "label": "Top border", "default": "#e6e6e6" },
    { "type": "range", "id": "bar_height", "min": 50, "max": 80, "step": 1, "unit": "px", "label": "Bar height", "default": 62 },
    { "type": "range", "id": "hide_above", "min": 600, "max": 1000, "step": 10, "unit": "px", "label": "Hide on screens wider than", "default": 750 }
  ],
  "blocks": [
    {
      "type": "link",
      "name": "Nav item",
      "settings": [
        { "type": "text", "id": "label", "label": "Label", "default": "Home" },
        { "type": "url", "id": "link", "label": "Link" },
        {
          "type": "select", "id": "icon", "label": "Icon", "default": "home",
          "options": [
            { "value": "home", "label": "Home" },
            { "value": "shop", "label": "Shop" },
            { "value": "search", "label": "Search" },
            { "value": "cart", "label": "Cart" },
            { "value": "account", "label": "Account" },
            { "value": "heart", "label": "Wishlist" },
            { "value": "menu", "label": "Menu" },
            { "value": "phone", "label": "Contact" }
          ]
        },
        { "type": "checkbox", "id": "show_cart_count", "label": "Show cart item count", "default": false }
      ]
    }
  ],
  "max_blocks": 5,
  "presets": [
    {
      "name": "Mobile bottom nav",
      "blocks": [
        { "type": "link", "settings": { "label": "Home", "icon": "home" } },
        { "type": "link", "settings": { "label": "Shop", "icon": "shop" } },
        { "type": "link", "settings": { "label": "Search", "icon": "search" } },
        { "type": "link", "settings": { "label": "Cart", "icon": "cart", "show_cart_count": true } },
        { "type": "link", "settings": { "label": "Account", "icon": "account" } }
      ]
    }
  ]
}
{% endschema %}

2. Turn it On for Every Page

• After saving the new section, go back to your theme overview and click Customize.
• In the left-hand panel, scroll down to the Footer group (or a similar appropriate section where you'd like it to appear globally).
• Click Add section and choose Mobile bottom nav from the list.
• Click Save.

3. Set Your Links and Customize Appearance

• In the theme customizer, click on the newly added Mobile bottom nav section.
• You'll see options to adjust colors, bar height, and the screen width at which it hides (default 750px for mobile-only).
• Under Content, click on each Nav item block to configure its Label, Link, and Icon.
• For your Cart item, make sure to check Show cart item count to display a live badge.

This solution also thoughtfully includes padding-bottom: env(safe-area-inset-bottom); which is super important for modern iPhones to ensure the navigation bar clears the home indicator bar, providing a clean look.

Here's a visual of the result:

Important Considerations for a Smooth Launch

A smart heads-up from VikashJ in the discussion is crucial: a sticky bottom navigation can sometimes clash with other elements on your site. Specifically, keep an eye out for:

• Shopify's 'Buy Now' / Dynamic Checkout buttons: These often pin themselves to the bottom of product pages and could overlap with your new nav bar.
• Cookie consent banners: Many apps inject these at the bottom of the screen.

Always test your new navigation on various pages, especially product pages, to ensure nothing overlaps. If you notice any collisions, you might need to adjust the z-index of either your navigation bar or the conflicting element, or slightly increase the padding-bottom on your body to give elements more room.

Other community members like oscprofessional and Custom-Cursor also provided simpler, direct code injections into theme.liquid. These are great for quick implementation if you prefer a less configurable but functional approach. They also include SVG icons or even emojis for the navigation items, giving you options for visual style.

For example, Custom-Cursor's solution:

  
    🏠
    Home
  

  
    🛍️
    Shop
  

  
    🛒
    Cart
  

  
    👤
    Account
  




{% schema %}
{
  "name": "Mobile Bottom Navigation",
  "settings": [],
  "presets": [
    {
      "name": "Mobile Bottom Navigation"
    }
  ]
}
{% endschema %}

Ultimately, adding a sticky bottom navigation bar is a fantastic way to enhance your mobile store's usability. With the community's help, especially the detailed solution from Ploqo, you can implement this feature effectively and keep your customers happily navigating your products. Remember to always test thoroughly on real mobile devices after any code changes! If you're just starting your journey to build an amazing online store, consider signing up for Shopify to get access to these powerful customization options.