PremiumNewFeaturedNavigation

Mobile Bottom Nav

Name: Mobile Bottom Nav
Brand: modblo
Price: 39.00 USD
Availability: InStock

App-style fixed bottom navigation for mobile shoppers.

#mobile#navigation#bottom-bar#app-style#tabita-replacement#apphq-replacement

Live preview

See it in action.

Fully interactive, drag, click, scroll inside the frame, toggle to mobile.

About this section

Fixed bottom-of-screen navigation bar that appears only on mobile, with up to 5 configurable icons (Home, Shop, Search, Cart, Account, Menu, Wishlist). Live cart count badge that updates via Cart AJAX. iOS safe-area-inset aware. Replaces the $10/mo bottom-bar apps merchants install for app-like feel.

Install in 90 seconds

01
Create /sections/modblo-mobile-bottom-nav.liquid.
02
Paste the section code and save.
03
Add `{% section 'modblo-mobile-bottom-nav' %}` to theme.liquid (just before </body>) so the bar is present on every page.
04
In the theme editor, add up to 5 nav items, pick the icon kind and set URL for each.
05
(Optional) Adjust active accent color to match your brand.

The code

This is the file you'll paste into your theme.

modblo-mobile-bottom-nav.liquid

{%- comment -%}
  modblo. Mobile Bottom Nav
  Replaces AppHQ Mobile Bottom Bar / Tapita Bottom Bar / similar apps.
  App-style fixed bottom navigation for mobile shoppers. Shop, Search,
  Cart (with live count), Account, plus configurable Home / Menu icons.
  Auto-hides on desktop, respects iOS safe-area-inset-bottom.
{%- endcomment -%}

<nav class="modblo-bn" data-modblo-bn
     data-section-id="{{ section.id }}"
     aria-label="Mobile navigation"
     style="--modblo-bn-bg: {{ section.settings.bg }};
            --modblo-bn-fg: {{ section.settings.fg }};
            --modblo-bn-active: {{ section.settings.active_color }};
            --modblo-bn-badge: {{ section.settings.badge_color }};">
  <ul class="modblo-bn__list">
    {%- for block in section.blocks -%}
      {%- if block.type == 'item' -%}
        {%- assign item_url = block.settings.url | default: '/' -%}
        {%- assign is_active = false -%}
        {%- if request.path == item_url -%}{%- assign is_active = true -%}{%- endif -%}
        {%- if block.settings.kind == 'cart' and request.path contains '/cart' -%}{%- assign is_active = true -%}{%- endif -%}

        <li class="modblo-bn__item">
          <a href="{{ item_url }}"
             class="modblo-bn__link {% if is_active %}is-active{% endif %}"
             {{ block.shopify_attributes }}
             {% if block.settings.kind == 'cart' %}data-modblo-bn-cart{% endif %}>
            <span class="modblo-bn__icon" aria-hidden="true">
              {%- case block.settings.kind -%}
                {%- when 'home' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z"/>
                  </svg>
                {%- when 'shop' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/>
                  </svg>
                {%- when 'search' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>
                  </svg>
                {%- when 'cart' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/>
                  </svg>
                {%- when 'account' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
                  </svg>
                {%- when 'menu' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 6h18M3 12h18M3 18h18"/>
                  </svg>
                {%- when 'wishlist' -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                  </svg>
                {%- else -%}
                  <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="12" cy="12" r="9"/>
                  </svg>
              {%- endcase -%}

              {%- if block.settings.kind == 'cart' and cart.item_count > 0 -%}
                <span class="modblo-bn__badge" data-modblo-bn-badge>{{ cart.item_count }}</span>
              {%- endif -%}
            </span>
            {%- if block.settings.label != blank -%}
              <span class="modblo-bn__label">{{ block.settings.label }}</span>
            {%- endif -%}
          </a>
        </li>
      {%- endif -%}
    {%- endfor -%}
  </ul>
</nav>

<style>
  .modblo-bn {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--modblo-bn-bg, #ffffff);
    color: var(--modblo-bn-fg, #0b0b0c);
    border-top: 1px solid color-mix(in oklab, var(--modblo-bn-fg) 8%, transparent);
    padding-bottom: env(safe-area-inset-bottom, 0);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background-color: color-mix(in oklab, var(--modblo-bn-bg, #fff) 92%, transparent);
    /* hidden on desktop */
    display: none;
  }
  @media (max-width: 768px) {
    .modblo-bn { display: block; }
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0)); }
  }

  .modblo-bn__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: 64px;
  }
  .modblo-bn__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%; gap: 3px;
    color: color-mix(in oklab, var(--modblo-bn-fg) 60%, transparent);
    text-decoration: none;
    transition: color .2s, transform .15s;
    position: relative;
  }
  .modblo-bn__link:active { transform: scale(.95); }
  .modblo-bn__link.is-active {
    color: var(--modblo-bn-active, #6366f1);
  }
  .modblo-bn__link.is-active::before {
    content: "";
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 2px; border-radius: 0 0 2px 2px;
    background: var(--modblo-bn-active, #6366f1);
  }

  .modblo-bn__icon { position: relative; display: inline-grid; place-items: center; }
  .modblo-bn__label { font-size: 10px; font-weight: 500; letter-spacing: .01em; }
  .modblo-bn__badge {
    position: absolute; top: -4px; right: -8px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: var(--modblo-bn-badge, #ef4444); color: #fff;
    font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
    line-height: 1;
    border: 2px solid var(--modblo-bn-bg, #fff);
  }
</style>

<script>
  // Live cart-count update, listens for the standard cart:updated event
  // (fired by most modern themes after Cart AJAX) plus updates on page load.
  (function () {
    var nav = document.querySelector('[data-modblo-bn][data-section-id="{{ section.id }}"]');
    if (!nav) return;

    function updateBadge() {
      var cartLink = nav.querySelector('[data-modblo-bn-cart]');
      if (!cartLink) return;
      fetch('/cart.js').then(function (r) { return r.json(); }).then(function (cart) {
        var iconWrap = cartLink.querySelector('.modblo-bn__icon');
        var badge = iconWrap.querySelector('[data-modblo-bn-badge]');
        if (cart.item_count > 0) {
          if (!badge) {
            badge = document.createElement('span');
            badge.className = 'modblo-bn__badge';
            badge.setAttribute('data-modblo-bn-badge', '');
            iconWrap.appendChild(badge);
          }
          badge.textContent = cart.item_count;
        } else if (badge) {
          badge.remove();
        }
      });
    }

    document.addEventListener('cart:updated', updateBadge);
  })();
</script>

{% schema %}
{
  "name": "Mobile Bottom Nav",
  "tag": "section",
  "settings": [
    { "type": "header", "content": "Colors" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#0b0b0c" },
    { "type": "color", "id": "active_color", "label": "Active accent", "default": "#6366f1" },
    { "type": "color", "id": "badge_color", "label": "Cart badge", "default": "#ef4444" }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Nav item",
      "settings": [
        { "type": "select", "id": "kind", "label": "Icon", "default": "shop",
          "options": [
            { "value": "home", "label": "Home" },
            { "value": "shop", "label": "Shop / Bag" },
            { "value": "search", "label": "Search" },
            { "value": "cart", "label": "Cart (with live count)" },
            { "value": "account", "label": "Account" },
            { "value": "menu", "label": "Menu" },
            { "value": "wishlist", "label": "Wishlist" }
          ]
        },
        { "type": "text", "id": "label", "label": "Label" },
        { "type": "url", "id": "url", "label": "URL" }
      ]
    }
  ],
  "max_blocks": 5,
  "presets": [{
    "name": "Mobile Bottom Nav",
    "blocks": [
      { "type": "item", "settings": { "kind": "home", "label": "Home", "url": "shopify://routes/root" } },
      { "type": "item", "settings": { "kind": "shop", "label": "Shop", "url": "shopify://routes/all" } },
      { "type": "item", "settings": { "kind": "search", "label": "Search", "url": "shopify://routes/search" } },
      { "type": "item", "settings": { "kind": "cart", "label": "Cart", "url": "shopify://routes/cart" } },
      { "type": "item", "settings": { "kind": "account", "label": "Account", "url": "shopify://routes/account" } }
    ]
  }]
}
{% endschema %}

Unlock the section code

Mobile Bottom Nav is a premium section. Get the full Liquid + scoped CSS paste-ready.

Or unlock all premium with Creator

One-time purchase · Lifetime updates · You own the code

What you can customize

Every setting below shows up in the Shopify theme editor. Change them without touching code.

Setting	Type	Default
Background bg	Color picker	#ffffff
Foreground fg	Color picker	#0b0b0c
Active accent active_color	Color picker	#6366f1
Cart badge badge_color	Color picker	#ef4444
Nav items (theme blocks) blocks Up to 5 items. Choose icon kind, label, and URL per item.	blocks	,

SEO and accessibility notes

Hidden on desktop (≥768px) via media query, no impact on desktop layout or SEO.
Cart count updated via Cart AJAX (/cart.js), listens to cart:updated event.
env(safe-area-inset-bottom) padding keeps the bar above the iOS home indicator on notched iPhones.
All icons are inline SVG, no icon-font dependency.

Pairs nicely with

Sticky Add to Cart

A premium, scroll-triggered sticky bar that lifts conversion.

Mega Menu Pro

Multi-column dropdown navigation with featured promo cards. Replaces Buddha Menu.

Cart Drawer Upsell

Slide-out cart with free-ship bar + recommendations. Replaces Rebuy/Bold.

96 perf·intermediate

$99