Auto Collections

The Auto Collections feature enables you to create collections for each vendor and product type. There are a number of advantages in doing this including:

  • Creating search engine and user friendly URLs, instead of mywebsite.com/collections/vendors?q=oakley you can have mywebsite.com/collections/oakley, which as shorter, more readable and uses simple characters.
  • Improving SEO by allowing each vendor or product type to have an image and description
  • Improve user experience by showing the brand logo for a vendor
  • Ability to change the sort order for differing vendors or product types

Vendor Collections

To create a collection for each vendor go to the Auto Collections link and tick the Create Vendor Collections option.

Product Type Collections

To create a collection for each product type go to the Auto Collections link and tick the Create Product Type Collections option.


Creating a menu for each vendor and product type

Often you would want to list each vendor in a menu, and likewise with each product type. Shopify allows this using the {% shop.vendors %} list and the {% shop.type %} list, however the links created using link_to_vendor and link_to_type will still point to the old method.

The fix requires some code change in your theme, however this is quite straightforward.

A basic version to list all the vendor collections in a list is as follows:

<ul>
  {% for product_type in shop.types %}
  {% assign type_handle = product_type | handleize %}
  {% assign type_collection = collections[type_handle] %}
  <li class="{% if product.type == product_type %}current{% endif %}">
    {% if type_collection == empty %}{{ product_type | link_to_type  }}
    {% else %}{{ type_collection.title | link_to: type_collection.url }}
    {% endif %}
  </li>
  {% endfor %}
</ul>

A more complex version, showing the collection count, marking of the last collection, and if the current collection intersects with the type collection, is as follows:

<ul>
  {% assign all_type_list = (collection.all_types | join: ', ' ) %}
  {% for product_type in shop.types %}
  {% assign type_handle = product_type | handleize %}
  {% assign type_collection = collections[type_handle] %}
  <li class="{% if all_options and all_type_list contains product_type %}active{% endif %} {% if product.type == product_type %}current{% endif %} {% if forloop.last %}last{% endif %}">
    {% if type_collection == empty %}{{ product_type | link_to_type  }}
    {% else %}{{ type_collection.title | link_to: type_collection.url }}
    {% endif %}
      <span class="collection-count">({{ type_collection.all_products_count }})</span>
  </li>
  {% endfor %}
</ul>

Similarly to list each of the vendors:

<ul>
  {% for product_vendor in shop.vendors %}
  {% assign vendor_handle = product_vendor | handleize %}
  {% assign vendor_collection = collections[vendor_handle] %}
  <li class="{% if product.vendor == product_vendor %}current{% endif %}">
    {% if vendor_collection == empty %}{{ product_vendor | link_to_vendor  }}
    {% else %}{{ vendor_collection.title | link_to: vendor_collection.url }}
    {% endif %}
  </li>
  {% endfor %}
</ul>

Customising the sort order

The code above will list the vendor and type collections in alphabetical order. If you wish to change that you have to use a link list and manually link to each collection due to a limitation in the Shopify API.