Mobile Navigation Bar

The Mobile Navigation Bar is a fixed horizontal bar at the bottom of the screen (visible only on mobile). It mimics the bottom nav found in most apps, making your store feel more modern, intuitive, and easy to use with thumbs.

---

1. Visibility & Icons

Show Mobile Navigation Bar Section

Toggles the entire bar on or off for mobile. If disabled, no nav bar appears.

Show Homepage Icon

Adds a small Home icon linking to your homepage.

Show Shop Icon

Adds a shop or product icon, usually linking to a collection or “Shop All” page.

Show Account Icon

Adds a profile/user icon linking to login or account dashboard.

Show Cart Icon

Adds a cart icon showing the number of items and linking to the cart page.

Show Wishlist Icon

Adds a heart icon linking to saved items (works only if your theme or app supports wishlisting).

💡 Tip: You can choose to show only 3–4 icons to keep the bar uncluttered.

---

2. Mobile Nav Bar Background Styling

Enable Custom Color for Mobile Navigation Bar

Lets you manually set a background color for the bar.

• Mobile Navigation Bar Color: #FFFFFF This will apply if gradient and glassmorphism are turned off.

---

3. Gradient Background (Overrides Solid Color)

Enable Gradient Color for Mobile Navigation Bar

Turns on a multicolor gradient background. This overrides the solid color setting if both are enabled.

• Gradient Color 1: #F4F4F4

• Gradient Color 2: #E7E7E7

• Gradient Color 3: #FFFFFF

• Gradient Angle: 50° Controls the angle or direction the gradient flows (0° = horizontal left to right, 90° = top to bottom).

Gradients give the bar a more dynamic or branded look, especially when paired with minimalist icons.

---

4. Glassmorphism (Frosted Glass Effect)

Enable Background Glassmorphism

Activates a stylish, semi-transparent frosted glass look behind the navigation bar.

Useful for showing background imagery while maintaining readability and modern aesthetics.

Glassmorphism Settings:

• Blur (px): 18 – The intensity of the blur applied to background content.

• Opacity: 1 – 100% opaque (use lower values for more transparency).

• Background Color: Transparent – Defines the base tint behind the frosted effect.

• Saturation (%): 100 – Controls how vivid background colors remain.

• Brightness (%): 120 – Increases brightness for a glossier look.

🧊 Glassmorphism looks great over content-heavy pages or image-based layouts. If paired with icons in dark colors, keep the bar light for good contrast.

---

Why This Section Matters

The Mobile Navigation Bar is one of the most important UI tools on mobile. It gives quick access to high-converting actions (like Cart, Wishlist, Account), and enhances mobile usability drastically.

Best Practice:

• Keep it clean with only 3–4 icons max.

• Stick to light or slightly transparent backgrounds for readability.

• Use glassmorphism or gradients for visual polish, especially if your site already feels modern.