Shopify Related Products
I was looking for a way to control the related products shown below a product (for cross-selling) without using an external app, and came up with a very basic and easy to use template and collection solution.
In the theme I am using the related products are taken from the same collection, which is a good start, but for some collections I would like to be able to select a set of products that I want to show below the products.
So for every collection that I want to display certain products, I create a new collection with the same name and _Related behind it. (so if the product collection is called Shoes, I will create a new collection Shoes_Related, and add the products I want to display below the shoes products to this collection)
In my related-products.liquid file, I will check if a collection with the same name and _Related exists:
{% assign relatedCollection = collection.title | append: '_Related'%}
{% if collections[relatedCollection] != blank and collections[relatedCollection].products_count > 0 %}
{% assign collection = collections[relatedCollection] %}
Now if no Related collection is found, I will revert back to the ‘normal’ behaviour, getting a few items from the same collection and displaying them:
{% else if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
So the complete code from my related-products.liquid looks like:
{% assign number_of_products = 3 %}
{% assign number_of_products_to_fetch = number_of_products | plus: 1 %}
{% assign relatedCollection = collection.title | append: '_Related'%}
{% if collections[relatedCollection] != blank and collections[relatedCollection].products_count > 0 %}
{% assign collection = collections[relatedCollection] %}
{% else if collection == null or collection.handle == 'frontpage' or collection.handle == 'all' %}
{% assign found_a_collection = false %}
{% for c in product.collections %}
{% if found_a_collection == false and c.handle != 'frontpage' and c.handle != 'all' and c.all_products_count > 1 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% endif %}
{% endfor %}
{% endif %}
{% if collection and collection.products_count > 1 %}
<section class="related-products">
<hr>
<h2 class="section-header__title h3">{{ 'products.general.related_products_title' | t }}</h2>
<div class="grid grid--uniform">
{% assign current_product = product %}
{% assign current_product_found = false %}
{% for product in collection.products limit: number_of_products_to_fetch %}
{% if product.handle == current_product.handle %}
{% assign current_product_found = true %}
{% else %}
{% unless current_product_found == false and forloop.last %}
{% include 'product-grid-item' %}
{% endunless %}
{% endif %}
{% endfor %}
</div>
</section>
{% endif %}