related-products-by-tag.liquid

<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;
  }

  /*.recommended-products-section {
    display: block !important;
  }*/
</style>


{% assign tag_substring = 'related::' %}

{% for tag in product.tags %}
  {% if tag  contains tag_substring %}
  {% assign tag = tag | downcase %}
    {% assign tag_handle = tag | remove: tag_substring %}
    {% break %}
  {% endif %}
{% endfor %}

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

{%- assign current_product = product -%}

{%- capture related_items -%}
  {%- for product in collections.all.products -%}
    {% assign product_tags_compare = product.tags | downcase %}
    {%- unless product.handle == current_product.handle -%}

      {%- if tag_handle == blank -%}
        {% assign tag_handle = section.settings.related_tag %}
      {%- endif -%}
      
      {%- if product_tags_compare contains tag_handle -%}
        {% assign feature_image = product.featured_image %}
         
        <div class="gallery-cell
                  thumbnail
                  visible-{{ break_at }}
                  quick-shop-style--{{ settings.quick_shop_style }}
                  product-{{ product.id }}">
          <div class="product-wrap">
            <div class="relative product_image swap-{{ settings.collection_secondary_image }}">
              <a href="{{ product.url | within: collection }}">
                <div class="image__container">
                  {% include 'image-element', image: feature_image | img_url: '290x', alt: product.title, object_fit: settings.align_height, max_height: settings.collection_height %}
                </div>
                  {% if settings.collection_secondary_image != blank %}
                    {% if product.images[1] != blank %}
                      {% assign secondary_image = product.images[1] %}
                    {% else %}
                      {% assign secondary_image = product.featured_image %}
                    {% endif %}
                    <img  src="{{ secondary_image | img_url: '290x' }}"
                          class="secondary lazyload"
                          alt="{{ product.title | escape }}"
                          />
                  {% endif %}
                </a>
              {% include "product-details" %}
              {% if settings.quick_shop_style == 'inline' %}
                {% include 'collection-swatch' %}
              {% endif %}
              
            </div>
            <a class="product-info__caption {% if settings.thumbnail_hover_enabled %}hidden{% endif %}" href="{{ product.url | within: collection }}">
              {% include "product-info" %}
            </a>
          </div>
          {% if settings.quick_shop_style == 'popup' and settings.quick_shop_enabled %}
          {% include 'collection-swatch' %}
        {% endif %}

        {% if settings.quick_shop_style == 'inline' and settings.quick_shop_enabled %}
          {% unless collection_handles contains 'coming-soon' %}
            <div class="inline-quickshop js-product_section product-{{ product.id }}">
              {% include 'product-form', show_payment_button_quickshop: settings.show_payment_button %}
            </div>
          {% endunless %}
        {% endif %}
        </div>

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

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

      {%- endif -%}

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

{%- assign related_items = related_items | trim -%}
{%- unless related_items == blank -%}
  <div class="container">
    <div class="row">

      <div class="product-recommendations" data-product-id="{{ product.id }}" data-limit="{{ break_at }}" data-enabled="{{ section.settings.show_product_recommendations }}">

        {%- if section.settings.heading -%}
          <h4 class="title center">{{ section.settings.heading }}</h4>
        {%- endif -%}
        <div class="recommended-products--slider js-recommended-products-slider">
          <div class="products-slider slider-gallery products-length-{{break_at}}" 
            data-products-per-slide="{{ break_at }}"
            data-products-limit="{{ break_at }}"
            data-products-available="{{ break_at }}">
            {{ related_items }}
          </div>
        </div>

      </div>
    </div>
  </div>
{%- endunless -%}

{% schema %}
{
  "name": "Recommended products",
  "class": "recommended-products-section",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "SIMILAR SELECTION OF JEWELRY"
    },
    {
      "type": "text",
      "id": "related_tag",
      "label": "Tag",
      "info" : "The tag determines which products show as default related products. To overwrite this, please add tag related::{your-tag} on product page"
    },
    {
      "type": "checkbox",
      "id": "show_product_recommendations",
      "label": "Show dynamic recommendations",
      "info": "Dynamic recommendations change and improve with time. [Learn more](https://help.shopify.com/en/themes/development/recommended-products)",
      "default": true
    },
    {
      "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 %}