Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{% comment %} Settings {% endcomment %}
{% assign title = section.settings.title %}
{% if title == blank %}
{% assign no_title = "no-title" %}
{% endif %}
{% if section.settings.section_type == 'images' %}
{% assign show_images = true %}
{% assign show_collection = false %}
{% assign num_blocks = section.blocks.size %}
{% if num_blocks == 2 %}
{% assign wrapper_1_width = 'lg_s1' %}
{% elsif num_blocks == 3 %}
{% assign wrapper_1_width = 'lg_s1' %}
{% assign three_blocks_padding = 'three-blocks-padding'%}
{% elsif num_blocks == 4 %}
{% assign block_4_padding = 'block-4-padding' %}
{% assign wrapper_1_width = 'lg_s12' %}
{% else %}
{% assign wrapper_1_width = 'lg_s12' %}
{% endif %}
{% endif %}
{% if section.settings.section_type == 'collection' %}
{% assign show_images = false %}
{% assign show_collection = true %}
{% assign collectionName = section.settings.collection %}
{% assign num_blocks = collections[collectionName].products.length %}
{% if num_blocks == 2 %}
{% assign wrapper_1_width = 'lg_s1' %}
{% elsif num_blocks == 3 %}
{% assign wrapper_1_width = 'lg_s1' %}
{% assign three_blocks_padding = 'three-blocks-padding'%}
{% elsif num_blocks == 4 %}
{% assign block_4_padding = 'block-4-padding' %}
{% assign wrapper_1_width = 'lg_s12' %}
{% else %}
{% assign wrapper_1_width = 'lg_s12' %}
{% endif %}
{% if num_blocks == 1 %}
<style>
.mosaic-block-image {background-size: contain !important;}
</style>
{% endif %}
{% if num_blocks == 5 %}
<style>
.fifth-block-padding {background-size: contain !important;}
</style>
{% endif %}
{% endif %}
{% comment %} Section {% endcomment %}
<section data-section-id="{{ section.id }}" data-section-type="mosaic" class="mosaic container-wrap mosaic-module style-nav-default no-title" id="mosaic-module-{{ section.id }}">
<div class="container">
{% if title != blank %}
<div class="mosaic-title row inline row-sm">
<div class="block block-float-{{section.id}} s1 u-center">
<h1 class="bold">{{ title }}</h1>
</div>
</div>
{% endif %}
{% if show_images == true %}
<div class="row inline mosaic--images {% unless section.settings.full_width_layout %}row-lg{% endunless %} {% if num_blocks == 1 %}just-one-block{% endif %} {% if num_blocks == 4 %}four-blocks-margin{% endif %}">
{% if num_blocks > 1 %}
<div class="column block block-float-{{section.id}} s1 {{ wrapper_1_width }} {% if wrapper_1_width == "lg_s12" %}halfwidth-lg-{{section.id}}{% endif %} row inline">
{% for block in section.blocks %}
{% if forloop.index < 4 %}
<div class="mosaic-block block-without-marg-{{section.id}} block block-float-{{section.id}} {% if forloop.index == 3 and num_blocks != 3 %}feature s1{% else%}s1 {% unless num_blocks == 3 %}sm_s12 halfwidth-sm-{{section.id}}{% else %}sm_s13 onethirdwidth-{{section.id}}{% if section.settings.remove_spaces%} fullwidth-three-blocks-{{section.id}} {% else %}{{ three_blocks_padding }} {% endif %}{% endunless %}{%endif%}" {{ block.shopify_attributes }}>
{% if block.settings.image %}
<a {% if block.settings.href != blank %} href="{{ block.settings.href }}" {% endif %} class="mosaic-block-image " title="{{ image.alt }}" data-bg-src="{{ block.settings.image | img_url: 'master' }}">
{% if block.settings.href != blank or block.settings.subheading != blank or block.settings.heading != blank %}
<a tabindex="-1" {% if block.settings.href %}href="{{ block.settings.href }}"{% endif %} class="mosaic-block-inner {% unless block.settings.subheading == blank and block.settings.heading == blank %}block--has-image{% endunless %}">
<div class="content">
<p>{{block.settings.subheading}}</p>
<p class = "h4">{{block.settings.heading}}</p>
</div>
</a>
{% endif %}
</a>
{% else %}
<a {% if block.settings.href != '' %} href="{{ block.settings.href }}"{% endif %} class="mosaic-block-image svg-placeholder " title="Placeholder">
{{ 'image' | placeholder_svg_tag }}
<a tabindex="-1" {% if block.settings.href != '' %} href="{{ block.settings.href }}" {% endif %} class="mosaic-block-inner block--has-image">
<div class="content">
<p>{{block.settings.subheading}}</p>
<p class = "h4">{{block.settings.heading}}</p>
</div>
</a>
</a>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="column block block-float-{{section.id}} s1 lg_s12 halfwidth-lg-{{section.id}} row inline">
{% for block in section.blocks %}
{% if forloop.index > 3 %}
{% if forloop.index == 5 and num_blocks == 5 %}
{% assign only_five = true %}
{% endif %}
<div class="mosaic-block block-without-marg-{{section.id}} block block-float-{{section.id}} {% if forloop.index == 4 or only_five %}feature s1{% else%}s1 sm_s12 halfwidth-sm-{{section.id}}{% endif %} mosaic-block-{{ forloop.index }} {% if forloop.index == 4 and num_blocks == 4 %}{% if section.settings.remove_spaces%} fullwidth-block-four-{{section.id}} {%else%}block-4-padding{%endif%}{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.image %}
<a {% if block.settings.href != blank %} href="{{ block.settings.href }}" {% endif %} class="mosaic-block-image {% if forloop.index == 4 %} {% if section.settings.remove_spaces%} fullwidth-block-four-{{section.id}} {%else%} {{block_4_padding}} {% endif %}{% elsif forloop.index == 5 and num_blocks == 5 %}{% if section.settings.remove_spaces%} padding-block-five-{{section.id}} {%else%}fifth-block-padding {%endif%}{% endif %}" title="{{ image.alt }}" data-bg-src="{{ block.settings.image | img_url: 'master' }}">
{% if block.settings.href != blank or block.settings.subheading != blank or block.settings.heading != blank %}
<a tabindex="-1" {% if block.settings.href != blank %} href="{{ block.settings.href }}" {% endif %} class="mosaic-block-inner {% unless block.settings.subheading == blank and block.settings.heading == blank %}block--has-image{% endunless %}">
<div class="content">
<p>{{block.settings.subheading}}</p>
<p class = "h4">{{block.settings.heading}}</p>
</div>
</a>
{% endif %}
</a>
{% else %}
<a {% if block.settings.href != '' %} href="{{ block.settings.href }}"{% endif %} class="mosaic-block-image svg-placeholder {% if forloop.index == 4 %} {% if section.settings.remove_spaces%} fullwidth-block-four-{{section.id}} {%else%} {{block_4_padding}} {% endif %}{% elsif forloop.index == 5 and num_blocks == 5 %} {% if section.settings.remove_spaces%} padding-block-five-{{section.id}} {%else%}fifth-block-padding {%endif%} {% endif %}" title="Placeholder">
{{ 'image' | placeholder_svg_tag }}
<a tabindex="-1" {% if block.settings.href != '' %}href="{{ }}"{% endif %} class="mosaic-block-inner block--has-image">
<div class="content">
<p>{{block.settings.subheading}}</p>
<p class = "h4">{{block.settings.heading}}</p>
</div>
</a>
</a>
{% endif %}
{% if i >= 5 %}
<span class="ie8-after"></span>
{% endif %}
</div>
{% endif %}
{% endfor %}
<span class="ie8-after"></span>
</div>
<span class="ie8-after"></span>
</div>
{% else %}
{% for block in section.blocks %}
<div class="mosaic-block block-without-marg-{{section.id}} blockfeature s1 mosaic-block-{{ forloop.index }}">
{% if block.settings.image %}
<a {% if block.settings.href != '' %}href="{{ block.settings.href }}"{% endif %} title="{{ image.alt }}" class = "mosaic-block-image one-block" data-bg-src="{{ block.settings.image | img_url: 'master' }}">
{% if block.settings.href != blank or block.settings.subheading != blank or block.settings.heading != blank %}
<a {% if block.settings.href != blank %} href="{{ block.settings.href }}" {% endif %} class="mosaic-block-inner {% unless block.settings.subheading == blank and block.settings.heading == blank %}block--has-image{% endunless %}">
<div class="content">
<p>{{block.settings.subheading}}</p>
<p class = "h4">{{block.settings.heading}}</p>
</div>
</a>
{% endif %}
</a>
{% else %}
<a {% if block.settings.href != '' %}href="{{ block.settings.href }}"{% endif %} class="svg-placeholder one-block mosaic-block-image"title="Placeholder">
{{ 'image' | placeholder_svg_tag }}
{% if block.settings.href != blank or block.settings.subheading != blank or block.settings.heading != blank %}
<a {% if block.settings.href != blank %} href="{{ block.settings.href }}" {% endif %} class="mosaic-block-inner {% unless block.settings.subheading == blank and block.settings.heading == blank %}block--has-image{% endunless %}">
<div class="content">
<p>{{block.settings.subheading}}</p>
<p class = "h4">{{block.settings.heading}}</p>
</div>
</a>
{% endif %}
</a>
{% endif %}
</div>
{% endfor %}
{% endif %}
{% endif %}
{% if show_collection == true %}
{% unless num_blocks == blank %}
<div class="row inline {% unless section.settings.full_width_layout %}row-lg{% endunless %}">
<div class="column block block-float-{{section.id}} s1 {% if num_blocks != 1 %}{{ wrapper_1_width }} {% if wrapper_1_width == "lg_s12" %} halfwidth-lg-{{section.id}}{%endif%} {% endif %} row inline">
{% for product in collections[collectionName].products limit:3 %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% assign on_sale_class = ' is-sale' %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{% unless num_blocks == 1 %}
<div class="mosaic-block block-without-marg-{{section.id}} block block-float-{{section.id}} {% if forloop.index == 3 and num_blocks != 3 %}feature s1{% else%}s1 {% unless num_blocks == 3 %}sm_s12 halfwidth-sm-{{section.id}}{% else %}sm_s13 onethirdwidth-{{section.id}}{% if section.settings.remove_spaces%} fullwidth-three-blocks-{{section.id}} {% else %}{{ three_blocks_padding }} {% endif %} {% endunless %}{%endif%}" >
{% else %}
<div class="mosaic-block block-without-marg-{{section.id}} blockfeature s1 mosaic-block-{{ forloop.index }}">
{% endunless %}
{% if on_sale == true or sold_out == true %}
<span class="h4 product-status-flag {% if sold_out == true %}is-sold-out{% endif %}{{on_sale_class}}">
{% if sold_out == true %}
{{ 'products.labels.sold_out' | t }}
{% else if on_sale == true %}
{{ 'products.labels.on_sale' | t }}
{% else if on_sale == true and sold_out == true %}
{{ 'products.labels.sold_out' | t }}
{% endif %}
</span>
{% endif %}
<a href="{{product.url}}" class="mosaic-block-image {% if num_blocks == 1 %}one-block{% endif %}" title="{{ product.featured_image.alt }}" data-bg-src="{{ product.featured_image | img_url: 'master' }}"></a>
<a tabindex="-1" href="{{ product.url }}" class="mosaic-block-inner mosaic--product">
<div class="content">
<h3><strong>{{ product.title }}</strong></h3>
{% if product.price_varies %}
<p class="h4">{{ 'products.labels.price_from' | t }} {{ product.price_min | money }}</p>
{% else %}
{% if on_sale == true %}
<p class="h4 sale">
<strike>{{ product.compare_at_price | money }}&nbsp;</strike>
{{ product.price | money }}
</p>
{% else %}
<p class="h4">{{ product.price | money }}</p>
{% endif %}
{% endif %}
</div>
</a>
</div>
{% endfor %}
</div>
<div class="column block block-float-{{section.id}} s1 lg_s12 halfwidth-lg-{{section.id}} row inline">
{% for product in collections[collectionName].products limit:3 offset: 3 %}
{% assign index = forloop.index | plus: 3 %}
{% if index == 5 and num_blocks == 5 %}
{% assign only_five = true %}
{% endif %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% assign on_sale_class = ' is-sale' %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
<div class="mosaic-block block-without-marg-{{section.id}} block block-float-{{section.id}} {% if index == 4 or only_five %}feature s1{% else%}s1 sm_s12 halfwidth-sm-{{section.id}}{% endif %} mosaic-block-{{ index }} {% if index == 4 and num_blocks == 4 %}{% if section.settings.remove_spaces %}fullwidth-block-four-{{section.id}}{%else%}only-four-padding{%endif%}{% endif %}" {{ block.shopify_attributes }}>
{% if on_sale == true or sold_out == true %}
<span class="h4 product-status-flag{%if sold_out == true %} is-sold-out{% endif %}{{on_sale_class}}">
{% if sold_out == true %}
{{ 'products.labels.sold_out' | t }}
{% else if on_sale == true %}
{{ 'products.labels.on_sale' | t }}
{% else if on_sale == true and sold_out == true %}
{{ 'products.labels.sold_out' | t }}
{% endif %}
</span>
{% endif %}
<a href="{{product.url}}" class="mosaic-block-image {% if index == 4 %} {% if section.settings.remove_spaces%} fullwidth-block-four-{{section.id}} {%else%}{{block_4_padding}}{% endif %}{% elsif index == 5 and num_blocks == 5 %} {% if section.settings.remove_spaces%} padding-block-five-{{section.id}} {%else%}fifth-block-padding {%endif%}{% endif %}" title="{{ product.featured_image.alt }}" data-bg-src="{{ product.featured_image | img_url: 'master' }}"></a>
<a tabindex="-1" href="{{ product.url }}" class="mosaic-block-inner mosaic--product">
<div class="content">
<h3><strong>{{ product.title }}</strong></h3>
{% if product.price_varies %}
<p class="h4">{{ 'products.labels.price_from' | t }} {{ product.price_min | money }}</p>
{% else %}
{% if on_sale == true %}
<p class="h4 sale">
<strike>{{ product.compare_at_price | money }}&nbsp;</strike>
{{ product.price | money }}
</p>
{% else %}
<p class="h4">{{ product.price | money }}</p>
{% endif %}
{% endif %}
</div>
</a>
</div>
{% endfor %}
</div>
<span class="ie8-after"></span>
</div>
{% else %}
<div class="row inline {% unless section.settings.full_width_layout %}row-lg{% endunless %}">
<div class="column block block-float-{{section.id}} s1 {% if collections[collectionName].products.length != 2 %}lg_s12 halfwidth-lg-{{section.id}} {% endif %} row inline">
{% for i in (1..3) %}
<div class="mosaic-block block-without-marg-{{section.id}} block-float-{{section.id}} block {% if forloop.length == 2 %}s1 sm_s12 halfwidth-sm-{{section.id}}{% elsif forloop.last == true %}feature s1{% else %}s1 sm_s12 halfwidth-sm-{{section.id}}{%endif%}">
<a {% if block.settings.href != '' %}href="{{ block.settings.href }}"{% endif %} class="mosaic-block-image svg-placeholder {% if forloop.index == 4 %} {% if section.settings.remove_spaces%} fullwidth-block-four-{{section.id}} {%else%}{{block_4_padding}} {% endif %}{% elsif forloop.index == 5 and num_blocks == 5 %} {% if section.settings.remove_spaces%} padding-block-five-{{section.id}} {%else%}fifth-block-padding {%endif%} {% endif %}" title="Placeholder">
{{ 'image' | placeholder_svg_tag }}
</a>
</div>
{% endfor %}
</div>
<div class="column block block-float-{{section.id}} s1 lg_s12 halfwidth-lg-{{section.id}} row inline">
{% for i in (3..5) %}
<div class="mosaic-block block-without-marg-{{section.id}} block block-float-{{section.id}} {% if forloop.first == true %}feature s1{% else%}s1 sm_s12 halfwidth-sm-{{section.id}}{% endif %} mosaic-block-{{ i }}">
<a {% if block.settings.href != '' %}href="{{ block.settings.href }}"{% endif %} class="mosaic-block-image svg-placeholder {% if forloop.index == 4 %} {% if section.settings.remove_spaces%} fullwidth-block-four-{{section.id}} {%else%}{{block_4_padding}} {% endif %}{% elsif forloop.index == 5 and num_blocks == 5 %} {% if section.settings.remove_spaces%} padding-block-five-{{section.id}} {%else%}fifth-block-padding {%endif%} {% endif %}" title="Placeholder">
{{ 'image' | placeholder_svg_tag }}
</a>
</div>
{% endfor %}
</div>
<span class="ie8-after"></span>
</div>
{% endunless %}
{% endif %}
</div>
</section>
{% if section.settings.remove_spaces %}
<style>
.mosaic.no-title{
margin-bottom: -38px!important;
margin-top: 0px!important;
}
@media screen and (min-width: 550px){
.halfwidth-sm-{{section.id}}{
width: 50%!important;
}
.onethirdwidth-{{section.id}}{
width: 33.333333%!important;
}
.block-without-marg-{{section.id}}{
margin-bottom: 0px!important;
padding-top: 50%;
}
.block-float-{{section.id}}{
float: left!important;
}
.fullwidth-three-blocks-{{section.id}}{
padding-top: 33.4%!important;
}
.fullwidth-block-four-{{section.id}}{
padding-top: 150%!important;
}
.padding-block-five-{{section.id}}{
padding-top: 50% !important;
}
}
@media screen and (min-width: 1023px){
.halfwidth-lg-{{section.id}} {
width: 50%!important;
}
}
</style>
{% endif %}
{% comment %} Schema {% endcomment %}
{% schema %}
{
"name": "Mosaic",
"max_blocks": 6,
"settings": [
{
"type": "header",
"content": "Layout options"
},
{
"type": "radio",
"id": "section_type",
"label": "Choose a layout",
"options": [
{
"value": "collection",
"label": "Feature a collection"
},
{
"value": "images",
"label": "Feature images"
}
],
"default": "collection",
"info": "Choose to display a collection or images, but not both."
},
{
"type": "checkbox",
"id": "full_width_layout",
"label": "Use full width layout",
"default": true
},
{
"type": "checkbox",
"id": "remove_spaces",
"label": "Remove spaces",
"default": true
},
{
"type": "text",
"id": "title",
"label": "Title"
},
{
"type": "header",
"content": "Collection"
},
{
"type": "collection",
"id": "collection",
"label": "Collection to be displayed",
"info": "To set the order of the products, set \"Sort\" to \"Manual\" in the collection settings"
}
],
"blocks": [
{
"type": "image",
"name": "Block",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "href",
"label": "Link"
},
{
"type": "text",
"id": "subheading",
"label":"Subheading",
"default": "Use the subheading to elaborate on the heading"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default":"Describe your image in a few words"
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Mosaic",
"settings": {
"section_type": "collection",
"full_width_layout": true,
"title": "",
"collection": "frontpage"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment