Creating a multi-column, alphabetized vendor list in Shopify

display-shopify-vendor-list.md

Creating a multi-column, alphabetized vendor list in Shopify

This turned out to be more difficult than I expected, so I am documenting how I accomplished it here.

Requirements

• Responsive, multi-column layout
• Alphabetical order from top-to-bottom and then left-to-right.
• Columns should be the same length. If the vendors cannot be split evenly across columns, the extra items should be spread across the left-most columns.
• Links should point to a collection for the vendor if one exists, otherwise point to a Shopify built-in vendor page

It is simpler (and easier to find tutorials online) if you would rather have your vendors ordered from left-to-right and then top-to-bottom. This guide, which I adapted the vendor-list-item.liquid snippet from, does a good job for that scenario.

Example

Vendor A     Vendor E     Vendor H
Vendor B     Vendor F     Vendor I
Vendor C     Vendor G     Vendor J
Vendor D

Notes

• The liquid markup in this gist is compatible with the Debut Shopify theme. You may have to change certain class names to comply with the naming conventions of your chosen grid system.
• It is recommended to create a duplicate of your theme as a backup before trying to follow this guide!

Tutorial

Create a new page layout

Navigate to your theme's code editor (Online Store > Themes > Actions > Edit Code).

In the theme code editor, click "Add a new template". Shopify will prompt you to select a template type and name your template. You will need to select the page template type. I chose to name my template vendors.

Copy the contents of page.vendors.liquid from below, paste them into the new file in the code editor, and save the file.

Optional: If you would like to customize the number of columns used to display your vendors, you can change the value of totalCols on line 12 of this template.

Create a vendor list item snippet

In the same theme code editor, click "Add a new snippet" and name it vendor-list-item.liquid. Copy the contents of vendor-list-item.liquid from below, paste them into the new file in the code editor, and save the file.

Create a page using the new layout

Navigate to the pages screen (Online Store > Pages) and click "Add page". Name the page whatever you would like.

On the right-hand side of the add page screen, there will be a dropdown to select a page template. Select the page.vendors template that you just created. Save the page.

That's it! You can use the page you created in a Shopify menu (or anywhere else) just like you would include any other page.

Sources

vendor-list-item.liquid adapted from this guide

page.vendors.liquid

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
      
      {% assign totalCols = 3 %}
      {% assign totalItems = shop.vendors | size %}
      {% assign remainingCols = totalCols %}
      {% assign remainingItems = totalItems %}
      {% assign itemsToOutput = remainingItems | times: 1.0 | divided_by: remainingCols | ceil %}
      
      <div class="grid">
        {% for i in (1..totalCols) %}
          <div class="grid__item medium-up--one-third">
            <ul>
              {% for j in (1..itemsToOutput) %}
              	{% assign ind = totalItems | minus: remainingItems %}
              	{% include 'vendor-list-item', vendor: shop.vendors[ind] %}
              	{% assign remainingItems = remainingItems | minus: 1 %}
              {% endfor %}
            </ul>
          </div>
        {% if remainingItems == 0 %}
	        {% break %}
        {% endif %}
        {% assign remainingCols = remainingCols | minus: 1 %}
        {% assign itemsToOutput = remainingItems | times: 1.0 | divided_by: remainingCols | ceil %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>

vendor-list-item.liquid

{% assign match = False %}
{% assign vendor_collection_handle = vendor | handleize | strip | escape %}

{% for collection in collections %}
	{% if vendor_collection_handle == collection.handle %}
		{% assign match = true %}
	{% endif %}
{% endfor %}

{% if match %}
	<li class="vendor-list-item"><a href="/collections/{{ vendor_collection_handle }}">{{ vendor }}</a></li>
{% else %}
	<li class="vendor-list-item">{{ vendor | link_to_vendor }}</li>
{% endif %}

@marioloncarek @shopifypartners

how I can get vendors, group by alphabetical letters