advanced Advanced tutorials require advanced knowledge of web design concepts and languages such as HTML, CSS, JavaScript and Liquid.

We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial.

Using non-English characters in drop-down menus

If the name of your linklist uses the Arabic, Hebrew or Cyrillic alphabet, or is in Chinese or Japanese, your Shopify theme might be unable to find your drop-down menu.

Use this liquid code for your main navigation (either in theme.liquid or called from it using an include statement):

<nav role="navigation">  
  <ul id="nav">
    {% for link in linklists.main-menu.links %}
    {% assign has_drop_down = false %}
    {% assign child_list_handle = link.title | handle %}
    {% comment %}If the link uses the arabic, hebrew or cyrillic alphabet, or is in Chinese or Japanese, the handle will be empty.{% endcomment %}
    {% if child_list_handle == '' %}
      {% for i in (0..8) %}
        {% unless has_drop_down %}
          {% if forloop.first %}
            {% assign temp = 'link-list' %}
          {% else %}
            {% capture temp %}link-list-{{ i }}{% endcapture %}
          {% endif %}
          {% if linklists[temp] and linklists[temp].links.size > 0 and linklists[temp].title == link.title %}
            {% assign has_drop_down = true %}
            {% assign child_list_handle = temp %}
          {% endif %}
        {% endunless %}
      {% endfor %}  
    {% else %}
      {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
        {% assign has_drop_down = true %}
      {% endif %}
    {% endif %}
    <li class="nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}{% if link.active %} active{% endif %}{% if has_drop_down %} dropdown{% endif %}">
      <a class="nav-item-link smooth" href="{{ link.url }}">
        {{ link.title }}
      </a>
      {% if has_drop_down %}
      <ul class="sub-nav">
        <li class="sub-nav-niblet"></li>
        {% for l in linklists[child_list_handle].links %}
        <li class="sub-nav-item{% if forloop.first %} first{% elsif forloop.last %} last{% endif %}">
          <a class="sub-nav-item-link {% if forloop.first %}first{% endif %} {% if forloop.last %}last{% endif %}" href="{{ l.url }}">{{ l.title }}</a>
        </li>
        {% endfor %}
      </ul>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</nav>

View the full code here: https://gist.github.com/f95b1e4d0f9401ce6d20

The part of the code that locates a drop-down menu is:

{% assign has_drop_down = false %}
{% assign child_list_handle = link.title | handle %}
{% comment %}If the link uses the arabic, hebrew or cyrillic alphabet, or is in Chinese or Japanese, the handle will be empty.{% endcomment %}
{% if child_list_handle == '' %}
  {% for i in (0..8) %}
    {% unless has_drop_down %}
      {% if forloop.first %}
        {% assign temp = 'link-list' %}
      {% else %}
        {% capture temp %}link-list-{{ i }}{% endcapture %}
      {% endif %}
      {% if linklists[temp] and linklists[temp].links.size > 0 and linklists[temp].title == link.title %}
        {% assign has_drop_down = true %}
        {% assign child_list_handle = temp %}
      {% endif %}
    {% endunless %}
  {% endfor %}  
{% else %}
  {% if linklists[child_list_handle] and linklists[child_list_handle].links.size > 0 %}
    {% assign has_drop_down = true %}
  {% endif %}
{% endif %}

The key pieces of information in the above code are:

  • has_drop_down, a boolean
  • child_list_handle, the handle of the drop-down menu
This customization is not supported by our Shopify Gurus. Learn more ›

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.