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