Related Products — to add to product.liquid
<!-- Solution brought to you by Caroline Schnapp -->
<!-- See this: https://docs.shopify.com/support/your-store/products/can-i-recommend-related-products#finding-a-relevant-collecitons -->
{% comment %}
Number of related items per row,
and number of rows.
{% endcomment %}
{% assign number_of_related_products_per_row = 4 %}
{% assign number_of_rows = 1 %}
{% comment %}
Heading.
Leave blank if you don't need one.
{% endcomment %}
{% assign heading = 'Other fine products' %}
{% comment %}
Set either or both to true, if you want
to limit yourself to items with same vendor, and/or type.
{% endcomment %}
{% assign same_vendor = false %}
{% assign same_type = false %}
{% comment %}
Collections to ignore.
Never pick related items from those.
{% endcomment %}
{% assign exclusions = 'frontpage,all' | split: ',' %}
{% comment %}
Looking for a relevant collection.
{% endcomment %}
{% if product.metafields.c_f['Related Products'] %}
{% assign collection = collections[product.metafields.c_f['Related Products']] %}
{% endif %}
{% assign found_a_collection = false %}
{% if collection and collection.all_products_count > 1 %}
{% unless exclusions contains collection.handle %}
{% assign found_a_collection = true %}
{% endunless %}
{% endif %}
{% unless found_a_collection %}
{% for c in product.collections %}
{% unless exclusions contains c.handle or c.all_products_count < 2 %}
{% assign found_a_collection = true %}
{% assign collection = c %}
{% break %}
{% endunless %}
{% endfor %}
{% endunless %}
{% comment %}
If we have a relevant collection.
{% endcomment %}
{% if found_a_collection %}
{% assign counter = 0 %}
{% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
{% assign current_product = product %}
{% case number_of_related_products_per_row %}
{% when 1 %}
{% assign grid_item_width = '' %}
{% when 2 %}
{% assign grid_item_width = 'large--one-half medium--one-half' %}
{% when 3 %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% when 4 %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
{% when 5 %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% when 6 %}
{% assign grid_item_width = 'large--one-sixth medium--one-third small--one-half' %}
{% else %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
{% endcase %}
{% capture related_items %}
{% for product in collection.products %}
{% unless product.handle == current_product.handle %}
{% unless same_vendor and current_product.vendor != product.vendor %}
{% unless same_type and current_product.type != product.type %}
{% include 'product-grid-item' %}
{% assign counter = counter | plus: 1 %}
{% if counter == break_at %}
{% break %}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% assign related_items = related_items | trim %}
{% unless related_items == blank %}
<aside class="grid">
<div class="grid__item">
{% unless heading == blank %}
<header class="section-header">
<h2 class="section-header__title">{{ heading }}</h1>
</header>
{% endunless %}
<div class="grid-uniform">
{{ related_items }}
</div>
</div>
</aside>
{% endunless %}
{% endif %}