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 Liquid

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

Theme editor settings

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

SEO & 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