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.

Unsupported Customization

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether or not to attempt it on your own.

There’s also a growing community on our forums - you’ll often find friendly and helpful advice there. You could also consider reaching out to a Shopify Expert to assist you with some of the more advanced customizations.

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.


Save Cancel