Tag-Based Product Recommendation

Topic summary

A developer is building a tag-based product recommendation section that displays products sharing tags with the current product on product pages.

Implementation approach:

  • Iterate through current product’s tags
  • Loop through all store products and their tags
  • Match tags between current and recommended products
  • Track rendered products to avoid duplicates
  • Display matching products using a product card component

Initial problem:
The code worked for some products but failed to display recommendations for others (example: a glass tumbler product with tags showed no recommendations despite matching products existing). No errors were thrown, suggesting a logic issue rather than syntax problem.

Resolution:
A freelance developer resolved the issue through trial and error. The working implementation is now live on the client’s website (bubbleplastics.co.za).

Technical details:

  • Theme: Impact 4.7.1
  • Uses Liquid templating
  • Leverages collections.all.products for product iteration
  • Implements duplicate prevention via products_rendered array
Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

Good day,

I’m creating a tag-based recommendations section on a client’s website. The section is suppose to display products that have the same tag as the current product on the product page.

My logic is:

  1. Iterate through the current products tags.

  2. Iterate through each product in the store (calling this rec_product).

  3. Iterate through the rec_products tags.

  4. Check if the rec_product’s tag is equal to the current product’s tags.

  5. If equal, check if the product hasn’t already been rendered.

  6. If not rendered, display it.

This is my code:

{%- assign products_rendered = '' | split: '|' -%}
            {%- for _tag in product.tags -%}
              {%- for rec_product in collections.all.products -%}
                {%- for tag in rec_product.tags -%}
                  {%- if _tag == tag -%}
                    {%- unless products_rendered contains rec_product.id -%}
                      {%- render 'product-card',
                        product: rec_product,
                        stacked: section.settings.stack_products,
                        background: section.settings.product_card_background,
                        text_color: section.settings.product_card_text_color,
                        show_badges: true
                      -%}
                    {%- endunless -%}
                    {%- assign products_rendered = products_rendered | append: rec_product.id | append: '|' -%}
                  {%- endif -%}
                {%- endfor -%}
              {%- endfor -%}
            {%- endfor -%}

My code is only working for some products and I’m not receiving any error. I feel like there maybe an error in my logic instead.

Example:

Product Pasabahce Hiball Glass Tumbler 230ml Clear 40074 (bubblesplastics.co.za) doesn’t show any recommeded products even though it’s tagged:

And there are products with at least one of the tags:

Theme: Impact 4.7.1 (Impact Theme - Home - Ecommerce Website Template (shopify.com))

Preview Link: https://gj6j1wb7oqwnne1e-52573339831.shopifypreview.com (not on the published theme because the section is not working).

Any assistance or advise will be greatly appreciated, thank you.

Updated Preview Link: https://3x8t4jcwxcr8hs5k-52573339831.shopifypreview.com

Did you end up getting it to work? Preview link doesnt seem to work.

Yes. I had a freelance dev help me. He managed to figure it out with some trial and error. You can see it on the live website now: https://bubblesplastics.co.za/.