Creating a multi-column, alphabetized vendor list in Shopify including inactive vendors

display-shopify-vendor-list-with-inactive-vendors.md

Adding inactive vendors to a multi-column, alphabetized vendor list in Shopify

This extends the multi-column, alphabetized vendor list in Shopify guide.

If all of the vendors you want to include in your vendor directory already have products assigned to them, that guide is simpler. If you want to include arbitrary vendor names that are not linked to any product in your store, this is the guide for you.

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.
• Include arbitrary vendors that do not necessarily appear on any products
• There should be no duplicate vendors on the frontend. A vendor should not show up as both active and inactive, regardless of how the admin has been configured.
• List items should be (in order of preference):
  1. A link to a collection that matches the vendor name
  2. A link to a Shopify built-in vendor page
  3. An inactive vendor name in plain text

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 linklist

Navigate to the Navigation section of your store (Online Store > Navigation) and click "Add menu". Name the menu "Inactive Vendors". The handle should pre-populate with inactive-vendors.

Note: It is important that the handle of this linklist matches exactly because that handle is hardcoded into the liquid template below. Save the linklist.

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.

Options:

• If you would like to customize the number of columns used to display your vendors, you can change the value of totalCols on line 28 of this template.
• The page layout relies on a string to separate vendor names. If the separator appears in any vendor name or in the inactive vendor linklist, it will break the layout. By default, the separator is a pipe character ("|"), but this can be changed on line 16 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.

Managing Inactive Vendors

You can add or remove inactive vendors from the Inactive Vendors linklist at any time. To add an inactive vendor, create a new list item by clicking "Add menu item". The name of the menu item will be treated as an inactive vendor. Shopify will not let you save a menu item with a blank link field, but the link value does not matter. I have used # as the link location but you could really link it to anything as it will not show up on the frontend of your site.

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.

Related

Original multi-column, alphabetized vendor list in Shopify guide

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>
	
      {% comment %}
      Create the array of vendor names by combining the contents of shop.vendors
      with the contents of linklists.inactive-vendors.
      {% endcomment %}
      {% assign sep = '|' %}
      {% assign vendors = '' %}
      {% for vendor in shop.vendors %}
      	{% assign vendor_name = vendor | upcase %}
      	{% assign vendors = vendors | append: vendor_name | append: sep %}
      {% endfor %}
      {% for link in linklists.inactive-vendors.links %}
      	{% assign vendor_name = link.title | upcase %}
        {% assign vendors = vendors | append: vendor_name | append: sep %}
      {% endfor %}
      {% assign vendors = vendors | split: sep | uniq | sort %}
      
      {% assign totalCols = 3 %}
      {% assign totalItems = 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_name: 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 vendor_collection_handle = vendor_name | handleize | strip | escape %}

{% assign collection_match = False %}
{% for collection in collections %}
	{% if vendor_collection_handle == collection.handle %}
		{% assign collection_match = collection %}
	{% endif %}
{% endfor %}

{% assign vendor_match = False %}
{% for vendor in shop.vendors %}
	{% assign comparable_vendor_name = vendor | upcase %}
	{% if comparable_vendor_name == vendor_name %}
		{% assign vendor_match = vendor %}
	{% endif %}
{% endfor %}

{% if collection_match %}
	<li class="vendor-list-item"><a href="{{ collection_match.url }}">{{ vendor_name }}</a></li>
{% elsif vendor_match %}
	<li class="vendor-list-item">{{ vendor_match | link_to_vendor }}</li>
{% else %}
	<li class="vendor-list-item">{{ vendor_name }}</li>
{% endif %}