Related Products — to add to product.liquid

related-products.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 %}

I was able to center the title text on the page, but the items and the horizontal line above the text are still aligned to the left. Can anyone help please?! Thanks!

please check this source
{% capture related_items %} {% for product in collection.products %}

You just got maximum 50 products only... Do you have solution to get all products of collection?

Hi,

I have Supply theme and the Heading ({% assign heading = 'Other fine products' %}) cuts off on the left hand side of my mobile website, as well as the related products on the left-hand side.
It will read something like 'ther fine products', with the 'O' and part of the 't' cut off.
Is there a way to fix this?

Hello i have a issue with related-products.liquid file i created in my shopify store.

i have use the follow method to create related products section

https://help.shopify.com/themes/customi ... d-products

The code i pasted into my store's related-products.liquid file is the follow

https://gist.githubusercontent.com/sadi ... ts.liquid#

Although I have set it to show 4 items on a row (1 row) but that i can see is 4 items vertical. For mobile devices looks ok but on the desktop no.

Can you help me to with the code to make my related products on a row and not vertical ? Thank you in advance

Hi Caroline,

I was wondering if this would work with the current theme I have?

www.shopskiesareblue.com

Thank you

work for booklyn theme in my site https://www.malldallas.com/products/2018-new-women-cat-eye-sunglasses
. thank you for your code

Hello, Caroline!
Thank You! All works for me.
But in your code(line 109: "<h2 class="section-header__title">{{ heading }}</h1>"), opening tag - h2, closing tag - h1.

How do I recommend products just for a particular collection? For example my site has collections tv, mobile ,etc. But I want to recommend similar products just in mobile collections and not recommend products in other collections. How do I do this?

Thanks it works perfect!