Related Product based on Products Tag

[Cameron_Vajdic]

I am new to the whole shopify platform and so far it has been great. Still getting my head around the use of liquid, been stuck on how to achieve this one so thought I may as well try asking the community.

So, I followed the guide at: https://help.shopify.com/en/themes/customization/products/features/recommend-related-products

I'm using the Venture theme. I added the additional code and no problems recommend products is working.

My issue is that I was trying to edit the code to achieve what I wanted out of it but was struggling.

I basically want to show related products from one collection, but from that collection only if the current product viewed has a matching tag to something in the selected collection.

Something along the lines of:

If currently viewed product contains tag = to tag in (select collection), display as related product.

Any help I could get with this would be greatly appricated.

Cheers Cam

[Liam]

Hi Cam,

Great to see you're looking to optimize your product pages, so let's see how we could sort this out. I wrote a blog post last year on creating a recommended products section, which is based on the Debut theme. However, the basic idea should be the same. The critical control flow tag is:

{% if product.tags contains 'X' %} 

Which should be wrapped around where products are loading. 

I'd recommend that you take a look at the tutorial and see if you can use it as a guide for Venture.

Best of luck & let us know how you get on.

Liam

[Kahuna27]

Hi Liam,

Do you know if there is another solution for this? I would love to be able to show related products which have the same product tags.

The reason for this is that I have over 1000 products, but only around 4-5 products will be relevant to my customers. Is it possible to only display related products when the tags match 100%?

Thanks in advance

[Kumar2573]

<div class="grid-product__meta">

{% assign flag = false %}

{% for t in product.tags %}

{% if t contains 'Theme_Hot winter'  %}

{% assign flag = true %}

{% assign current_tag = t %}

{% endif %}

{% endfor %}

{% if flag == true %}

<header class="section-header">
<h3 class="section-header__title">Frequently bought together</h3>
</header>

{% assign counter = 0 %}

{% for product in collections.all.products %}

{% for tag in product.tags %}

{% if tag == current_tag and counter < 4 %}


{% assign counter = counter | plus: 1 %}

<div class="grid__item small--one-half medium-up--one-quarter" style="text-align: center;">

<div class="complete-look__wrap">
<img style=" width: 100px;
height: 100px;
object-fit: contain;" class="complete-look__img" src="{{ product.featured_image | img_url: 'medium' }}" alt="{{product.title}}">

</div>

<div class="complete-look__product-details">
<a class="complete-look__link" href="{{product.url}}">
<div class="grid-product__title grid-product__title--body" style="height:44px; overflow:hidden;">{{product.title }}</div>
<div class="grid-product__price">{{product.price | money}}</div>
</a>
</div>

<form class="fbr_bought" method="post" action="/cart/add" >
<input type="hidden" id="vari" name="id" value="{{ product.variants.first.id }}" />

<input type="submit" value="{% if product.variants.first.available%}Buy now{% else %}Sold Out{% endif%}" class="btn btn--full add-to-cart bc" {% unless product.variants.first.available %}disabled{% endunless %} />

</form>

</div>
{% endif %}

{% endfor %}

{% endfor %}

{%endif%}

</div>

<!----- add to cart product in cart drawer without refresh page ----!>
<script>
$('.bc').click(function(e){
e.preventDefault();
var value = $(this).parent().find('#vari').attr('value');
//alert(value);
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: {
quantity: 1,
id: $(this).parent().find('#vari').attr('value')
},
dataType: 'json',
success: function (data) {
console.log(data);
//location.reload();
// $('#cart_refresh').load('#cart_refresh');
setTimeout(function () {
$('.js-drawer-open-cart').trigger('click');
}, 3000);
$('#CartContainer').load('#CartContainer');
}
});
});
</script>

[anton_nv]

This does work but the tag does throw up an error due to an extra space that's at the end of the liquid syntax (in case anyone tried this and it didn't work!) 🙃

Thank you though, tried many ways and this seems the friendliest way to do this for the user.

[Parker_Rehms]

Sorry to bring this back up. I followed the steps to create a recommended product section created by tags, I gave four products a tag of 'related' which matches the code of if it contains:
{% if product.tags contains  'related' %}.

Then on my website I switched the number of products per row to 4 and number of rows to 1, however it only will show two of the four products with the tags. The only products with these tags show up on the section if the product is on the first page of my products (I have 3 or 4 pages of different products in the main admin hub). I have no problem showing 4 products though if they are on the first page of products. The photo below shows the page and how it is looking. How can I make it so I can show any product in this section that is not limited to the first page of products?

[Rack]

Hi Parker, Did you ever find a cause or solution for your issue?

I'm having a similar problem in that certain products with the appropriate tag don't display and others do.

I can't seem to find any difference between the products that do display in the section and the ones that don't.

Thanks

[Cameron_Vajdic]

Thanks Liam for that, having troubles addapting that code to what I need to do but has defintly assited and developed my knowloedge of the language. Thank you for that and will continue to try and update the forum if I have any succes. 

Cheers Cam

[ameernormie]

There's an app that does product-product navigation based on tags. It shows your tags on product pages. You may find it useful
https://apps.shopify.com/product-tag-image