product-brand-features.liquid

<!-- /sections/product-brand-features.liquid -->
<!-- Desktop -->
{% for block in section.blocks %}
 {% case block.type %}
  {% when 'image' %}
<div class="grid--full card-shadow {% if block.settings.id == "left" %}feature-flex{% else %}feature-flex-right{% endif %} product-related-items">
  {% if block.settings.id == 'left' %}
  {% if block.settings.image == blank %}
  <div class="grid__item large--one-half left-image placeholder-features "></div>
  {% else %}
  <div class="grid__item large--one-half left-image {{block.settings.feature_image_position}}"  style="background-image: url({{ block.settings.image | img_url: 'master' }});"></div>
  {% endif %}
  <div class="grid__item large--one-half right-text text-center">
    <div class="feature-content home-reveal">
      {% if block.settings.title != blank %}
      <h1>{{ block.settings.title | escape }}</h1>
      {% endif %}
      {% if block.settings.subheading_richtext != blank %}
      <h5 class="black">{{ block.settings.subheading_richtext }}</h5>
      {% endif %}
      {% if block.settings.link != blank %}<button class="btn">{{ block.settings.button | escape }}</button>{% endif %}
    </div>
  </div>
  {% else %}
  <div class="grid__item large--one-half right-text text-center">
    <div class="feature-content home-reveal">
      {% if block.settings.title != blank %}
      <h1 class="black">{{ block.settings.title | escape }}</h1>
      {% endif %}
      {% if block.settings.subheading_richtext != blank %}
      <h5>{{ block.settings.subheading_richtext }}</h5>
      {% endif %}
      {% if block.settings.link != blank %}<button class="btn">{{ block.settings.button | escape }}</button>{% endif %}
    </div>
  </div>
  {% if block.settings.image == blank %}
  <div class="grid__item large--one-half right-image placeholder-features"></div>
  {% else %}
  <div class="grid__item large--one-half right-image {{block.settings.feature_image_position}}" style="background-image: url({{ block.settings.image | img_url: 'master' }});"></div>
  {% endif %}
  {% endif %}
</div>
{% when 'product' %}

{% 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 number_of_related_products_per_row = collection.all_products_count | minus:1%}
{% assign counter = 0 %}
{% assign break_at = 5 %}
{% assign current_product = product %}
{% capture related_items %}


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

{% case number_of_related_products_per_row %}
{% when 1 %}
{% assign grid_item_width = '' %}
{% when 2 %}
{% assign grid_item_width = 'large--one-half medium--one-half ' %}
{% when 3 %}
{% assign grid_item_width = 'large--one-third medium--one-half related-clear-less' %}
{% when 4 %}
{% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half related-clear-more' %}
{% when 5 %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half related-clear-more' %}
{% else %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half related-clear-more' %}
{% endcase %}

{% include 'product-grid-item' %}

{% assign counter = counter | plus: 1 %}
{% if counter == break_at %}
{% break %}
{% endif %}
{% endunless %}
{% endunless %}
{% endunless %}
{% endfor %}
{% endcapture %}
{% assign related_items = related_items | trim %}
{% unless related_items == blank %}

<div class="grid--full product-related-items">
  <div class="grid__item one-whole related-products {% if block.settings.title == blank %} related-product-padding {% else %} related-product-bottom-padding{% endif %}">
    {% if block.settings.title != blank %}
    <h1 class="section-title text-center black">{{ block.settings.title | escape }}</h1>
    {% endif %}
    {% assign collection = collections[section.settings.featured-collection] %}
    <div class="index-pgi">
    <div class="grid--full">
      {{ related_items }}
      </div>
    </div>
  </div>
</div>

  {% endunless %}
  {% endif %}
  {% when 'text' %}
<div class="grid--full product-related-items">
  <div class="grid__item one-whole related-products {% if block.settings.title == blank %} related-product-padding {% else %} related-product-bottom-padding{% endif %}">
  
    <div class="grid--full">
      <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
      </div>
  
  </div>
</div>
{% endcase %}
{% endfor %}
{% schema %}
{
"name": "Additional details",
"settings": [
],
"blocks": [
{
"type": "image",
"name": "Rich text and image",
"limit": 4,
"settings": [
{
"type":      "radio",
"id":        "id",
"label":     "Text",
"options": [
{ "value": "left", "label": "Image on left" },
{ "value": "right", "label": "Image on right" }
],
"default":   "right"
},
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "800 x 600px .png recommended"
},
{
"type": "select",
"id": "feature_image_position",
"label": "Image position",
"default": "feature-top",
"options": [
{
"value": "feature-top",
"label": "Top"
},
{
"value": "feature-middle",
"label": "Middle"
},
{
"value": "feature-bottom",
"label": "Bottom"
}
]
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Unique brand feature"
},
{
"type": "richtext",
"id": "subheading_richtext",
"label": "Subtitle",
"default": "<p>Your feature subtitle</p>"
}
]
},
{
"type": "product",
"name": "Related products",
"limit": 1,
"settings": [
{
"id": "title",
"type": "text",
"label": "Title",
"default": "Other fine products"
}
]
},
{
"type": "text",
"name": "Shopify reviews",
"limit": 1,
"settings": [
  {
"type": "header",
"content": "Note:",
"info": "This block requires that the [free Shopify reviews app](https:\/\/apps.shopify.com\/product-reviews) be installed on your store."
}

]
}
]
}
{% endschema %}

<style>
@media screen and (max-width:768px){
#shopify-section-product-brand-features .spr-reviews {
  margin: 5%;
}
}
</style>