Recommend / Related products

recommended-products.liquid

<!-- Tag products with recommend_product-handle --> 

<div class="recommended-products">
  {% for tag in product.tags %}
    {% if tag contains 'recommend_' %}
      {% assign prodHandle = tag | split: '_' | last %} 
      {% assign recProd = all_products[prodHandle] %}
      <a href="{{ recProd.url }}" class="rec-prod">
        <img class="rec-prod__image" src="{{ recProd.featured_image | img_url: '500x' }}" alt="{{ recProd.title }}">
        <h4>{{ recProd.title }}</h4>
      </a>
    {% endif %}
  {% endfor %}
</div>

<!-- Or instead of tags use shortcodes in the product description. -->

{% comment %}Add recommendation is product description HTML in this format <!--recommend:product1-handle,product2-handle-->{% endcomment %}
{% comment %} returns a string of handles joined by commas, then split to an array {% endcomment %}

{% assign recommendedProductsString = product.description | split: '<!--recommend:' | last | split: '-->' | first %}
{% assign recommendedProductsArray = recommendedProductsString | split: ',' %}
<div class="recommended-products">
  {% for prodHandle in recommendedProductsArray %}
    {% assign recProd = all_products[prodHandle] %}
    <a href="{{ recProd.url }}" class="rec-prod">
      <img class="rec-prod__image" src="{{ recProd.featured_image | img_url: '500x' }}" alt="{{ recProd.title }}">
      <img src="{{ recProd.images[1] | img_url: '500x' }}" alt="" class="rec-prod__image--secondary">
    </a>
  {% endfor %}
</div>