Navigation
Navigation 1 Level
A simple menu bar with navigation linked to the main-menu, including additional links for account access and the mini cart.
Navigation 2 Levels
A navigation bar featuring a dropdown for secondary navigation levels, complemented by links for account access and the mini cart.
Navigation 3 Levels
A navigation bar with dropdown menus supporting both secondary and tertiary navigation levels, along with dedicated links for account access and the mini cart.
Navigation edit handle in editor
Simple navigation with a link where the menu handle can be edited in the Shopify editor. We added a li-settings:custom block with a text setting 'menu_handle' and linked that section settings in the forloop at the nav link. Like this li-for="link in linklists[section.settings.menu_handle].links"
Language switch
A simple Language switcher using the localization object and the localization form. For this, we used the li-form tag.
Free shipping progress bar
A simple Progress bar to indicate how much the customer needs to spend to access free shipping. We used li-settings:custom to create a free_shipping text input for specifying the minimum amount. The value is stored as a variable using alpine.js and x-data, enabling the calculation of the progress bar length. This variable can also be used with li-js-if to dynamically display or hide elements.