Shopify Development

Enhancing your e-commerce store with visually appealing elements can significantly boost its uniqueness and appeal. One effective way to achieve this is by adding images to your header’s navigation menu. In the world of e-commerce, engaging visuals are key to attracting and retaining customers. In this guide, I’ll walk you through the process of creating a custom header dropdown that showcases your collections with selected collection images. Let’s dive in!

*Note that in this tutorial I am using the Dawn theme.

Code: https://github.com/ndrishinski/blogs/commit/9b40135602ad5b5b7573ca870b6baed0485c3a7e

Prefer video?

Enjoy, otherwise read on!

Create a New Header Snippet

The first thing we are going to do is create a new snippet that we are going to reference in our Header section. In our code editor, we want to find the ‘snippets’ directory and add a new file called ‘dropdown-header-images.liquid’.

Now we want to paste all of this code into this empty file:

{% comment %}
  Renders a standard dropdown style menu for the header.

  Usage:
  {% render 'dropdown-header-images' %}
{% endcomment %}

<style>
  .header__submenu__parent {
    position: absolute;
    width: 100%;
    padding: 10px 5px;
    left: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;
    grid-gap: 4px;
  }

  .header__submenu__parent img {
    border-radius: 1em;
    box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));
  }

  .child_parent-1 {
    font-weight: 700;
  }

  .childlink-li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .grandchildren_links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in section.settings.menu.links -%}
      <li>
          <header-menu>
            <details id="Details-HeaderMenu-{{ forloop.index }}" style="position: static;">
              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  class="{%- if link.child_active %}header__active-menu-item{% endif %}"
                >
                  {{- link.title | escape -}}
                </span>
                {% render 'icon-caret' %}
              </summary>
              <ul
                id="HeaderMenu-MenuList-{{ forloop.index }}"
                class="header__submenu__parent header__submenu list-menu list-menu--disclosure color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
                role="list"
                tabindex="-1"
              >
                {%- for childlink in link.links -%}
                  <li class="childlink-li">
                    {{ childlink.object.image | image_url: width: 200 | image_tag }}
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="child_parent-1 header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                      </a>
                    {%- if childlink.links != blank -%}
                      <div class="grandchildren_links" id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
                          {%- for grandchildlink in childlink.links -%}
                            <div>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </div>
                          {%- endfor -%}
                      </div>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            </details>
          </header-menu>
      </li>
    {%- endfor -%}
  </ul>
</nav>

*Note this is assuming you have ‘dropdown’ menu selected in your header customizer settings. Otherwise replace whichever section is being used.

Make sure you click save. Now we need to reference this file in our ‘Header.liquid’ section file. Open that file and change this code:

render 'header-dropdown-menu' <!-- Replace this -->
render 'dropdown-header-images' <!-- with this -->

After clicking save, our code should be in place to show our images! Now we just need to create our navigation menu.

Create Navigation Menu

Under ‘Online Store’ -> ‘Navigation’ create a new menu with the same structure as seen below.

Assign Collection Images

Now we need to assign the image we actually want to show for each collection. To do this Navigate to ‘Products’ -> ‘Collections’ in the side panel of the dashboard and select an image for each collection that you’ve added to your navigation menu:

Assign New Navigation Menu in Customizer

Now open the theme’s customizer, and select our newly created menu in the ‘Header’ settings:

Conclusion

Now when you view your theme’s preview you will see a beautiful dropdown menu showcasing your collection image with nested hyperlinks! I hope this tutorial has been helpful and stay tuned for more Shopify development content!