add related posts on single product page
first add code in settings section of schema:-
{
"type": "checkbox",
"id": "display_related_products",
"label": "Show related products ([?](http:\/\/support.outofthesandbox.com\/customer\/portal\/articles\/942378-related-products))"
},
{
"type": "select",
"id": "products_per_row",
"label": "Related products per row",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
}
]
}
Then Paste this code at the end of single product page code ( product-template.liquid )
{% if section.settings.display_related_products %}
<div class="container">
<div class="featured-collection">
{% capture limit %}{{ section.settings.products_per_row | plus: 1 }}{% endcapture %}
{% if collection and collection.all_products_count > 1 %}
{% assign col = collection.handle %}
{% else %}
{% assign col = product.collections.last.handle %}
{% endif %}
{% for tag in product.tags %}
{% if tag contains 'meta-related-collection-' %}
{% assign related_collection_handle = tag | remove: 'meta-related-collection-' %}
{% if collections[related_collection_handle].all_products_count > 0 %}
{% assign col = related_collection_handle %}
{% assign collection = collections[col] %}
{% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}
{% endif %}
{% endif %}
{% endfor %}
{% if col and collections[col].all_products_count > 0 %}
{% if collections[col].all_products_count != 1 or collections[col].products.first.id != product.id %}
<h1><span>Related Products</span></h1>
{% assign skip_product = product %}
{% assign products = collections[col].products %}
{% assign products_per_row = section.settings.products_per_row %}
{% include 'product-loop' with sidebar: sidebar %}
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
- Then add (product-loop.liquid) in snippits and paste the code:-
{% assign product_found = false %}
{% assign skip = false %}
{% assign collection_group = products | map: 'id' %}
{% assign collection_group_thumb = collection_group | append : 'thumb' %}
{% assign collection_group_mobile = collection_group | append : 'mobile' %}
{% capture new_row %}
<br class="clear product_clear" />
{% endcapture %}
<div itemtype="http://schema.org/ItemList" class="row">
{% for product in products limit: limit %}
{% if product.id == skip_product.id or skip == true %}
{% assign product_found = true %}
{% else %}
{% if forloop.rindex0 == 0 and product_found == false and forloop.length != products.count and template != 'search' %}
{% assign skip = true %}
{% else %}
{% include 'product-thumbnail', sidebar: sidebar %}
{% if products_per_row == "2" %}
{% cycle collection_group: '', new_row %}
{% elsif products_per_row == "3" %}
{% cycle collection_group: '', '', new_row %}
{% elsif products_per_row == "4" %}
{% cycle collection_group: '', '', '', new_row %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
Then add (product-thumbnail.liquid) in snippets and paste the code:-
<div class="col-sm-3 col-md-3 collection-block">
{% assign collection_handles = product.collections | map: 'handle' %}
{% if product.featured_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
{% assign alt_text = product.title %}
{% else %}
{% assign alt_text = product.featured_image.alt %}
{% endif %}
<a href="{{ product.url | within: collection }}" itemprop="url">
<div class="product-img">
{% if product.featured_image %}
<img src="{{ product.featured_image | product_img_url: 'large' }}">
{% else %}
<img src="{{ 'loader.gif' | asset_url }}">
{% endif %}
</div>
<div class="info">
<span class="title" itemprop="name">{{ product.title }}</span>
<div class="vendor">
{{ product.vendor }}
</div>
{% if settings.enable_shopify_collection_badges %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% unless collection_handles contains 'coming-soon' %}
<span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="{{ product.price_min | money_without_currency }}" />
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="itemCondition" content="New" />
{% if product.available %}
{% if product.price_varies and product.price_min > 0 %}
<small><em>{{ 'products.general.from' | t }}</em></small>
{% endif %}
{% if product.price_min > 0 %}
<span class="money">{{ product.price_min | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
{% if product.compare_at_price_max > product.price %}
<div class="price">{{ product.compare_at_price_max | money }}</div>
{% endif %}
{% else %}
<span class="sold_out">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
</span>
{% endunless %}
</div>
{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'coming-soon' %}
<div class="new_banner">{{ 'collections.general.coming_soon' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="new_banner">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}
</a>
{% include 'collection-swatch' %}
</div>
{% if settings.quick_shop_enabled %}
{% if product.description contains "#tab1" %}
{% assign tabs = true %}
{% else %}
{% assign tabs = false %}
{% endif %}
<div id="product-{{ product.id }}" class="modal product-{{ product.id }} product_section {% if product.images.size > 1 %} thumbnail_position--{{settings.thumbnail_position}} {% endif %} product_slideshow_animation--{{settings.product_slideshow_animation}}"
data-thumbnail="{{settings.thumbnail_position}}"
data-slideshow-animation="{{settings.product_slideshow_animation}}"
data-slideshow-speed="{{settings.slideshow_speed}}">
<div class="container section" style="width: inherit">
<div class="eight columns" style="padding-left: 15px">
{% include 'product-images' with 'modal' %}
</div>
<div class="six columns">
<h3>{{ product.title }}</h3>
{% if settings.display_vendor_collection %}
<p class="vendor">
<span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
{% assign variant = product.selected_or_first_available_variant %}
{% unless collection_handles contains 'coming-soon' %}
<p class="modal_price">
<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>
</p>
{% include 'product-notify-me' %}
{% endunless %}
{% if settings.product_description_position == "top" %}
{% if settings.description_words == "none" %}
{{ product.description | split: '<!-- split -->' | first }}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% else %}
{% if tabs %}
{{ product.description | split: '<!-- split -->' | first }}
{% else %}
<p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
{% endif %}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% endif %}
<hr />
{% endif %}
{% unless collection_handles contains 'coming-soon' %}
{% include 'product-form' %}
{% endunless %}
{% if settings.product_description_position == "bottom" %}
<hr />
{% if settings.description_words == "none" %}
{{ product.description | split: '<!-- split -->' | first }}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% else %}
{% if tabs %}
{{ product.description | split: '<!-- split -->' | first }}
{% else %}
<p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
{% endif %}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% endif %}
Then add (collection-swatch.liquid) in snippets and paste the code:
{% if settings.collection_swatches %}
{% assign file_extension = 'png' %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign option_index = forloop.index0 %}
{% assign values = '' %}
<div class="collection_swatches">
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<a href="{{ variant.url | within: collection }}" class="swatch">
<span data-image="{{ variant.featured_image | product_img_url: '1024x1024' }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: 'thumb' }}); background-position: center"></span>
</a>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
{% endif %}
{
"type": "checkbox",
"id": "display_related_products",
"label": "Show related products ([?](http:\/\/support.outofthesandbox.com\/customer\/portal\/articles\/942378-related-products))"
},
{
"type": "select",
"id": "products_per_row",
"label": "Related products per row",
"options": [
{
"value": "2",
"label": "2"
},
{
"value": "3",
"label": "3"
},
{
"value": "4",
"label": "4"
}
]
}
Then Paste this code at the end of single product page code ( product-template.liquid )
{% if section.settings.display_related_products %}
<div class="container">
<div class="featured-collection">
{% capture limit %}{{ section.settings.products_per_row | plus: 1 }}{% endcapture %}
{% if collection and collection.all_products_count > 1 %}
{% assign col = collection.handle %}
{% else %}
{% assign col = product.collections.last.handle %}
{% endif %}
{% for tag in product.tags %}
{% if tag contains 'meta-related-collection-' %}
{% assign related_collection_handle = tag | remove: 'meta-related-collection-' %}
{% if collections[related_collection_handle].all_products_count > 0 %}
{% assign col = related_collection_handle %}
{% assign collection = collections[col] %}
{% capture limit %}{{ collection.products_count | plus: 1 }}{% endcapture %}
{% endif %}
{% endif %}
{% endfor %}
{% if col and collections[col].all_products_count > 0 %}
{% if collections[col].all_products_count != 1 or collections[col].products.first.id != product.id %}
<h1><span>Related Products</span></h1>
{% assign skip_product = product %}
{% assign products = collections[col].products %}
{% assign products_per_row = section.settings.products_per_row %}
{% include 'product-loop' with sidebar: sidebar %}
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
- Then add (product-loop.liquid) in snippits and paste the code:-
{% assign product_found = false %}
{% assign skip = false %}
{% assign collection_group = products | map: 'id' %}
{% assign collection_group_thumb = collection_group | append : 'thumb' %}
{% assign collection_group_mobile = collection_group | append : 'mobile' %}
{% capture new_row %}
<br class="clear product_clear" />
{% endcapture %}
<div itemtype="http://schema.org/ItemList" class="row">
{% for product in products limit: limit %}
{% if product.id == skip_product.id or skip == true %}
{% assign product_found = true %}
{% else %}
{% if forloop.rindex0 == 0 and product_found == false and forloop.length != products.count and template != 'search' %}
{% assign skip = true %}
{% else %}
{% include 'product-thumbnail', sidebar: sidebar %}
{% if products_per_row == "2" %}
{% cycle collection_group: '', new_row %}
{% elsif products_per_row == "3" %}
{% cycle collection_group: '', '', new_row %}
{% elsif products_per_row == "4" %}
{% cycle collection_group: '', '', '', new_row %}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
</div>
Then add (product-thumbnail.liquid) in snippets and paste the code:-
<div class="col-sm-3 col-md-3 collection-block">
{% assign collection_handles = product.collections | map: 'handle' %}
{% if product.featured_image.alt contains 'youtube' or image.alt contains 'vimeo' %}
{% assign alt_text = product.title %}
{% else %}
{% assign alt_text = product.featured_image.alt %}
{% endif %}
<a href="{{ product.url | within: collection }}" itemprop="url">
<div class="product-img">
{% if product.featured_image %}
<img src="{{ product.featured_image | product_img_url: 'large' }}">
{% else %}
<img src="{{ 'loader.gif' | asset_url }}">
{% endif %}
</div>
<div class="info">
<span class="title" itemprop="name">{{ product.title }}</span>
<div class="vendor">
{{ product.vendor }}
</div>
{% if settings.enable_shopify_collection_badges %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
{% unless collection_handles contains 'coming-soon' %}
<span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="price" content="{{ product.price_min | money_without_currency }}" />
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="itemCondition" content="New" />
{% if product.available %}
{% if product.price_varies and product.price_min > 0 %}
<small><em>{{ 'products.general.from' | t }}</em></small>
{% endif %}
{% if product.price_min > 0 %}
<span class="money">{{ product.price_min | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
{% if product.compare_at_price_max > product.price %}
<div class="price">{{ product.compare_at_price_max | money }}</div>
{% endif %}
{% else %}
<span class="sold_out">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
</span>
{% endunless %}
</div>
{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'coming-soon' %}
<div class="new_banner">{{ 'collections.general.coming_soon' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="new_banner">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}
</a>
{% include 'collection-swatch' %}
</div>
{% if settings.quick_shop_enabled %}
{% if product.description contains "#tab1" %}
{% assign tabs = true %}
{% else %}
{% assign tabs = false %}
{% endif %}
<div id="product-{{ product.id }}" class="modal product-{{ product.id }} product_section {% if product.images.size > 1 %} thumbnail_position--{{settings.thumbnail_position}} {% endif %} product_slideshow_animation--{{settings.product_slideshow_animation}}"
data-thumbnail="{{settings.thumbnail_position}}"
data-slideshow-animation="{{settings.product_slideshow_animation}}"
data-slideshow-speed="{{settings.slideshow_speed}}">
<div class="container section" style="width: inherit">
<div class="eight columns" style="padding-left: 15px">
{% include 'product-images' with 'modal' %}
</div>
<div class="six columns">
<h3>{{ product.title }}</h3>
{% if settings.display_vendor_collection %}
<p class="vendor">
<span itemprop="brand">{{ product.vendor | link_to_vendor }}</span>
</p>
{% endif %}
{% assign variant = product.selected_or_first_available_variant %}
{% unless collection_handles contains 'coming-soon' %}
<p class="modal_price">
<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>
</p>
{% include 'product-notify-me' %}
{% endunless %}
{% if settings.product_description_position == "top" %}
{% if settings.description_words == "none" %}
{{ product.description | split: '<!-- split -->' | first }}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% else %}
{% if tabs %}
{{ product.description | split: '<!-- split -->' | first }}
{% else %}
<p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
{% endif %}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% endif %}
<hr />
{% endif %}
{% unless collection_handles contains 'coming-soon' %}
{% include 'product-form' %}
{% endunless %}
{% if settings.product_description_position == "bottom" %}
<hr />
{% if settings.description_words == "none" %}
{{ product.description | split: '<!-- split -->' | first }}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% else %}
{% if tabs %}
{{ product.description | split: '<!-- split -->' | first }}
{% else %}
<p>{{ product.description | strip_html | truncatewords: settings.description_words }}</p>
{% endif %}
<a href="{{ product.url | within: collection }}" class="view_product_info" title="{{ product.title | escape }} Details">{{ 'collections.general.view_product_details_html' | t }} <span class="icon-arrow-right"></span></a>
{% endif %}
{% endif %}
</div>
</div>
</div>
{% endif %}
Then add (collection-swatch.liquid) in snippets and paste the code:
{% if settings.collection_swatches %}
{% assign file_extension = 'png' %}
{% for option in product.options %}
{% assign downcased_option = option | downcase %}
{% if downcased_option contains 'color' or downcased_option contains 'colour' %}
{% assign option_index = forloop.index0 %}
{% assign values = '' %}
<div class="collection_swatches">
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<a href="{{ variant.url | within: collection }}" class="swatch">
<span data-image="{{ variant.featured_image | product_img_url: '1024x1024' }}" style="background-color: {{ value | split: ' ' | last | handle }}; background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: 'thumb' }}); background-position: center"></span>
</a>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
{% endif %}
Comments
Post a Comment