Examples

Vendors

List all vendors

  {% if vendors.any? %} // Check if there are any Vendors added to the store
    <ul>
    {% for vendor in vendors %} // For loop to query all vendors that are available
      <li>
        {{ vendor.name }} // Display a vendor by a name
      </li>
    {% endfor %}
    </ul>
  {% endif %}

<ul>
  <li>Brand #1</li>
  <li>Brand #2</li>
  <li>Brand #3</li>
</ul>

Multi level dropdown navigation

{% if menu.links.any? or menu.children.any? %}
<ul>
  {% assign collection = menu.root_links %}
  {% if menu.children.any? %}
    {% assign collection = menu.children %}
  {% endif %}

  {% for link in collection %}
  <li>
    {% if link.url %}
      <a href="{{link.url}}">
        {{link.name}}
        {% if link.children.any? %}<i class="icon-arrow-dark"></i>{% endif %}
      </a>
    {% else %}
      <span>
        {{link.name}}
        {% if link.children.any? %}<i class="icon-arrow-dark"></i>{% endif %}
      </span>
    {% endif %}

    {% if link.children.any? %}
      {% include 'menu' with link %}
    {% endif %}

  </li>
  {% endfor %}
</ul>
{% endif %}

Language switcher

{% if shop.possible_languages.many? %}
  <li>
    <form action="" class="flex">
    <span class="relative text-sm mr-8 text-gray-300 hover:text-white inline-flex items-center cursor-pointer">
      <svg class="w-6 h-6 stroke-1.5 absolute left-0 pointer-events-none">
        <use href="#world"></use>
      </svg>
      {% assign current_language = shop.current_locale %}
      <select onchange="document.location.href = '/' + this.value + '{{ url.current_path }}'" name="language" id="language" class="h-6 appearance-none cursor-pointer bg-none bg-transparent inline-flex border-none p-0 pr-4 pl-6 font-medium text-sm text-gray-300 hover:text-white focus:ring-0">
        <option value="current_language" selected>{{ 'language.' | append: current_language | translate }}</option>
        {% for language in shop.possible_languages %}
          {% if language != current_language %}
            <option value="{{ language }}">{{ 'language.' | append: language | translate }}</option>
          {% endif %}
        {% endfor %}
      </select>
      <svg class="w-4 h-4 ml-0.5 stroke-3 absolute right-0 pointer-events-none">
        <use href="#chevron-down"></use>
      </svg>
    </span>
    </form>
  </li>
{% endif %}