Easy Collections
The Easy 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 havemywebsite.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 Easy Collections
link and tick the Create Vendor Collections
option.
Product Type Collections
To create a collection for each product type go to the Easy 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.