Shopify Venture Theme Related products snippet

related-products.liquid

{% assign number_of_related_products_per_row = 4 %}
{% assign number_of_rows = 1 %}
{% assign heading = 'You will also love' %}
{% assign same_vendor = false %}
{% assign same_type = false %}
{% assign exclusions = 'frontpage,all' | split: ',' %}
{% 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 %}
{% 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 %}
            <div class="grid__item small--one-half medium-up--one-quarter">
             {% include 'product-card', product: product %}
            </div>
             {% 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="page-width">
      {% unless heading == blank %}
      <header class="grid medium-up--grid--table section-header small--text-center">
        <h2 class="section-header__title">{{ heading }}</h2>
      </header>
      {% endunless %}
      <div class="grid grid--no-gutters grid--uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>
  {% endunless %}
{% endif %}

Great! Thank you mate!

That helped me out also, Thanks!

good

You've saved me a great deal of time. Thanks for sharing this!

Thanks for sharing, works great!

Hi, Can anyone help? The code works great accept the spacing between the title and the related products is too wide. How can I make the spacing less?

Would really appreciate any help.
thanks

Quick question, would you know how i can change the below to make it show a maximum of only 4 related products?

{% if settings.display_related_products %}
{% capture limit %}{{ settings.products_per_row | plus: 1 }}{% endcapture %}

{% if collection and collection.all_products_count > 4 %}
  {% assign col = collection.handle %}
{% else %}
  {% assign col = product.collections.last.handle %}
{% endif %}

{% for tag in product.tags %}
  {% if tag contains 'meta-related-collection-' %}
    {% assign col = tag | remove: 'meta-related-collection-' %}
    {% assign collection = collections[col] %}
    {% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}
  {% endif %}
{% endfor %}
  
{% if col and collections[col].all_products_count > 0 %}
  <br class="clear" />
  <br class="clear" />
  <h4 class="title center">{{ 'products.product.related_items' | t }}</h4>

{% assign skip_product = product %}
  {% assign products = collections[col].products %}
  {% assign products_per_row = settings.products_per_row %}
  {% include 'product-loop' with settings.product_sidebar %}
{% endif %}