Using non-English characters in drop-down menus

Disclaimer: The tutorials in this section are provided 'as is'. Shopify Support and design gurus cannot help you implement and debug the solution described here. You and your programmers will be on your own if you decide to apply this solution. To get help with this, you should either post your questions in one of our Community forums, or hire a Shopify Expert.

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

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