Liquid Code: Shopify Related Products by Tag

Up your sells by introduce more products to your customer. You can do it easy with Shopify. You can add Shopify Related Product by Tag with some apps. It may be free to $169/month. But today, I would like to teach you, so you can add Related products by yourself.

Create Shopify Related Products section by on product tags

This solution involves creating a static section that searches through all products to find and display products that share a specific tag. If this specified tag is attached to a product, it will appear as a related product, on the product page, where the section is positioned.

For each different group, or unique tag, we will need to create a unique product.liquid file. For this reason, this solution is advisable if your client has a limited number of related product groups, or sub-collections.

The first step will be creating a new blank section in your themes section folder, called related-products-by-tag.liquid.

Next you will need to copy and paste the code from this gist into your new blank section:

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 %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
  
  {% for product in collections.all.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 %}
  {% comment %} 
    Replace 'recommended' below with prefered tag 
  {% endcomment %}
  {% if product.tags contains  'recommended' %} 
  <div class="grid__item {{ grid_item_width }}">
    {% include 'product-card-grid', max_height: max_height %}
  </div>
  {% assign counter = counter | plus: 1 %}
  {% if counter == break_at %}
  {% break %}
  {% endif %}
  {% endif %}
  {% endunless %}
  {% endunless %}
  {% endunless %}
  {% endfor %}
  
</div>
  {% endcapture %}

  {% assign related_items = related_items | trim %}

  {% unless related_items == blank %}

  <aside class="grid">
    <div class="grid__item">
      {% unless heading == blank %}
      <header class="section-header">
        <h3>{{ heading }}</h3>
      </header>
      {% endunless %}
      <div class="grid-uniform">
        {{ related_items }}
      </div>
    </div>
  </aside>

  {% endunless %}
     
{% endif %}
  
</div>
{% 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 %}

The code will check all products in your store

{% for product in collections.all.products %}

Then compare with condition, Show a product if it has tag “recommended”:

{% if product.tags contains  'test' %} 
<div class="grid__item {{ grid_item_width }}">
  {% include 'product-card-grid', max_height: max_height %}
</div>

This means that any product that contains the tag of “recommended” will now be displayed on the product page, as a related product. A client can change “recommended” to whichever tag they prefer, and alternative versions of this file can be created for each tag. If you want to create more product template of more related product type. Please following the guide: https://help.shopify.com/themes/customization/store/create-alternate-templates

Alright, now save the related-products-by-tag.liquid Section. Include the section to the file: Templates/products.liquid It will look like bellow

{% comment %}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template' %}
{% section 'related-products-by-tag' %}

Well done 😉
Now, try to add “recommended” tag to some products

Check your product details page to see your result

For more option like bought together or also bought, you need use the frequently bought together app

Enjoy this blog? Please spread the word :)