Related Products Section Based on Article Tags Not Displaying Properly in Shopify Theme

Shopify Plus
1

I’m working on a Shopify theme, and I’m trying to implement a related products section based on the tags of the current article. The goal is to display products that share common tags with the article. However, the code I’ve implemented doesn’t seem to be working correctly. The related products section is not displaying as expected.

{% comment %} Display the related products section if there are any related products {% endcomment %}

{{ section.settings.title }}

{% assign limit = 4 %} {% assign counter = 0 %} {% assign related_products_found = false %}

{% for related_product in collections.all.products %}
{% assign common_tags = related_product.tags | intersect: article.tags %}
{% if related_product.handle != product.handle and common_tags.size > 0 %}
{% assign related_products_found = true %}
{% if counter < limit %}

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

{% if related_products_found == false %}
{# Display default set of products when no related products are found #}
{% for default_product in collections.all.products limit: limit %}

{% endfor %} {% endif %}

I would appreciate any guidance or suggestions on how to correctly display products that have common tags with the current article. Thank you!

2

Hi Guys, I have found a solution for my above question.

{% assign limit = 4 %} {% assign related_products_found = false %} {% assign related_products_limit = 0 %} {% assign current_article_tags = article.tags %}

{% for product in collections.all.products %}
{% assign common_tags = “” %}

{% for product_tag in product.tags %}
{% if current_article_tags contains product_tag %}
{% assign common_tags = common_tags | append: product_tag | append: “,” %}
{% endif %}
{% endfor %}

{% if common_tags != “” %}
{% assign related_products_found = true %}

{% assign related_products_limit = related_products_limit | plus: 1 %} {% if related_products_limit == limit %} {% break %} {% endif %} {% endif %} {% endfor %}

{% unless related_products_found %}
{% for default_product in collections.all.products limit: limit %}

{% endfor %} {% endunless %}

This will display the related products if the article and product has common tags and if there is no common tags it will display the default products with the limit.

Thanks.

3

@Anand0 I will not recommend this approach since I can see a performance issue with looping through all products, you can use Storefront API Search to fetch accurate data based on a list of tags, but anyway, this is the code on how to get the related products based on article tags in liquid.

Note: I have yet to test this in an actual store.

{% assign limit = 4 %}
{% assign counter = 0 %}
{% assign article_tags = article.tags | downcase %}
{% capture related_products_content %}{% endcapture %}
{% for related_product in collections.all.products %}
   {% assign product_tags = related_product.tags | downcase %}
   {% assign has_common_tag = false %}

   {% for tags in article_tags %}
      {% if product_tags contains tags %}
         {% assign has_common_tag = true %}

         {% comment %}   
           Stop the loop when detect at least 1 common tag
         {% endcomment %}  
         {% break %}
      {% endif %}
   {% endfor %}
   
   {% if has_common_tag %}
       {% assign counter = counter | plus: 1 %}
       {% capture related_products_content %}
          {{ related_products_content }}
          YOUR PRODUCT LIST CONTENT HERE!

       {% endcapture %}
   {% else %}
      {% comment %}   
       Skip this loop since we dont have any common tags
      {% endcomment %}  
      {% continue %}
   {% endif %}
   
   {% if counter == limit %}
      {% comment %}   
        Stop the loop when we reach the maximum limit!
      {% endcomment %}  
      {% break %}
   {% endif %}
{% endfor %}

{% if counter %}
    {% comment %}   
     Display captured related products
    {% endcomment %}  

    
       {{ related_products_content }}
    

{% else %}
 No related products found :(
{% endif %}