/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'section-collection-list.css'"
Line 17:0 Unexpected "{"
Line 17:1 Unexpected "{"
Line 17:3 Expected identifier but found "'component-card.css'"
Line 19:0 Unexpected "<"
Line 20:11 Unexpected "{"
Line 20:13 Expected identifier but found "'component-slider.css'"
Line 20:67 Unexpected "<"
... and 133 more hidden warnings

**/
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}

<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-slider.css' | asset_url | stylesheet_tag }}</noscript>

<!-- Toegevoegde CSS om de collectie-/categorienaam te verbergen -->
<style>
  /* Verberg de collectie-/categorienaam */
  #collections .collection-list .card__information .card__heading {
    display: none !important;
  }
</style>

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.50 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.50 | round: 0 }}px;
  }
  @media screen and (min-width: 576px) and (max-width: 749px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
      padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
    }
  }
  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}

{%- liquid
  assign columns_mobile_int = section.settings.columns_mobile | plus: 0
  assign show_mobile_slider = false
  if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
    assign show_mobile_slider = true
  endif
  if section.settings.swiper_enable
    assign enable_slider = true  
  endif
-%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-list {{ section.settings.custom_class_name }} {% if section.settings.page_full_width %} page-full-width {% else %} page-width {% endif %} {% if section.settings.page_full_width_spacing %} page-full-width_spacing {% endif %} section-{{ section.id }}-padding isolate">
    <div class="row">
      <div class="collection-list-wrapper {% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %}">
        {%- unless section.settings.title == blank -%}
          <div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin content-align--{{ section.settings.column_alignment }}">
            {%- if section.settings.sub_heading != blank -%}  
              <h6 class="sub-heading">{{ section.settings.sub_heading | escape }}</h6>
            {%- endif -%} 
            {%- if section.settings.title != blank -%}  
              <h2 class="title {{ section.settings.heading_size }}">
                {{ section.settings.title | escape }}
              </h2>
            {%- endif -%} 
            {%- if section.settings.description != blank -%}  
              <p class="description">{{ section.settings.description }}</p>
            {%- endif -%}   
            {%- if section.settings.button_label != blank -%}
              <a {% if section.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ section.settings.button_link }}"{% endif %} class="button{% if section.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}">{{ section.settings.button_label | escape }}</a>
            {%- endif -%}
          </div>
        {%- endunless -%}
      </div>
    
      {% unless enable_slider %}
      <slider-component>
      {% else %}
      <collection-swiper-slider class="slider-mobile-gutter">
        <div data-slider-options='{"loop": "true","desktop": "{{ section.settings.desktop_column }}","laptop": "{{ section.settings.laptop_column }}", "tablet": "{{ section.settings.tablet_column }}","mobile": "{{ section.settings.mobile_column }}","auto_play": "{{ section.settings.auto_play }}"}'>
          <div class="swiper" data-swiper-slider>
      {%- endunless -%}
          <div class="collection-list {{ section.settings.collection_layout }} slider contains-card{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} {% if enable_slider %} swiper-wrapper{% else %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %}{% endif %} collection-list--{{ section.blocks.size }}-items"
            id="Slider-{{ section.id }}"
            role="list"
          >
            {%- liquid
              assign columns = section.blocks.size
              if columns > 3
                assign columns = 3
              endif
            -%}
            {%- for block in section.blocks -%}
              <div id="Slide-{{ section.id }}-{{ forloop.index }}" class="collection-list__item {% unless enable_slider %} grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% else %} swiper-slide{% endunless %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}" {{ block.shopify_attributes }}>
                {%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}             
                {%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
                {% render 'card-collection', card_collection: block.settings.collection, media_aspect_ratio: section.settings.image_ratio, columns: columns, placeholder_image: placeholder_image %}
              </div>
            {%- endfor -%}
          </div>
          {% unless enable_slider %}
            {%- if show_mobile_slider -%}
              {% if section.settings.arrow_on_mobile %}
                <div class="slider-buttons no-js-hidden">
                  <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}">{% render 'icon-caret' %}</button>
                  <div class="slider-counter caption"></div>
                  <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}">{% render 'icon-caret' %}</button>
                </div>
              {% endif %}
            {%- endif -%}
          </slider-component>
          {% else %}
            {% if section.settings.swiper_navigation != blank %}
              <div class="swiper-button-next"><span></span></div>
              <div class="swiper-button-prev"><span></span></div>
            {% endif %}
          </div>
          {% if section.settings.swiper_pagination != blank %}
            <div class="swiper-pagination"></div>
          {% endif %}
        </div>
      </collection-swiper-slider>
      {%- endunless -%}
    
      {%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
        <div class="center collection-list-view_all{% if show_mobile_slider %} small-hide medium-hide{% endif %}">
          <a href="{{ routes.collections_url }}" class="button">{{ 'sections.collection_list.view_all' | t }}</a>
        </div>
      {%- endif -%}
    </div>
  </div>     
</div>

{% schema %}
{
  "name": "t:sections.collection-list.name",
  "tag": "section",
  "class": "section section-collection-list",
  "max_blocks": 15,
  "settings": [
    {
      "type": "checkbox",
      "id": "page_full_width",
      "default": false,
      "label": "t:sections.all.page_full_width.label"
    },
    {
      "type": "checkbox",
      "id": "page_full_width_spacing",
      "default": false,
      "label": "t:sections.all.page_full_width_spacing.label"
    },
    {
      "type": "text",
      "id": "title",
      "default": "Collection List",
      "label": "t:sections.all.title.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "options": [
        {
          "value": "h2",
          "label": "t:sections.all.heading_size.options__1.label"
        },
        {
          "value": "h1",
          "label": "t:sections.all.heading_size.options__2.label"
        },
        {
          "value": "h0",
          "label": "t:sections.all.heading_size.options__3.label"
        }
      ],
      "default": "h1",
      "label": "t:sections.all.heading_size.label"
    },
    {
      "type": "text",
      "id": "sub_heading",
      "default": "Sub Heading",
      "label": "t:sections.all.sub_heading.label"
    },
    {
      "type": "text",
      "id": "description",
      "default": "Use this text to share the information which you like!.",
      "label": "t:sections.all.description.label"
    },
    {
      "type": "text",
      "id": "button_label",
      "default": "Button label",
      "label": "t:sections.all.button_label.label"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "t:sections.all.button_link.label"
    },
    {
      "type": "checkbox",
      "id": "button_style_secondary",
      "default": false,
      "label": "t:sections.all.button_style_secondary.label"
    },
    {
      "type": "select",
      "id": "column_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.collection-list.settings.column_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.collection-list.settings.column_alignment.options__2.label"
        }
      ],
      "default": "center",
      "label": "t:sections.collection-list.settings.column_alignment.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.collection-list.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.collection-list.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.collection-list.settings.image_ratio.options__3.label"
        }
      ],
      "default": "square",
      "label": "t:sections.collection-list.settings.image_ratio.label",
      "info": "t:sections.collection-list.settings.image_ratio.info"
    },
    {
      "type": "select",
      "id": "image_style",
      "options": [
        {
          "value": "default",
          "label": "t:sections.collection-list.settings.image_style.options__1.label"
        },
        {
          "value": "circle",
          "label": "t:sections.collection-list.settings.image_style.options__2.label"
        }
      ],
      "default": "default",
      "label": "t:sections.collection-list.settings.image_style.label",
      "info": "t:sections.collection-list.settings.image_style.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 5,
      "step": 1,
      "default": 3,
      "label": "t:sections.collection-list.settings.columns_desktop.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"