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 %}