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

Comments

Popular posts from this blog

get collections with product count in collection with images and collection name

add multiple logos with links || multiple images with links