Mobile Bottom Navigation Bar

What This Sidekick Query Does

Create a mobile bottom navigation bar section for my Shopify theme that is fixed to the bottom of the viewport and visible only on screens below [MOBILE_BREAKPOINT] pixels wide. The navigation bar should display [NAV_ITEM_COUNT] icon-and-label items in an evenly spaced horizontal row. Each item should be configured via a section block with settings for icon (selectable from a list including home, search, collections, cart, and account), label text [ITEM_LABEL], and link URL [ITEM_URL]. The currently active page should highlight the corresponding icon and label with color [ACTIVE_COLOR] while inactive items use [INACTIVE_COLOR]. The cart item should display a badge showing the current cart item count, updated dynamically. The bar should have background color [BAR_BG_COLOR], height [BAR_HEIGHT] pixels, a top border with color [BORDER_COLOR], and z-index [Z_INDEX]. Add a setting to auto-hide the bar when the customer scrolls down and show it when scrolling up [AUTO_HIDE]. Include safe-area inset padding for devices with home indicators. The bar should not appear on desktop or in the Shopify theme editor. Add a subtle shadow above the bar with intensity [SHADOW_INTENSITY]. Each icon should use an inline SVG at [ICON_SIZE] pixels. Provide complete Liquid, CSS, and JavaScript.

Expected Output

Tips to Improve Results