Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp
Last active December 22, 2022 21:29
Show Gist options
  • Save carolineschnapp/1002801 to your computer and use it in GitHub Desktop.
Save carolineschnapp/1002801 to your computer and use it in GitHub Desktop.
Related Products — to add to product.liquid
@myuniformhub
Copy link

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
Copy link

jmalvio 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
Copy link

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
Copy link

san1219 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
Copy link

jasonclixby 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>

@jamiewtam
Copy link

Awesome!! This saved me a lot of time!

@Pooja-Vishnoi
Copy link

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
Copy link

how would i change the html output of your snippet?

@satquiel
Copy link

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
Copy link

smashupbuddy 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
Copy link

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
Copy link

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
Copy link

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
Copy link

OhMarco 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
Copy link

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
Copy link

amitaroradelhi 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
Copy link

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
Copy link

minhbt 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
Copy link

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
Copy link

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
Copy link

Hi Caroline,

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

www.shopskiesareblue.com

Thank you

@max2524
Copy link

max2524 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
Copy link

xto3na 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
Copy link

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?

@luismanuelvivas
Copy link

Thanks it works perfect!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment