Create Navigation Menus

Nested navigations are a popular solution for organizing collections, products, and pages effectively. A Shopify link list is a simple collection of links. Or product within Shopify, or to a URL outside of the store’s domain. Link lists are used for a variety of different use cases. In this tutorial, we’ll cover how to use link lists in a Shopify theme.  To create nested navigation using an unordered list. By using link lists and Liquid, we will have full control over the menu from the admin.  Giving flexibility to the merchant running the store. Grow your business with the Shopify Partner Program. Whether you offer marketing, customization, or web design and development services. The Shopify Partner Program will set you up for success.

Join for free and get access to revenue sharing opportunities, tools to grow your business, and a passionate  Australia WhatsApp Number List Create a development store Before we begin, let’s set up a development store that we can work with. That way we can test, break, and fix things as we build.  And once we’re happy with our code, we can move it into production. Create a nested navigation In 2017.  Shopify added the ability to create a nested navigation menu.  Up to three levels deep from a single page, by using a new menu editing interface.   And each menu’s identifier to link it to its parent menu link. As of this writing, all newly created stores have the new.

Start Nesting Those Menus!

While it’s common to include the navigation in a layout file, the default is theme.liquid, you can try the concept of nested navigation in any template. Create navigation menus We’ll start by creating a new menu, our main menu, by heading to the Navigation tab in Shopify Admin, which is located below the Online Store link in the sidebar. All new stores have a predefined default menu called “Main Menu”. To add items to the list, simply click the Add Another Link button and give your new item a “link name” and destination. The selection dropdown will allow you to easily link to internal sections, such as a particular product or collection. Alternatively, you can enter your own URL (either internal or external) by choosing “web address” from the options.

Australia WhatsApp Number List

You can drag and drop nested menu items to create multi-level navigation and, with some JavaScript and CSS, easily style it into a “super menu” or “drop down menu”. exit menu To generate the menu in a theme file, we’ll need to know the identifier of the menu. Identifiers are unique identifiers within Shopify for products, collections, link lists, and pages. Let’s start with the output of all the main menu link list items . We can use a simple loop forthat we’ve used many times before to generate the link list items in turn: The key to pay attention to here is the for loop that has been wrapped around each <li>. {% for link in linklists .main-menu.links %} We are using the linkvariable to hold the data related to each item in the link list, as we loop through all the items.

Multi-level Navigation

To access the data of link, we need to access all of the linksin the list of links with an identifier of main-menu, thus linklists.main-menu.links. Remember, the default main menu that exists in a Shopify store has the id of main-menu, so it’s used above. If our menu had an identifier of social-media, the syntax would be refactored as: Each link element has properties that include: urls qualification In the example above,it will generate the URL that we enter or generate in Shopify Admin, and it will generate the link text specific to that URL. You may also be interested in: How to manipulate images with the img_url filter. Multi-level navigation Now that we have the basic Liquid structure for a single level menu.

Leave a comment

Your email address will not be published.