Cacher is the code snippet organizer for pro developers

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