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

Information

If your Theme is "Translation-ready", you should follow the simplified translation process instead. How do I know if my Theme is "Translation-ready?"

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.