Adding navigation above collection?

[Cassy_013]

Hi, does anyone have an idea how to add a navigation above collection products (see picture).

[Maximus3]

That is called a Breadcrumb, and depending on your theme, it may or may not be available by default. If not, you can follow this tutorial, or download an app from the App Store:

How To Add Breadcrumbs In Shopify-Free Without APP-[2024] - WebSensePro

[RLJackson]

(sorry, I realized after posting that you meant on the collection page – can’t help you there!)

[scaleforge]

Hi, yes you can add a navigation menu above your collection products. The approach depends a bit on your theme, but here are two common ways to do it:

1. Using the Theme Editor (no code if supported)

• Go to Online Store > Themes > Customize

• Open your collection template

• See if your theme lets you add a “Navigation” or “Menu” block/section above the product grid. Some themes have this as a built-in option.

2. Adding it manually in the code

• Go to Online Store > Themes > Edit code

• Open templates/collection.liquid or sections/main-collection-product-grid.liquid (depends on theme)

• Insert this snippet where you want the navigation to appear (usually above the product grid):

{% render 'menu', menu: linklists['main-menu'] %}

Replace 'main-menu' with the handle of the menu you want to show (you can find this under Navigation in the Shopify admin).

If your theme doesn’t have a menu snippet, you can use:

<ul>
  {% for link in linklists['main-menu'].links %}
    <li><a href="{{ link.url }}">{{ link.title }}</a></li>
  {% endfor %}
</ul>

That will display your chosen navigation menu above the collection products.

If you’d like, I can show you exactly where to place the code in your theme files so it looks clean. Just let me know which theme you’re using, or feel free to email me at masteraibrahim68@gmail.com and I’ll guide you step by step.

[Small_Task_Help]

@Cassy_013

Hi, does anyone have an idea how to add a navigation above collection products (see picture).

Hi,

Hope this will help

• Create a section so you can pick the menu in the Theme editor
• Create a new file: sections/collection-top-nav.liquid. and add following code

Code example

{% comment %} Section: Collection top navigation (select menu in Theme editor) {% endcomment %}

<div class="collection-top-nav-section">
  {% if section.settings.heading != blank %}
    <h3 class="collection-top-nav-heading">{{ section.settings.heading }}</h3>
  {% endif %}

  {% if section.settings.menu != blank %}
    {% assign menu = linklists[section.settings.menu] %}
    {% if menu and menu.links.size > 0 %}
      <nav class="collection-top-nav" aria-label="Collection navigation">
        <ul class="collection-top-nav__list">
          {% for link in menu.links %}
            <li class="collection-top-nav__item">
              <a href="{{ link.url | escape }}" class="collection-top-nav__link">{{ link.title }}</a>
            </li>
          {% endfor %}
        </ul>
      </nav>
    {% endif %}
  {% endif %}
</div>

{% schema %}
{
  "name": "Collection top navigation",
  "settings": [
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading (optional)",
      "default": ""
    }
  ],
  "presets": [
    {
      "name": "Collection top navigation"
    }
  ]
}
{% endschema %}

• Now open Online Store → Customize (Theme editor). Select a Collection template from template dropdown.

• Click Add section and choose Collection top navigation (section you just added). Place it above product grid block in left sidebar.

• In the section settings pick the menu you created earlier from dropdown and save.

[oscprofessional]

@Cassy_013

Hi, does anyone have an idea how to add a navigation above collection products (see picture).

Hi @Cassy_013

1. Create a new section (e.g. sections/breadcrumbs.liquid).
2. Put the breadcrumb code inside it:

<style>
  .breadcrumbs {
    margin: 0 0 2em;
  }

  .breadcrumbs__list {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumbs__item {
    display: inline-block;
  }

  .breadcrumbs__item:not(:last-child):after {
    border-style: solid;
    border-width: .10em .10em 0 0;
    content: '';
    display: inline-block;
    height: .20em;
    margin: 0 .20em;
    position: relative;
    transform: rotate(45deg);
    vertical-align: middle;
    width: .20em;
  }

  .breadcrumbs__link {
    text-decoration: underline;
  }

  .breadcrumbs__link[aria-current="page"] {
    color: inherit;
    font-weight: normal;
    text-decoration: none;
  }

  .breadcrumbs__link[aria-current="page"]:hover,
  .breadcrumbs__link[aria-current="page"]:focus {
    text-decoration: underline;
  }
</style>

{%- unless template == 'index' or template == 'cart' or template == 'list-collections' or template == '404' -%}
{%- assign t = template | split: '.' | first -%}

<nav class="breadcrumbs" role="navigation" aria-label="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a class="breadcrumbs__link" href="/">Home</a>
    </li>
    {%- case t -%}
      {%- when 'page' -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ page.url }}" aria-current="page">{{ page.title }}</a>
        </li>
      {%- when 'product' -%}
        {%- if collection.url -%}
          <li class="breadcrumbs__item">
            {{ collection.title | link_to: collection.url }}
          </li>
        {%- endif -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ product.url }}" aria-current="page">{{ product.title }}</a>
        </li>
      {%- when 'collection' and collection.handle -%}
        {%- if current_tags -%}
          <li class="breadcrumbs__item">
            {{ collection.title | link_to: collection.url }}
          </li>
          <li class="breadcrumbs__item">
            {%- capture tag_url -%}{{ collection.url }}/{{ current_tags | join: "+"}}{%- endcapture -%}
            <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + "}}</a>
          </li>
        {%- else -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ collection.url }}" aria-current="page">{{ collection.title }}</a>
          </li>
        {%- endif -%}
      {%- when 'blog' -%}
        {%- if current_tags -%}
          <li class="breadcrumbs__item">
            {{ blog.title | link_to: blog.url }}
          </li>
          <li class="breadcrumbs__item">
            {%- capture tag_url -%}{{blog.url}}/tagged/{{ current_tags | join: "+" }}{%- endcapture -%}
            <a class="breadcrumbs__link" href="{{ tag_url }}" aria-current="page">{{ current_tags | join: " + " }}</a>
          </li>
        {%- else -%}
          <li class="breadcrumbs__item">
            <a class="breadcrumbs__link" href="{{ blog.url }}" aria-current="page">{{ blog.title }}</a>
          </li>
        {%- endif -%}
      {%- when 'article' -%}
        <li class="breadcrumbs__item">
          {{ blog.title | link_to: blog.url }}
        </li>
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ article.url }}" aria-current="page">{{ article.title }}</a>
        </li>
      {%- else -%}
        <li class="breadcrumbs__item">
          <a class="breadcrumbs__link" href="{{ request.path }}" aria-current="page">{{ page_title }}</a>
        </li>
    {%- endcase -%}
  </ol>
</nav>
{%- endunless -%}

3. After saving, go to Online Store → Customize, open the Collection page template, and add the new Breadcrumbs section wherever you want it (above products, under banner, etc.).