Tutorial multiple collections on one page

page-collection-1

{%- assign collection = collections[section.settings.collection] -%}

{% case section.settings.grid %}
  {% when 1 %}
    {% assign grid_width_large = 'large--one-third push--large--one-third clear' %}
    {% assign grid_width_medium = 'medium--one-half push--medium--one-quarter clear' %}
    {% assign grid_width_small = 'small--one-whole' %}
  {% when 2 %}
    {% assign grid_width_large = 'large--one-half' %}
    {% assign grid_width_medium = 'medium--one-half' %}
    {% assign grid_width_small = 'small--one-half' %}
  {% when 3 %}
    {% assign grid_width_large = 'large--one-third' %}
    {% assign grid_width_medium = 'medium--one-third' %}
    {% assign grid_width_small = 'small--one-half' %}
  {% when 4 %}
    {% assign grid_width_large = 'large--one-quarter' %}
    {% assign grid_width_medium = 'medium--one-half' %}
    {% assign grid_width_small = 'small--one-half' %}
  {% when 5 %}
    {% assign grid_width_large = 'large--one-fifth' %}
    {% assign grid_width_medium = 'medium--one-third' %}
    {% assign grid_width_small = 'small--one-half' %}
  {% when 6 %}
    {% assign grid_width_large = 'large--one-sixth' %}
    {% assign grid_width_medium = 'medium--one-third' %}
    {% assign grid_width_small = 'small--one-half' %}
  {% else %}
    {% assign grid_width_large = 'large--one-quarter' %}
    {% assign grid_width_medium = 'medium--one-half' %}
    {% assign grid_width_small = 'small--one-half' %}
{% endcase %}

{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}


  
{% if section.settings.image != blank %}

  <div class="homepage-image preventOverflow {{ section.settings.text_color }} {{ section.settings.image_height }}" id="FeaturedImage-{{ section.id }}">
    <img src="{{ section.settings.image | img_url: '1400x' }}" alt="{{ section.settings.title }}" class="responsive-wide-image"/>
  </div>
{% endif %}

<div class="wrapper" style="margin-top: 3em">    
    {% if section.settings.title != blank %}
        <h4 class="home__subtitle">{{ section.settings.title | escape }}</h4>
    {% endif %}

    <div class="grid-uniform{% if settings.image_autoheight_enable %} image_autoheight_enable{% endif %}">
      {% for product in collection.products  limit: product_limit %}
        {% include 'product-grid-item' %}
      {% else %}
        {{ 'theme-onboarding.css' | asset_url | stylesheet_tag }}
        {% include 'onboarding-featured-products' %}
      {% endfor %}
    </div>

    {% if section.settings.show_view_all %}
    <div class="text-center" style="margin-bottom:3em;">
      <a href="{{ collection.url }}" class="btn btn--clear uppercase">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
    {% endif %}
</div>


{% schema %}
{
  "name": "Featured collection",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured Products"
    },
    {
      "id": "collection",
      "type": "collection",
      "label": "Collection"
    },
    {
      "type":    "range",
      "id":      "grid",
      "min":     1,
      "max":     6,
      "step":    1,
      "label":   "Products per row",
      "default": 3
    },
    {
      "type":    "range",
      "id":      "rows",
      "min":     1,
      "max":     8,
      "step":    1,
      "label":   "Number of rows",
      "default": 1
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "label": "Show 'View all' button",
      "default": false
    },

    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "image_height",
      "label": "Image height",
      "options": [
        { "value": "use_image", "label": "Full image"},
        { "value": "use_screen_one_third", "label": "Short image"}
      ],
      "default": "use_screen_one_third"
    }
  ]
}
{% endschema %}