Writing a Shopify A-Z brands page

Introduction

In this tutorial, you’ll learn how to write a simple Liquid snippet that generates a page listing all brands, grouped and sorted by their first character.

Structure

Suppose you manage a website featuring car brands and want to display all brands grouped alphabetically. When a user clicks a brand, they should be redirected to its corresponding collection page.

To achieve this, we’ll create individual collections for each brand and use a custom metafield called abc_collection to filter only the relevant ones.

Model setup

1. Open Settings → Metafields and Metaobjects.
2. Navigate to Collections.
3. Add a definition for "ABC collection" of type "True or false":

We will use this attribute to get all the ABC collections.

Content setup

Create each brand collection and set field "ABC collection" to true. You will filter products using "conditions". The following is an example for all cars with Vendor (brand) BMW:

Theme setup

1. Go to Online Store → Themes → Customize.
2. From the top navigation, open the Pages section, then click Create a template. Name it AZ collection.
3. In the left sidebar, add a Custom Liquid block. On the right side, we will later insert our Liquid code.

Create the page

Under Online Store → Pages, create a new page and assign it the AZ collection template.

The code

In this case we use Tailwind theme. The classes should be changedbased on the CSS framework used (or you can write the CSS classes).

{% assign sorted_collections = collections | sort: 'title' %}

{% assign current_letter = '' %}

<div class="page-width grid-list products-list f-grid md:f-grid-3-cols xl:f-grid-3-cols f-grid-2-cols f-grid--gap-medium">
  {% for collection in sorted_collections %}
    {% if collection.metafields.custom.abc_collection != true %}
      {% continue %}
    {% endif %}

    {% assign first_letter = collection.title | slice: 0, 1 | upcase %}

    {% if first_letter != current_letter %}
      {% if current_letter != '' %}
        </div>
      {% endif %}
      <div class="f-column">
        <h3 style="margin-bottom: 1em;">{{ first_letter }}</h3>

        {% assign current_letter = first_letter %}
    {% endif %}

    <div style="margin-bottom: 0.5em;">
      <a href="{{ collection.url }}">{{ collection.title }}</a>
    </div>

    {% if forloop.last %}
      </div>
    {% endif %}
  {% endfor %}
</div>

Sorting adjustment

To ensure collections with uppercase titles don’t appear last, replace the sort method:

{% assign sorted_collections = collections | sort_natural: 'title' %}

Adding tags

You can enhance the collections with descriptive tags by using metafields.

Under Settings → Metafields and Metaobjects → Collections, create a metafield definition for tags:

Now add few tags:

We add again a new collection metafield definition for the tags on the collection referring to the tags (Metaobject, List of entries):

Now assign tags to the collections.

Code with tags

Include the following Liquid code to display tags next to each brand:

We could make multiple AZ pages by filtering on a tag. Each tag can have multiple tags (eg. Family, Luxury, Japanse) and we can provide for each tag a page.

{% assign sorted_collections = collections | sort_natural: 'title' %}

{% assign current_letter = '' %}

<div class="page-width grid-list products-list f-grid md:f-grid-3-cols xl:f-grid-3-cols f-grid-2-cols f-grid--gap-medium">
  {% for collection in sorted_collections %}
    {% if collection.metafields.custom.abc_collection != true %}
      {% continue %}
    {% endif %}

    {% assign first_letter = collection.title | slice: 0, 1 | upcase %}

    {% if first_letter != current_letter %}
      {% if current_letter != '' %}
        </div>
      {% endif %}
      <div class="f-column">
        <h3 style="margin-bottom: 1em;">{{ first_letter }}</h3>

        {% assign current_letter = first_letter %}
    {% endif %}

    <div style="margin-bottom: 0.5em;">
      <a href="{{ collection.url }}">{{ collection.title }}</a>

      <span class="abc-tag-list">
        {% for tag in collection.metafields.custom.abc_tags.value %}
          <span class="abc-tag">
            {{ tag.name }}
          </span>
        {% endfor %}
      </span>
    </div>

    {% if forloop.last %}
      </div>
    {% endif %}
  {% endfor %}
</div>

This will display the tags next to the brand names.

Add the following CSS under Custom CSS for tag styling:

.abc-tag {
  color: #6c757d;
  font-size: .9em;
  margin-left: .1em;
}

Group by tag

You could also make multiple pages filtering products of only a specific tag (here tag "Italian" with page title "Italian"):

{% assign sorted_collections = collections | sort_natural: 'title' %}

{% assign current_letter = '' %}
{% assign tag_name = 'Italian' %}

<div class="page-width grid-list products-list f-grid md:f-grid-3-cols xl:f-grid-3-cols f-grid-2-cols f-grid--gap-medium">
  {% for collection in sorted_collections %}
    {% if collection.metafields.custom.abc_collection != true %}
      {% continue %}
    {% endif %}

    {% assign found = false %}
    {% for tag in collection.metafields.custom.abc_tags.value %}
      {% if tag.name == tag_name %}
        {% assign found = true %}
        {% break %}
      {% endif %}
    {% endfor %}

    {% if found == false %}
      {% continue %}
    {% endif %}

    {% assign first_letter = collection.title | slice: 0, 1 | upcase %}

    {% if first_letter != current_letter %}
      {% if current_letter != '' %}
        </div>
      {% endif %}
      <div class="f-column">
        <h3 style="margin-bottom: 1em;">{{ first_letter }}</h3>

        {% assign current_letter = first_letter %}
    {% endif %}

    <div style="margin-bottom: 0.5em;">
      <a href="{{ collection.url }}">{{ collection.title }}</a>

      <span class="abc-tag-list">
        {% for tag in collection.metafields.custom.abc_tags.value %}
          <span class="abc-tag">
            {{ tag.name }}
          </span>
        {% endfor %}
      </span>
    </div>

    {% if forloop.last %}
      </div>
    {% endif %}
  {% endfor %}
</div>

Tip

Write your code in Visual Studio Code using the Shopify Liquid extension:

Auto-formatting is also supported.