Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Related Products — to add to product.liquid
@ismailunal

This comment has been minimized.

Copy link

commented Feb 7, 2013

How can I exclude lets say "mixed" collection from this "related-products" ? Imagine that there is a product under "monotype" and "mixed" collections. And I would like to remove "mixed" collection from above code.

@carolineschnapp

This comment has been minimized.

Copy link
Owner Author

commented May 15, 2013

@ismailunal Edit lines no 10 and 13 to add your exclusion there.

@savagedesignstudio

This comment has been minimized.

Copy link

commented Jun 27, 2014

How would this be centered?

@homerjam

This comment has been minimized.

Copy link

commented Oct 30, 2014

Thanks!

@homerjam

This comment has been minimized.

Copy link

commented Oct 31, 2014

Here is an alternative based on tags/scoring:

To use it make collection of all products using stock > -1 called 'related', then this snippet loops through and finds products with matching tags greater than score.

{% assign product_limit = 4 %}
{% assign score = 2 %}
{% assign image_size = 'compact' %}
{% assign all_collection = 'related' %}
{% assign heading = 'You may also like' %}

{% for c in product.collections %}
  {% if c.handle == all_collection %}
    {% assign collection = c %}
  {% endif %}
{% endfor %}

{% if collection and collection.products_count > 1 %}
  <h3>{{ heading }}</h3>
  <ul class="related-products">
  {% assign i = 0 %}
  {% assign current_product = product %}
  {% assign current_product_tags = current_product.tags | join: ' ' %}
  {% for product in collection.products %}

    {% assign s = 0 %}
    {% for tag in product.tags %}
      {% if current_product_tags contains tag %}
        {% assign s = s | plus: 1 %}
      {% endif %}
    {% endfor %}

    {% if s > score and i < product_limit and current_product.handle != product.handle %}
      {% assign i = i | plus: 1 %}

        <li>
          <div class="image">
            <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
              {{ product.featured_image | product_img_url: image_size | img_tag }}
            </a>
          </div>
          <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
          <span class="money">{{ product.price | money }}</span>
        </li>

    {% endif %}

  {% endfor %}
  </ul>
{% endif %}

<style type="text/css">
.related-products { list-style-type:none }
{% case image_size %}
{% when 'small' %}
.related-products * { font-size:12px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.3 }
.related-products div.image { height:100px }
.related-products li { float:left; width:120px; height:160px; margin-right:20px }
{% when 'compact' %}
.related-products * { font-size:13px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:5px 0 0 0; line-height:1.5 }
.related-products div.image { height:160px }
.related-products li { float:left; width:180px; height:220px; margin-right:25px }
{% when 'medium' %}
.related-products * { font-size:14px; text-align:center; padding:0 }
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.8 }
.related-products div.image { height:240px }
.related-products li { float:left; width:260px; height:300px; margin-right:25px }
{% endcase %}
.related-products { overflow:hidden }
.related-products span.money { font-size:0.8em }
.related-products li:last-child { margin-right:0 }
</style>
@jhk519

This comment has been minimized.

Copy link

commented Dec 31, 2014

@savagedesignstudio

What I did was add a div wrapped around the ul and text-align:center styled its contents and altered the rest of the CSS accordingly, e.g the width and margin.

@jhk519

This comment has been minimized.

Copy link

commented Dec 31, 2014

<div class='relProductsDiv'> 
 <ul class="related-products">
  {% assign current_product = product %}
  {% assign current_product_found = false %}
  {% for product in collection.products limit: number_of_related_products_to_fetch %}
    {% if product.handle == current_product.handle %}
       {% assign current_product_found = true %}
    {% else %}
       {% unless current_product_found == false and forloop.last %}
       <li>
          <div class="image">
            <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
            {{ product.featured_image | product_img_url: image_size | img_tag }}
            </a>
          </div>
          <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
          <span class="money">{{ product.price | money }}</span>
        </li>
       {% endunless %}
    {% endif %}
  {% endfor %}
  </ul>
</div>

STYLING:

{% when 'medium' %}
 .relProductsDiv * {text-align:center}
 .related-products * { font-size:14px}
.related-products h4  { border:none; margin:10px 0 0 0; line-height:1.8}
.related-products div.image { height:240px}
.related-products li { width:33%; margin:auto;  list-style-type: none; display:inline-block}
@jhk519

This comment has been minimized.

Copy link

commented Dec 31, 2014

I've also made some code to allow you to cross-reference any products you find in the collection with another target collection. For example, in this example, if you'd like to find any products in the collection that are also part of your Best 50 selling collection.

{% for product in collection.products %}
    {% assign current_product_found = false %}
    {% assign isBestSeller = false %}

    {% for colls in product.collections %}
        {% if colls.handle == 'best-50'%}
            {% assign isBestSeller = true %}
        {% endif %}
    {% endfor %} 

    {% if product.handle == current_product.handle %}
       {% assign current_product_found = true %}

    {% else %}
       {% if isBestSeller == true and numFound < 3 %}
       <li>
          <div class="image">
            <a href="{{ product.url | within: collection }}" title="{{ product.title | escape }}">
            {{ product.featured_image | product_img_url: image_size | img_tag }}
            </a>
          </div>
          <h4><a href="{{ product.url }}" title="{{ product.title | escape }}">{{ product.title }}</a></h4>
          <span class="money">{{ product.price | money }}</span>
        </li>
        {% assign numFound = numFound | plus:1 %}
        {% endif %}
    {% endif %}
  {% endfor %}
@JulianProtean

This comment has been minimized.

Copy link

commented Mar 3, 2015

Hi, for some reason instead of getting the related products displaying. I get the follow error message:

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

Not sure why, can anybody help?

@jhk519

This comment has been minimized.

Copy link

commented Mar 9, 2015

@JulianProtean

If I recall correctly, you will get that error if you forgot to put the quotation marks around your snippet.

So Im guessing you did {% include product-grid-item %}

instead of {% include 'product-grid-item' %}

OR

You put the .liquid extension on there, which you shouldn't.

So, if you did this: {% include 'product-grid-item.liquid' %}, this is wrong

@oatbag

This comment has been minimized.

Copy link

commented Mar 29, 2015

If I wanted to hack this snippet and make the related products collection always use 1 collection, for all products, say the collection handle being "mixed-products" how could I modify this code to that end?
I tried setting {% assign collection = c %} to {% assign collection = mixed-products %} with no success, help! and thanks

@suture

This comment has been minimized.

Copy link

commented Jun 4, 2015

On line 109 the heading starts with a h2 and ends with a h1
https://gist.github.com/carolineschnapp/1002801#file-related-products-liquid-L109

@HeavenOfSound

This comment has been minimized.

Copy link

commented Aug 10, 2015

Hi, I get the same error message as Julien: Liquid error: Could not find asset snippets/product-grid-item.liquid Liquid error: Could not find asset snippets/product-grid-item.liquid AND iti s NOT any of the jhk519 errors. I guess the problem is that the snippet product-grid-item does NOT exist. So where do you guys got that ffrom or how does it look like (code). Thanks for any help!

@mckennedy

This comment has been minimized.

Copy link

commented Aug 18, 2015

not exactly plug & play. pretty specific to theme when it comes to snippets used and the header is an h2 closed by an /h1. not sure if you want to revise as it's linked from shopify even though not officially supported.

@hotcommodesty

This comment has been minimized.

Copy link

commented Oct 14, 2015

I added the snippet but everything was way too spaced out. Is there a way I can condense it all together and possibly delete the product title and prices?

Here is what it looks like (at bottom of page): http://hotcommodesty.com/collections/tops/products/simply-scalloped-blouse

@willswords

This comment has been minimized.

Copy link

commented Oct 20, 2015

I noticed the same thing @hotcommodesty when using the Brooklyn theme. I was able to shrink the height and eliminate the extra spacing by changing these values in theme.scss.liquid:

// Product Collage Grid
$collageImageXLarge: 200px; //was 670px;
$collageImageLarge: 200px; //was 520px;
$collageImageMedium: 200px; //was 310px;
$collageImageSmall: 200px; //was 230px;

However... I'm not sure yet what impact this will have elsewhere on the site. (e.g. shrinking images in other places where I do want the height to vary).

[UPDATE]

After I did some more testing, I settled on these values:

// Product Collage Grid
$collageImageXLarge: 230px; //was 670px;
$collageImageLarge: 520px;
$collageImageMedium: 230px; //was 310px;
$collageImageSmall: 230px;

@rickysalsberry

This comment has been minimized.

Copy link

commented Dec 7, 2015

Just wanted to post and thank for how smoothly this drops into Timber. Thanks & nice work.

@sevillasmith

This comment has been minimized.

Copy link

commented Dec 27, 2015

I am using Brooklyn Theme and having issues with the background height of the images being way too tall. however I can't find the spot to correct it on as Willswords suggested... and advice?

@sevillasmith

This comment has been minimized.

Copy link

commented Dec 27, 2015

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

@suture

This comment has been minimized.

Copy link

commented Jan 4, 2016

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

@charlesemarsh

This comment has been minimized.

Copy link

commented Jan 31, 2016

Small tiny typo Caroline...

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

Should be

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

@hhayrapetyan

This comment has been minimized.

Copy link

commented Feb 12, 2016

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

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

@ZaheerShaiz

This comment has been minimized.

Copy link

commented Feb 16, 2016

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

@myuniformhub

This comment has been minimized.

Copy link

commented Apr 11, 2016

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!

@jmalvio

This comment has been minimized.

Copy link

commented May 20, 2016

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

@Pyrus75019

This comment has been minimized.

Copy link

commented May 20, 2016

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 !

@san1219

This comment has been minimized.

Copy link

commented Jun 19, 2016

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

@jasonclixby

This comment has been minimized.

Copy link

commented Jul 15, 2016

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>

@jamesterr556

This comment has been minimized.

Copy link

commented Aug 9, 2016

Awesome!! This saved me a lot of time!

@chanap

This comment has been minimized.

Copy link

commented Sep 3, 2016

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

@marioloncarek

This comment has been minimized.

Copy link

commented Oct 19, 2016

how would i change the html output of your snippet?

@satquiel

This comment has been minimized.

Copy link

commented Mar 26, 2017

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

This comment has been minimized.

Copy link

commented Apr 14, 2017

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

@lovecastle

This comment has been minimized.

Copy link

commented Apr 17, 2017

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?

@maximus267

This comment has been minimized.

Copy link

commented May 18, 2017

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

@starfelia

This comment has been minimized.

Copy link

commented Jun 15, 2017

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

@OhMarco

This comment has been minimized.

Copy link

commented Aug 3, 2017

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?

@Farah-Anzimaty

This comment has been minimized.

Copy link

commented Aug 9, 2017

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

@amitaroradelhi

This comment has been minimized.

Copy link

commented Aug 21, 2017

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?

@crownedathletics

This comment has been minimized.

Copy link

commented Aug 23, 2017

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!

@minhbt

This comment has been minimized.

Copy link

commented Oct 13, 2017

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?

@Chrisbambi

This comment has been minimized.

Copy link

commented Nov 5, 2017

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?

@ParanormalMike

This comment has been minimized.

Copy link

commented Nov 22, 2017

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

@hyungjoo87

This comment has been minimized.

Copy link

commented Jan 12, 2018

Hi Caroline,

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

www.shopskiesareblue.com

Thank you

@max2524

This comment has been minimized.

Copy link

commented Apr 13, 2018

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

@xto3na

This comment has been minimized.

Copy link

commented Dec 13, 2018

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.

@smitsanghvi21

This comment has been minimized.

Copy link

commented Feb 16, 2019

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.