babaiators section
<div data-section-id="{{ section.id }}" data-section-type="slideshow-section" class="collection-page">
{%- assign collection = collections[blocks.settings.collection] -%}
{%- assign image_size = '540x600' -%}
<header class="collection-header">
<section class="top-hero collection-hero">
<img src="{{ "collection-hero.jpg" | asset_url }}" alt="Collection Hero">
<div class="collection-hero__caption">
<h2>Babiators for <span class="yellow">every outdoor adventure</span></h2>
</div>
</section>
<div class="collection-filter-wrap">
<div class="filter-block category-filter">
<div class="color-head">
<h2 class="text-center">Search by Category <i class="fa fa-caret-down medium-up--hide" aria-hidden="true"></i></h2>
</div>
<ul class="list--inline mob-hide">
<li><a href="/collections/sunglasses">Sunglasses</a></li>
<li><a href="/collections/swim-goggles">Swim Goggles</a></li>
<li><a href="/collections/accessories">Accessories</a></li>
<li><a href="/collections/gift-sets">Gift Sets</a></li>
</ul>
</div>
<div class="filter-mid">
<span>or</span>
</div>
<div class="filter-block age-filter">
<div class="color-head">
<h2 class="text-center">Search by Age <i class="fa fa-caret-down medium-up--hide" aria-hidden="true"></i></h2>
</div>
<ul class="list--inline mob-hide">
<li><a href="/collections/ages-0-5">0 - 5</a></li>
<li><a href="/collections/ages-2-6">2 - 6+</a></li>
<li><a href="/collections/ages-3-7">3 - 7</a></li>
<li><a href="/collections/ages-6-and-up">6 & Up</a></li>
</ul>
</div>
</div>
</header>
{% for block in section.blocks %}
<div class="grid grid--uniform grid--view-items">
{% case block.type %}
{% when 'collection' %}
{%- assign collection = collections[block.settings.collection] -%}
<div class="collection-group-head">
<h1 class="product-group-title">{{ collection.title }}</h1>
{{ collection.description }}
</div>
<div class="page-width">
{% for product in collection.products %}
<div class="grid__item medium-up--one-third">
{% include 'product-card-grid', grid_image_width: image_size %}
</div>
{% endfor %}
</div>
{% when 'product' %}
{%- assign product = all_products[block.settings.product] -%}
<div class="page-width">
<div class="collection-group-head">
<h1 class="product-group-title">{{ product.title }}</h1>
</div>
{% for variant in product.variants %}
<div class="grid__item medium-up--one-third">
{% include 'product-card-grid', grid_image_width: image_size, product: variant %}
</div>
{% endfor %}
</div>
{% endcase %}
</div>
{% endfor %}
</div>
{% schema %}
{
"name": "Add Shop Section",
"class": "babiators-sections",
"settings": [],
"blocks": [
{
"type": "collection",
"name": "Collection",
"settings": [
{
"id": "collection",
"type": "collection",
"label": "Collection"
}
]
},
{
"type": "product",
"name": "Product",
"settings": [
{
"id": "product",
"type": "product",
"label": "Product"
}
]
}
],
"presets": [{
"name": "collection",
"category": "Collection",
"settings": {
},
"blocks": [
{
"type": "collection"
},
{
"type": "product"
}
]
}]
}
{% endschema %}