January 29, 2022

Shopify header menu

Almost all stores have a predefined default menu called “main-menu” which is we are using in default schema as you can see in schema section.

Not lets start outputting all the items from the “Main Menu” . Now we need a loop for get all the menu item from menu for this thing we first take a variable “link” ({% for link in%}) as you can see in for loop.

In this example you will see url and link.

{{link.url}} => will output the url.
{{link.title}} => will output the link text.

<!doctype html>
<html>
<head>
  <title>{{ page_title }}</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="description" content="{{ page_description | escape }}">
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  {{ content_for_header }} <!-- Header hook for plugins -->
  {{ 'application.js' | asset_url | script_tag }}
  {{ 'custom.css' | asset_url |  stylesheet_tag }}
</head>
<body> 
  <main role="main">
    {% section 'announcement' %}
    {% section 'header' %}
    {{ content_for_layout }}
  </main>
   </script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *