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"

{ "type": "text", "id": "menu_handle", "label": "Menu", "default": "main-menu" }

Language switch

A simple Language switcher using the localization object and the localization form. For this, we used the li-form tag.

Englisch

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.

Free Shipping
Only $52.75 more, and we’ll cover your shipping costs!
Congratulations  🎉
Congratulations! You’ve unlocked free shipping for your order.
{ "type": "text", "id": "free_shipping", "label": "Free Shipping", "default": "100" }

Advanced Mini Cart (F'insweet Modal)

IMPORTANT!
You need to install the F'insweet Modal script in the head of your project:
<!-- [Attributes by Finsweet] Modal --><script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-modal@1/modal.js"></script>

An advanced Mini Cart with the following features:
- Customizable animations in Shopify
- Customizable position in Shopify
- Enable or disable free shipping in Shopify
- Show discounts in the Mini Cart
- Full accessibility thanks to F'insweet

[ { "type": "select", "id": "mini_cart_content_position", "label": "Content - Position", "options": [ { "value": "right", "label": "Right" }, { "value": "left", "label": "Left" }, { "value": "center", "label": "Center (Pop-Up)" } ], "default": "right" }, { "type": "select", "id": "mini_cart_content_animation", "label": "Content - Animation", "info": "Animates the cart content inside the modal", "options": [ { "value": "fade", "label": "Fade" }, { "value": "slide-up", "label": "Slide Up" }, { "value": "slide-down", "label": "Slide Down" }, { "value": "slide-right", "label": "Slide Right" }, { "value": "slide-left", "label": "Slide Left" }, { "value": "grow", "label": "Grow" }, { "value": "shrink", "label": "Shrink" }, { "value": "spin", "label": "Spin" } ], "default": "slide-left" }, { "type": "select", "id": "mini_cart_content_animation_easing", "label": "Content - Animation Easing", "options": [ { "value": "linear", "label": "Linear" }, { "value": "ease", "label": "Ease" }, { "value": "ease-in", "label": "Ease In" }, { "value": "ease-out", "label": "Ease Out" }, { "value": "ease-in-out", "label": "Ease In Out" } ], "default": "ease" }, { "type": "number", "id": "mini_cart_content_animation_duration", "label": "Content - Animation Duration (ms)", "default": 500 }, { "type": "select", "id": "mini_cart_modal_animation", "label": "Modal - Animation", "info": "Animates the modal wrapper", "options": [ { "value": "fade", "label": "Fade" }, { "value": "slide-up", "label": "Slide Up" }, { "value": "slide-down", "label": "Slide Down" }, { "value": "slide-right", "label": "Slide Right" }, { "value": "slide-left", "label": "Slide Left" }, { "value": "grow", "label": "Grow" }, { "value": "shrink", "label": "Shrink" }, { "value": "spin", "label": "Spin" } ], "default": "slide-left" }, { "type": "select", "id": "mini_cart_modal_animation_easing", "label": "Modal - Animation Easing", "options": [ { "value": "linear", "label": "Linear" }, { "value": "ease", "label": "Ease" }, { "value": "ease-in", "label": "Ease In" }, { "value": "ease-out", "label": "Ease Out" }, { "value": "ease-in-out", "label": "Ease In Out" } ], "default": "ease" }, { "type": "number", "id": "mini_cart_modal_animation_duration", "label": "Modal - Animation Duration (ms)", "default": 300 }, { "type": "checkbox", "id": "mini_cart_free_shipping", "label": "Free Shipping - Show Elements", "default": true }, { "type": "number", "id": "mini_cart_free_shipping_threshold", "label": "Free Shipping - Threshold", "info": "Sets the threshold in your currency at which the shipping info elements in the cart will show and disappear", "default": 80 }, { "type": "text", "id": "aria_label_open_mini_cart", "label": "Aria Label - Open Mini Cart", "default": "Open Mini Cart" }, { "type": "text", "id": "aria_label_close_mini_cart", "label": "Aria Label - Close Mini Cart", "default": "Close Mini Cart" }, { "type": "text", "id": "aria_label_remove_product", "label": "Aria Label - Remove Product", "default": "Remove Product" }, { "type": "text", "id": "aria_label_increase_product_quantity", "label": "Aria Label - Increase Product Quantity", "default": "Increase Product Quantity" }, { "type": "text", "id": "aria_label_decrease_product_quantity", "label": "Aria Label - Decrease Product Quantity", "default": "Decrease Product Quantity" } ]