Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!-- /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 home-reveal">
{% 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}} lazyload lazypreload"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url({{ block.settings.image | img_url: "100x100"}});"></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}} lazyload lazypreload"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url({{ block.settings.image | img_url: "100x100"}});"></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 home-reveal">
<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 home-reveal">
<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>
{% when 'video' %}
{% if block.settings.unique-product-video != blank %}
{% if block.settings.unique-product-video == product.handle %}
{%- if block.settings.info -%}
{%- assign video_info = 1 -%}
{%- else -%}
{%- assign video_info = 0 -%}
{%- endif -%}
{%- if block.settings.autoplay -%}
{%- assign video_autoplay = 1 -%}
{%- else -%}
{%- assign video_autoplay = 0 -%}
{%- endif -%}
{%- if block.settings.loop -%}
{%- assign video_loop = 1 -%}
{%- else -%}
{%- assign video_loop = 0 -%}
{%- endif -%}
{% if block.settings.heading != blank %}
<div class="section-header">
<h2 class="mobile-header-space instagram-title text-center">{{ block.settings.heading | escape }}</h2>
</div>
{% endif %}
<div class="grid--full card-shadow product-related-items home-reveal">
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
{% else %}
{%- if block.settings.info -%}
{%- assign video_info = 1 -%}
{%- else -%}
{%- assign video_info = 0 -%}
{%- endif -%}
{%- if block.settings.autoplay -%}
{%- assign video_autoplay = 1 -%}
{%- else -%}
{%- assign video_autoplay = 0 -%}
{%- endif -%}
{%- if block.settings.loop -%}
{%- assign video_loop = 1 -%}
{%- else -%}
{%- assign video_loop = 0 -%}
{%- endif -%}
{% if block.settings.heading != blank %}
<div class="section-header">
<h2 class="mobile-header-space instagram-title text-center">{{ block.settings.heading | escape }}</h2>
</div>
{% endif %}
<div class="grid--full card-shadow product-related-items home-reveal">
<div class="video-wrapper">
{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo={{ video_info }}&autoplay={{ video_autoplay }}&loop={{ video_loop }}{% if block.settings.loop %}&playlist={{ block.settings.video_url.id }}{% endif %}&vq=720" width="850" height="480" frameborder="0" allowfullscreen></iframe>
{% endif %}
{% endif %}
</div>
</div>
{% endif %}
{% 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."
}
]
},
{
"type": "video",
"name": "Video",
"limit": 2,
"settings": [
{
"type": "product",
"id": "unique-product-video",
"label": "Product"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Video"
},
{
"type": "checkbox",
"id": "info",
"label": "Show video info",
"default": false
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Autoplay video",
"default": false
},
{
"type": "checkbox",
"id": "loop",
"label": "Loop video",
"default": false
},
{
"type": "video_url",
"id": "video_url",
"label": "Video link",
"accept": ["youtube"]
}
]
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.