RELATED PRODUCTS IN SHOPIFY

-------------------------------------------------------------------------------------------------------------------

RELTED PRODUCTS NOT SHOW WHEN COLLECTION TILTE AND COLLECTION TAGS NOT SAME THEREFORE

RELATED PRODUCTS SHOW WITH COLLECTION TITLE AND COLLECTION TAGS SAME

READ MORE:

https://youtu.be/mZjt1qUgrS4

RELATED PRODUCTS IN SHOPIFY

https://youtu.be/rlqD-iuoVPw

0)CREATE SOME SAME TAG PRODUCTS IN SHOPIFY LIKE Women etc

1) ADD TAG INTO COLLECTION

2)MAKE SURE PRODUCT COLLECTION TITLE AND PRODUCT TAG SAME

3) ADD SECTION LINK CODE IN TEMPLATE > PRODUCT LIQUID FILE

4) ADD BELOW SECTION LINK CODE IN TEMPLATE > PRODUCT LIQUID FILE

{% section 'related-products' %}

--------------------------------------------------------------------------------------------------------------------

{% if section.settings.show_related_products == true %}
<hr>
<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">
{% 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 > 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 < 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 %}
<div class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% 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 %}
<div class="grid__item {{ grid_item_width }}">
{% include 'product-card-grid', max_height: 250, 
product: product, show_vendor: section.settings.show_vendor %}  
</div>
{% assign counter = counter | plus: 1 %}
{% if counter == break_at %}
{% break %}
{% 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">
<h2 class="section-header__title">{{ heading }}</h2>
</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": true
},
{
"id": "related_title",
"type": "text",
"label": "Section title",
"default": "RELATED PORDUCTS SECTION"
},
{
"type": "checkbox",
"id": "show_vendor",
"default":true,
"label": {
"en": "Show vendor"
}
},
{
"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 %}

--------------------------------------------------------------------------------------------------------------------