title: Shopify related products via tag instead of collection
body: <p>I have a "<strong><em>Related Products</em></strong>" section on my Product page. Right now it shows products that a related by "<strong><em>collection</em></strong>". Is it possible to show related products that have the same tag?</p>
  
  <p>This is my <strong><em>related-products.liquid</em></strong> code.</p>
  
  <p>Thanks.</p>
  
  <pre><code>{% if section.settings.show_related_products == true %}
  &lt;hr&gt;
  &lt;div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true"&gt;
  
  
  
  {% comment %}
    Number of related items per row,
    and number of rows.
  {% endcomment %}
  
  {% assign number_of_related_products_per_row = section.settings.related_grid_num %}
  {% assign number_of_rows = section.settings.related_grid_row %}
  
  {% comment %}
    Heading.
    Leave blank if you don't need one.
  {% endcomment %}
  
  {% assign heading = section.settings.related_title %}
  
  {% comment %}
    Set either or both to true, if you want
    to limit yourself to items with same vendor, and/or type.
  {% endcomment %}
  
  {% assign same_vendor = false %}
  {% assign same_type = false %}
  
  {% comment %}
    Collections to ignore.
    Never pick related items from those.
  {% endcomment %}
  
  {% assign exclusions = 'frontpage,all' | split: ',' %}
  
  {% comment %}
    Looking for a relevant collection.
  {% endcomment %}
  
  {% if product.metafields.c_f['Related Products'] %}
    {% assign collection = collections[product.metafields.c_f['Related Products']] %}
  {% endif %}
  
  {% assign found_a_collection = false %}
  {% if collection and collection.all_products_count &gt; 1 %}
    {% unless exclusions contains collection.handle %}
      {% assign found_a_collection = true %}
    {% endunless %}
  {% endif %}
  {% unless found_a_collection %}
    {% for c in product.collections %}
      {% unless exclusions contains c.handle or c.all_products_count &lt; 2 %}
        {% assign found_a_collection = true %}
        {% assign collection = c %}
        {% break %}
      {% endunless %}
    {% endfor %}
  {% endunless %}
  
  {% comment %}
    If we have a relevant collection.
  {% endcomment %}
  
  {% if found_a_collection %}
  
    {% assign counter = 0 %}
    {% assign break_at = number_of_rows | times: number_of_related_products_per_row %}
    {% assign current_product = product %}
  
    {% case number_of_related_products_per_row %}
      {% when '1' %}
        {% assign grid_item_width = '' %}
    {%- assign max_height = 700 -%}
      {% when '2' %}
        {% assign grid_item_width = 'small--one-half medium-up--one-half' %}
        {%- assign max_height = 530 -%}
      {% when '3' %}
        {% assign grid_item_width = 'small--one-half medium-up--one-third' %}
        {%- assign max_height = 345 -%}
      {% when '4' %}
        {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
    {%- assign max_height = 250 -%}
      {% when '5' %}
        {% assign grid_item_width = 'small--one-half medium-up--one-fifth' %}
    {%- assign max_height = 195 -%}
      {% when '6' %}
        {% assign grid_item_width = 'small--one-half medium-up--one-sixth' %}
    {%- assign max_height = 195 -%}
      {% else %}
        {% assign grid_item_width = 'small--one-half medium-up--one-quarter' %}
    {%- assign max_height = 195 -%}
    {% endcase %}
  
  
    {% capture related_items %}
  &lt;div class="grid grid--uniform{% if collection.products_count &gt; 0 %} grid--view-items{% endif %}"&gt;
  
    {% for product in collection.products %}
    {% unless product.handle == current_product.handle %}
    {% unless same_vendor and current_product.vendor != product.vendor %}
    {% unless same_type and current_product.type != product.type %}
    &lt;div class="grid__item {{ grid_item_width }}"&gt;
      {% include 'product-card-grid', max_height: max_height %}
    &lt;/div&gt;
    {% assign counter = counter | plus: 1 %}
    {% if counter == break_at %}
    {% break %}
    {% endif %}
    {% endunless %}
    {% endunless %}
    {% endunless %}
    {% endfor %}
  &lt;/div&gt;
    {% endcapture %}
  
    {% assign related_items = related_items | trim %}
  
    {% unless related_items == blank %}
  
    &lt;aside class="grid"&gt;
      &lt;div class="grid__item"&gt;
        {% unless heading == blank %}
        &lt;header class="section-header"&gt;
          &lt;h2 class="section-header__title"&gt;{{ heading }}&lt;/h2&gt;
        &lt;/header&gt;
        {% endunless %}
        &lt;div class="grid-uniform"&gt;
          {{ related_items }}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/aside&gt;
  
    {% endunless %}
  
  {% endif %}
  
  &lt;/div&gt;
  {% endif %}
  
  {% schema %}
  {
    "name": "Related products",
    "settings": [
      {
        "type": "checkbox",
        "id": "show_related_products",
        "label": "Show related products",
        "default": false
      },
      {
        "id": "related_title",
        "type": "text",
        "label": "Section title",
        "default": "Other fine products"
      },
      {
        "type": "select",
        "id": "related_grid_num",
        "label": "Products per row (Desktop)",
        "default": "4",
        "options": [
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          },
          {
            "value": "4",
            "label": "4"
          },
          {
            "value": "5",
            "label": "5"
          }
        ]
      },
      {
        "type": "select",
        "id": "related_grid_row",
        "label": "Number of rows (Desktop)",
        "default": "1",
        "options": [
          {
            "value": "1",
            "label": "1"
          },
          {
            "value": "2",
            "label": "2"
          },
          {
            "value": "3",
            "label": "3"
          }
        ]
      }
    ]
  }
  {% endschema %}
  </code></pre>