Apploy PWA includes a bottom navigation that can be activated in the theme settings. This navigation appears at the bottom of the screen, providing easy access to key sections of your store.
The bottom navigation can be fully customized using our dashboard and a bit of CSS code.
Follow these guidelines to customize the navigation:
Here is the structure of the navigation menu bar.
- nav container - .apploy-main-nav
-- nav items - .apploy-main-nav-item | .apploy-main-nav-item.active when active
--- nav item icon
--- nav item badge(if cart) - .apploy-cart-badge
Sample Code:
<nav class="apploy-main-nav" id="apploy-main-nav">
<a href="/" class="apploy-main-nav-item active">
<img src="home-icon.png" alt="Home" width="24" height="24">
</a>
<a href="/collections" class="apploy-main-nav-item">
<img src="collections-icon.png" alt="Collections" width="24" height="24">
</a>
<a href="/cart" class="apploy-main-nav-item">
<img src="cart-icon.png" alt="Cart" width="24" height="24">
<span class="apploy-cart-badge" id="apploy-cart-badge">
2
</span>
</a>
<a href="/account" class="apploy-main-nav-item">
<img src="account-icon.png" alt="Account" width="24" height="24">
</a>
</nav>
Guidelines:
Avoid changing the navigation's position
Ensure icons are not hidden
Keep the maximum height at 70px