Unlock Mobile Engagement: How to Add a Free Sticky Bottom Navigation Bar to Your Shopify Store
Hey there, fellow store owners! It's your Shopify expert here, diving into another fantastic discussion from the Shopify community. We recently saw a great question from rakhirani asking for some free Liquid code to create a sticky bottom navigation bar, or footer menu, for their mobile site. You know, that handy bar that stays put at the bottom of your screen no matter how much you scroll? It's a game-changer for mobile user experience, making it super easy for customers to navigate your store.
This isn't just a 'nice-to-have'; it's often a crucial element for improving mobile conversions and overall site usability. And guess what? The community came through with some brilliant, completely free solutions that don't require shelling out for another app. Let's break down what we learned.
Right off the bat, experts like Steve_TopNewYork and ai-theme-code-editor confirmed that yes, you absolutely can build this yourself using a combination of Liquid, HTML, CSS, and a touch of JavaScript. The core idea is pretty straightforward: you create a new section or snippet in your theme, add your desired navigation links (think Home, Shop, Search, Cart, Account), and then use some clever CSS to make it 'stick' to the bottom of the screen. Crucially, you'll want to use a media query to ensure it only appears on mobile devices, keeping your desktop experience clean and uncluttered.
A common piece of advice, and one I can't stress enough, is to always duplicate your theme before making any code changes. This gives you a safe backup in case anything goes sideways. Trust me, it's saved me more than once!
Now, rakhirani followed up with some common frustrations after trying an initial implementation: the bar wasn't showing up on real mobile devices (only in preview), there was too much empty space at the bottom, and it wasn't actually sticking. These are classic symptoms of a few missing CSS ingredients, and the community had the fixes ready.
The key to making it sticky is the CSS property position: fixed; combined with bottom: 0; and left: 0;. This tells the browser to keep that element in the same spot relative to the viewport. To handle the excessive spacing and ensure content doesn't get hidden behind your new navigation, you need to add padding-bottom to your body element, matching the height of your sticky bar. And for modern iPhones with the home bar, env(safe-area-inset-bottom) is a neat trick to prevent content from being obscured.
While several good code snippets were shared, one solution from Ploqo really stood out for its completeness and user-friendliness, especially for those using Online Store 2.0 themes like Dawn. It packages the navigation into its own section, meaning you can customize it directly from your theme editor without touching code again after the initial setup. This is a huge win for store owners!
Here's how you can implement Ploqo's robust solution, featuring clean icons, live cart count, and full customizability:
Step-by-Step: Adding a Customizable Sticky Bottom Nav
Before you begin, remember to duplicate your theme in your Shopify admin (Online Store > Themes > Actions > Duplicate).
1. Add the Code as a New Section
- From your Shopify admin, go to Online Store > Themes.
- Find your current theme, click the
...(Actions) button, and select Edit code. - In the left sidebar, under the Sections directory, click Add a new section.
- Name it
mobile-bottom-nav(exactly like that), delete any starter code, and then paste the entire code block provided below into this new 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
- Go back to your Shopify admin, Online Store > Themes, and click Customize.
- In the theme editor, look at the left panel. Scroll down to the Footer section group (or anywhere you prefer it to load, but Footer is a logical spot).
- Click Add section, and then choose Mobile bottom nav from the list.
- Click Save in the top right corner.
3. Customize Your Links and Appearance
- In the theme editor's left panel, click the newly added Mobile bottom nav section.
- You'll see options to adjust colors, bar height, and the breakpoint for hiding it on wider screens.
- Click on each Nav item block to set its Label, Link, and choose an Icon from the dropdown.
- For your Cart item, make sure to check Show cart item count for that live badge!
- Don't forget to Save your changes.
And here's a peek at what it looks like:
Now, a quick note on other solutions. oscprofessional and Custom-Cursor also shared excellent, more compact code snippets that you can paste directly into your theme.liquid file before the