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

...thank you. not sure what happened, but the height seemed to self resolved after I walked away for a lil bit....hmmm.

What does "trim" do on line 101. I can't see this tag mentioned in the Shopify docs or liquid cheatsheet.

Small tiny typo Caroline...

<h2 class="section-header__title">{{ heading }}</h1>

Should be

<h2 class="section-header__title">{{ heading }}</h2>

Adapted the code for Venture theme in case if somebody needs:

https://gist.github.com/hhayrapetyan/bb697ae50169da8ba500

Things are pretty good but the problem is, all products aren't in a row but one big box and showing in a column.
Little help with this issue. Here is the page; http://eevamarita.com/products/leila-cardigan

Hello,

I used this code and it works really well - so thanks.
I have a couple of questions about it.
Can be changed so the related products are randomised ?#
Also can it be used in the cart of my shopify page?

Thanks!

hello
I created the new snippet related-products.liquid adding the code in the top , than I've added {% include 'related-products' %} at the end of product.liquid file but It seems it doesn't work . The response in the front page is:
Liquid error: Could not find asset snippets/related-products.liquid
can anyone give me suggestion to solve it?
thanks

Hi, Great gigs but i have an issu with brooklyn theme, the background height of the images being way too tall.

Any idea how to fix that ?

Althought is it possible to change the size of the title "Other fine products" ?

Thanks !

Hi,this code is very useful for us, along with recommend products,i need vendors product lists code that should be display bottom of the recommend products.

Thanks

Thanks for the snippet! Just to let you know, there's an HTML error on line 109, the header opens with a h2 tag and closes with a h1.

<h2 class="section-header__title">{{ heading }}</h1>

Awesome!! This saved me a lot of time!

Hi,
after using this code on top, related products started appearing but images are very large and 4 images apperaing in 4 rows instead of one.
I am uhing boundless theme.
Please help.
Thanks

how would i change the html output of your snippet?

Quick question, i have tried implementing the above to the code below but without any luck. How would i go about changing the code below to only display a maximum of 4 random from the collection chosen?

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

Guys need little help can somebody tell me how can i use tag based related products for shopify booster theme!
HERE IS THE CODE:

{% 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 = 'Related 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-new' %}
{% 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 %}

{% unless heading == blank %}

{{ heading }}

{% endunless %}

{{ related_items }}

{% endunless %}

{% endif %}

successful! Thank alot!
But it only list related product from 1 collection. How to make it list related product from multiple collections?
Example product A belongs to collection C and D. How can I list all products from C & D collections as A's related products?

Same question as already asked 3x above: Please: how to randomize to products? I always get the 3 same products form 1 collection. No matter which product I show, the "related products" are always exactly the same

Hello,
after using this code on top, related products started appearing but images are very large and 4 images appearing in 4 rows instead of one.
How can i resolve? Please help.
Thanks

Hello guys, have the same problem using this code on Debut theme
"Liquid error: Could not find asset snippets/product-grid-item.liquid Liquid error: Could not find asset snippets/product-grid-item.liquid Liquid error: Could not find asset snippets/product-grid-item.liquid Liquid error: Could not find asset snippets/product-grid-item.liquid"

Is there anyone could help me to solve it?

Hello everyone,
I used the code on my venture theme and it is working properly, but I need to have for each product its own related products.
i.e. for a product called pants, I need as related products a shirt and shoes that matches the pants.
Can you please advise what is the suitable code for that.
Thank you

I used the code on my Shopify Debut theme but Related Products instead of coming in a row coming in column, and the image size is too big. How to fix it?

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!