manual recommendation products tag based shopify

related-products-by-tag.liquid

<!-- refrence https://shopify.github.io/liquid-code-examples/example/recommended-products-by-tag/
https://www.shopify.com.ng/partners/blog/related-products -->
<style>
  .product-card {
    box-sizing: border-box;
    float: left;
    min-height: 1em;
    padding-left: 2em;
    vertical-align: top;
    width: 25%;
  }

  .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
  }
</style>

{% assign counter = '' %}
{%- assign break_at = section.settings.number_of_products | plus: 0 -%}
{%- assign current_product = product -%}

<!-- only single pagination is working here. It should be automated with pagination. -->
{% paginate collections.all.products by 1000 %}
{%- capture related_items -%}
{% for tag in product.tags %}
  {%- assign productTag = tag | downcase -%} 
  {%- if productTag contains 'match_' -%} 
	{% assign my_variable = tag %}
  {%- endif -%}
 {% endfor %}
  {%- for product in collections.all.products -%}
    {%- unless product.handle == current_product.handle -%}
      {%- if product.tags contains my_variable -%}
				{% capture temp %}{{ counter }}*{% endcapture %}
                {% assign counter = temp %}
    <li class="prodThumb oneThird flexItem">
    <a href="{{ product.url | within: collection }}">
    {% if on_sale %}
      <span class="tag">{{ 'products.product.on_sale' | t}}</span>
    {%endif%}
    {% if sold_out %}
      <span class="tag">{{ 'products.product.sold_out' | t}}</span>
    {% endif %}
       {%if product.images.size > 1%}
        <div class="imgWrap gridJustify centerColumns slickImgWrap twoImg">
          <img src="{{product.images.first | img_url:'grande'}}" alt="{{product.images.first.alt}}">
          <img class="second" src="{{product.images[1] | img_url:'grande'}}" alt="{{product.images[1].alt}}">
        </div>
      {%else%}
        <div class="imgWrap  gridJustify centerColumns slickImgWrap">
          <img src="{{product.images.first | img_url:'grande'}}" alt="{{product.images.first.alt}}">
        </div>
      {%endif%}
      <div class="title gridJustify">
      <span>{{product.title}}{{img_url}}</span>
      <span>
        {% if on_sale %}
          {% if product.price_varies %}
            {% assign price = product.price | money %}
              {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            <strike>{{ product.compare_at_price | money }}</strike> {{ product.price | money }}
          {% endif %}
        {% else %}
          {% if product.price_varies %}
            {% assign price = product.price | money %}
            {{ 'products.general.from_text_html' | t: price: price }}
          {% else %}
            {{ product.price | money }}
          {% endif %}
        {% endif %}
      </span>
    </div>
    </a>
  </li>

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

        {%- if counter == break_at -%}
          {%- break -%}
        {%- endif -%}

      {%- endif -%}

    {%- endunless -%}
  {%- endfor -%}

{%- endcapture -%}
{%- endpaginate -%}

{%- assign related_items = related_items | trim -%}
{%- if related_items != blank -%}
   <div class="sectionWrap relatedItems featuredSliderWrap slickSlider">
     {%- if section.settings.heading -%}
        <h2 class="genHeading">{{ section.settings.heading }}</h2>
    {%- endif -%}
     
    <div class="grid">
      <ul class="productListing flexWrap"  data-full="3"  data-tab="2" data-mob="1" data-auto="false" data-timeout="" >
        {{ related_items }}
      </ul>
      {%if counter > 4%}
      
          <span class="control  prev">
            {%include 'svg-definitions' with 'left-arrow'%}
          </span>
          <span class="control next">
            {%include 'svg-definitions' with 'right-arrow'%}
          </span>
        {%endif%}
    </div>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Recommended products",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Complete the Set:"
    },
    {
      "type": "select",
      "id": "number_of_products",
      "label": "Number of products to show",
      "default": "4",
      "options": [
        {
          "value": "4",
          "label": "4"
        },
        {
          "value": "8",
          "label": "8"
        },
        {
          "value": "12",
          "label": "12"
        }
      ]
    }
  ]
}
{% endschema %}