{%- assign _hide_mobile = section.settings.hide_mobile -%}
{%- assign _layout = section.settings.layout -%}
{%- assign _lazyload = section.settings.lazyload -%}
{%- assign _type = section.settings.type -%}
{%- assign _carousel_style = section.settings.carousel_style -%}
{%- assign _navigator = section.settings.navigator -%}
{%- assign _paging = section.settings.paging -%}
{%- assign text_align = section.settings.text_align -%}
{%- assign _tab_style = section.settings.tab_style -%}
{%- assign _tab_title_style = section.settings.tab_title_style -%}
{%- assign _text_align_tab_title = section.settings.text_align_title -%}
{%- assign _title = section.settings.section_title -%}
{%- assign _limit = section.settings.limited -%}
{%- assign _item_per_row = section.settings.item_per_row -%}
{%- assign _number_active = section.settings.number_active | plus:0 -%}

{% capture emptyProduct01 %}
  {% for i in (1.._item_per_row)  %}
    <div class="product-wrapper">

      <div class="product-head">
        <div class="product-image">

          <div class="featured-img">
            {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
            {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
          </div>

        </div>
      </div> 

      <div class="product-content text-{{ text_align }}">
        <div class="pc-inner">
          <h5 class="product-name">{{ 'homepage.onboarding.product_title' | t }}</h5>
          <div class="product-price"><span class="price">{{ 1999 | money }}</span></div>
        </div>
      </div>

    </div>
  {% endfor %}
{% endcapture %}

{% capture emptyProduct02 %}
  {% for i in (1..2)  %}
    <div class="col-lg-12 col-md-6 col-sm-6 col-6">
      <div class="product-wrapper">

        <div class="product-head">
          <div class="product-image">

            <div class="featured-img">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>

          </div>
        </div> 

        <div class="product-content text-{{ text_align }}">
          <div class="pc-inner">
            <h5 class="product-name">{{ 'homepage.onboarding.product_title' | t }}</h5>
            <div class="product-price"><span class="price">{{ 1999 | money }}</span></div>
          </div>
        </div>

      </div>
    </div>
  {% endfor %}
{% endcapture %}

{% capture emptyProduct03 %}
  {% for i in (1..4)  %}
    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
      <div class="product-wrapper">

        <div class="product-head">
          <div class="product-image">

            <div class="featured-img">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>

          </div>
        </div> 

        <div class="product-content text-{{ text_align }}">
          <div class="pc-inner">
            <h5 class="product-name">{{ 'homepage.onboarding.product_title' | t }}</h5>
            <div class="product-price"><span class="price">{{ 1999 | money }}</span></div>
          </div>
        </div>

      </div>
    </div>
  {% endfor %}
{% endcapture %}

{% capture emptyProduct04 %}
  {% for i in (1..4)  %}
    <div class="col-lg-3 col-md-6 col-sm-6 col-6">
      <div class="product-wrapper">

        <div class="product-head">
          <div class="product-image">

            <div class="featured-img">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>

          </div>
        </div> 

        <div class="product-content text-{{ text_align }}">
          <div class="pc-inner">
            <h5 class="product-name">{{ 'homepage.onboarding.product_title' | t }}</h5>
            <div class="product-price"><span class="price">{{ 1999 | money }}</span></div>
          </div>
        </div>

      </div>
    </div>
  {% endfor %}
{% endcapture %}

{% capture emptyProduct05 %}
  {% for i in (1..6)  %}
    <div class="col-lg-4 col-md-6 col-sm-12 col-12">
      <div class="product-wrapper">

        <div class="product-head">
          <div class="product-image">

            <div class="featured-img">
              {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
              {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
            </div>

          </div>
        </div> 

        <div class="product-content text-{{ text_align }}">
          <div class="pc-inner">
            <h5 class="product-name">{{ 'homepage.onboarding.product_title' | t }}</h5>
            <div class="product-price"><span class="price">{{ 1999 | money }}</span></div>
          </div>
        </div>

      </div> 
    </div>
  {% endfor %}
{% endcapture %}
  
{% if _tab_style == '1' %}
  <div role="tabpanel" id="hp-tabs-{{ section.id }}" class="hp-tabs-section{% if _layout == 'full' %} no-padding{% endif %} layout-{{_layout }} tab-style-1{% if _hide_mobile %} d-none d-md-block{% endif %}{% if _type == 'row' %} heading-row-{{ _text_align_tab_title }}{% endif %}" style="background-color: {{ section.settings.bg_color }};">
    {% if _layout == 'boxed' and settings.show_left_column == false %}<div class="boxed">{% endif %}

      {% unless _title == blank %}
        <div class="title-wrapper"><h3>{{ _title }}</h3></div>

        {% if section.settings.enable_highlight %}
          <script>
            jQuery(document).ready(function(){
              let str = "{{ _title }}";
              let elm = jQuery('#hp-tabs-{{ section.id }} .title-wrapper h3');
              AT_Main.hLWords_sectionProductTabs(str, elm);
            })
          </script>
        {% endif %}  
      {% endunless %}

      <div class="wrap-tab-content align-{{ _text_align_tab_title }} type-{{ _type }}">
        {% if section.blocks.size > 0 %}

          <!-- Begin nav tabs -->

          <div class="nav-tab-wrapper {% unless _title == blank %}nav-tab-position{% endunless %}">
            <ul class="nav nav-tabs tab-heading tab-title-{{ _tab_title_style }}" role="tablist">

              {% for block in section.blocks %}
                {%- assign title = block.settings.tab_title -%}
                {%- assign collection = collections[block.settings.collection] -%}
                <li class="tab-title nav-item">
                  <a class="nav-link{% if _number_active == forloop.index %} active {% endif %}{% if _lazyload %} lazyload{% endif %}" href="#hp-tabs-{{ section.id }}-{{ forloop.index }}" aria-controls="hp-tabs-{{ section.id }}-{{ forloop.index }}" role="tab" data-toggle="tab">
                    {% unless block.settings.collection == blank %}
                      {% unless title == blank %}{{ title }}{% else %}{{ collection.title }}{% endunless %}

                    {% else %}
                      {{ 'homepage.onboarding.tab_title' | t }}

                    {% endunless %}
                  </a>
                </li>

              {% endfor %}

            </ul>
          </div>

          <!-- End nav tabs -->

          <!-- Begin tab content -->

          <div class="tab-content tab-title-{{ _tab_title_style }}">
            {% for block in section.blocks %}

                {%- assign collection = collections[block.settings.collection] -%}
                {%- assign _special_block = block.settings.special_block -%}
                {%- assign _big_product_style = block.settings.big_product_style -%}
                {%- assign _big_image_style = block.settings.big_image_style -%}
                {%- assign _product = block.settings.product -%}
                {%- assign _big_image = block.settings.big_image -%}
                {%- assign _big_image_size = block.settings.big_image_size -%}

                {% if _special_block == 'none' %}

                  <div role="tabpanel" class="special_block-{{ _special_block }} width-1 {% if _number_active == forloop.index %}show active {% endif %}tab-pane" id="hp-tabs-{{ section.id }}-{{ forloop.index }}">

                    {% unless block.settings.collection == blank or collection.products_count == 0 %}
                      <div class="hp-tabs-list tabs-list-{{ _type }}{% if _type == 'row' %} row-number-{{ _item_per_row }}{% endif %}">

                        {% for product in collection.products limit: _limit %}

                          {% if _type == 'carousel' and _carousel_style == '2' %}
                            {% capture _mod %}{{ forloop.index | modulo: 2 }}{% endcapture %}

                            {% if _mod == '1' %}<div class="product-two-rows">{% endif %}

                              {% include 'product-item' %}

                            {% if _mod == '0' or forloop.last %}</div>{% endif %}

                          {% else %}
                            {% include 'product-item' %}

                          {% endif %}

                        {% endfor %}

                      </div>

                    {% else %}
                      <div class="hp-tabs-list tabs-list-row row-number-4">   
                          {{ emptyProduct01 }}
                      </div>

                    {% endunless  %}

                  </div>

                {% else %}

                  <div role="tabpanel" class="special-block-{{ _special_block }} width-1 {% if _number_active == forloop.index %}show active {% endif %}tab-pane" id="hp-tabs-{{ section.id }}-{{ forloop.index }}">

                    {% if _special_block == 'product' %}
                      {% include 'big-product-style' %}

                    {% else %}
                      {% include 'big-image-style' %}
                    {% endif %}

                  </div>

                {% endif %}

            {% endfor %}
          </div>

          <!-- End tab content -->

          {% if _type == 'carousel' %}
            <script>
              jQuery(document).ready(function($) {

                jQuery("#hp-tabs-{{ section.id }} .tabs-list-carousel").length && jQuery("#hp-tabs-{{ section.id }} .tabs-list-carousel").on('initialize.owl.carousel initialized.owl.carousel change.owl.carousel changed.owl.carousel', function(e) {
                  var current = e.relatedTarget.current()
                  var items = $(this).find('.owl-stage').children()
                  var add = e.type == 'changed' || e.type == 'initialized'

                  items.eq(e.relatedTarget.normalize(current )).toggleClass('current', add)
                }).owlCarousel({
                    nav			: {{ _navigator }}
                    ,dots 		: {{ _paging }}
                    ,items		: {{ _item_per_row }}
                    ,margin		: 0
                    ,responsive : {
                      0:{
                        items: 1
                      }
                      ,360: {
                         items: {% if _carousel_style == '2' or _item_per_row == 2 %}1{% else %}2{% endif %}
                      }
                      ,576: {
                         items: 2
                      }   
                      ,768:{
                         items: {% if _carousel_style == '2' or _item_per_row == 2 %}2{% else %}3{% endif %}
                      }
                      ,1024:{
                        items: {{ _item_per_row }}
                      }                                                                 
                    }
                    ,navText	: ['<span class="button-prev"></span>', '<span class="button-next"></span>']
                });

              });
            </script>
          {% endif %}

        {% else %}

          <div class="nav-tab-wrapper">
            <ul class="nav nav-tabs tab-heading tab-title-1 align-{{ _text_align_tab_title }} type-{{ _type }}" role="tablist">
              {% for i in (1..3) %}

                <li class="tab-title nav-item">
                  <a class="nav-link{% if forloop.first %} active{% endif %}{% if _lazyload %} lazyload{% endif %}" href="#hp-tabs-{{ section.id }}-{{ forloop.index }}" aria-controls="hp-tabs-{{ section.id }}-{{ forloop.index }}" role="tab" data-toggle="tab">
                    {{ 'homepage.onboarding.tab_title' | t }}
                  </a>
                </li>

              {% endfor %}
            </ul>
          </div>

          <div class="tab-content">
            {% for i in (1..3) %}

              <div role="tabpanel" class="special-block-none {% if _number_active == forloop.index %}show active {% endif %}tab-pane" id="hp-tabs-{{ section.id }}-{{ forloop.index }}">
                <div class="hp-tabs-list tabs-list-row row-number-4">
                  {{ emptyProduct01 }}
                </div>
              </div>

            {% endfor %}
          </div>

        {% endif %}
    
      </div>

    {% if _layout == 'boxed' and settings.show_left_column == false %}</div>{% endif %}
  </div>

{% else %} 
  <div role="tabpanel" id="hp-tabs-{{ section.id }}" class="hp-tabs-section{% if _layout == 'full' %} no-padding{% endif %} layout-{{_layout }} tab-style-3{% if _hide_mobile %} d-none d-md-block{% endif %}{% if _type == 'row' %} heading-row-{{ _text_align_tab_title }}{% endif %}" style="background-color: {{ section.settings.bg_color }};">
    {% if _layout == 'boxed' and settings.show_left_column == false %}<div class="boxed">{% endif %}

      <div class="row">
        {% assign _image = section.settings.image %}
        {% assign _image_position = section.settings.image_position %}

        {% if _image_position == 'left' %}
          {% unless _image == blank  %}<div class="general-image col-lg-3 d-none d-lg-block"><a href="{{ section.settings.image_link }}"><img src="{{ _image | img_url: '300x' }}" /></a></div>{% endunless %}
        {% endif %}  

        <div class="wrap-tab-content align-{{ _text_align_tab_title }} type-{{ _type }} col-lg-9 col-sm-12 col-12" style="background-color: {{ section.settings.tab_03_color }}">
          <div class="slide_content">
            {% if section.blocks.size > 0 %}

              <!-- Begin nav tabs -->

              <div class="nav-tab-wrapper {% unless _title == blank %}nav-tab-position{% endunless %}">
                <ul class="nav nav-tabs tab-heading tab-title-{{ _tab_title_style }}" role="tablist">

                  {% for block in section.blocks %}
                    {%- assign title = block.settings.tab_title -%}
                    {%- assign collection = collections[block.settings.collection] -%}
                    <li class="tab-title nav-item">
                      <a class="nav-link{% if _number_active == forloop.index %} active {% endif %}{% if _lazyload %} lazyload{% endif %}" href="#hp-tabs-{{ section.id }}-{{ forloop.index }}" aria-controls="hp-tabs-{{ section.id }}-{{ forloop.index }}" role="tab" data-toggle="tab">
                        {% unless block.settings.collection == blank %}
                          {% unless title == blank %}{{ title }}{% else %}{{ collection.title }}{% endunless %}

                        {% else %}
                          {{ 'homepage.onboarding.tab_title' | t }}

                        {% endunless %}
                      </a>
                    </li>

                  {% endfor %}

                </ul>
              </div>

              <!-- End nav tabs -->

              <!-- Begin tab content -->

              <div class="tab-content tab-title-{{ _tab_title_style }}">
                {% for block in section.blocks %}

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

                    <div role="tabpanel" class="special_block-{{ _special_block }} width-1 {% if _number_active == forloop.index %}show active {% endif %}tab-pane" id="hp-tabs-{{ section.id }}-{{ forloop.index }}">

                      {% unless block.settings.collection == blank or collection.products_count == 0 %}
                        <div class="hp-tabs-list tabs-list-{{ _type }}{% if _type == 'row' %} row-number-{{ _item_per_row }}{% endif %}">

                          {% for product in collection.products limit: _limit %}

                            {% if _type == 'carousel' and _carousel_style == '2' %}
                              {% capture _mod %}{{ forloop.index | modulo: 2 }}{% endcapture %}

                              {% if _mod == '1' %}<div class="product-two-rows">{% endif %}

                                {% include 'product-item' %}

                              {% if _mod == '0' or forloop.last %}</div>{% endif %}

                            {% else %}
                              {% include 'product-item' %}

                            {% endif %}

                          {% endfor %}

                        </div>

                      {% else %}
                        <div class="hp-tabs-list tabs-list-row row-number-4">   
                            {{ emptyProduct01 }}
                        </div>

                      {% endunless  %}

                    </div>

                {% endfor %}
              </div>

              <!-- End tab content -->

              {% if _type == 'carousel' %}
                <script>
                  jQuery(document).ready(function($) {

                    jQuery("#hp-tabs-{{ section.id }} .tabs-list-carousel").length && jQuery("#hp-tabs-{{ section.id }} .tabs-list-carousel").on('initialize.owl.carousel initialized.owl.carousel change.owl.carousel changed.owl.carousel', function(e) {
                      var current = e.relatedTarget.current()
                      var items = $(this).find('.owl-stage').children()
                      var add = e.type == 'changed' || e.type == 'initialized'

                      items.eq(e.relatedTarget.normalize(current )).toggleClass('current', add)
                    }).owlCarousel({
                        nav     : {{ _navigator }}
                        ,dots     : {{ _paging }}
                        ,items    : {{ _item_per_row }}
                        ,margin   : 0
                        ,responsive : {
                          0:{
                            items: 1
                          }
                          ,360: {
                            items: {% if _carousel_style == '2' or _item_per_row == 2 %}1{% else %}2{% endif %}
                          }
                          ,576: {
                            items: 2
                          }   
                          ,768:{
                            items: {% if _carousel_style == '2' or _item_per_row == 2 %}2{% else %}3{% endif %}
                          }
                          ,1024:{
                            items: {{ _item_per_row }}
                          }                                                                 
                        }
                        ,navText  : ['<span class="button-prev"></span>', '<span class="button-next"></span>']
                    });

                  });
                </script>
              {% endif %}

            {% else %}

              <div class="nav-tab-wrapper">
                <ul class="nav nav-tabs tab-heading tab-title-1 type-{{ _type }} align-{{ _text_align_tab_title }}" role="tablist">
                  {% for i in (1..3) %}

                    <li class="tab-title nav-item">
                      <a class="nav-link{% if forloop.first %} active{% endif %}{% if _lazyload %} lazyload{% endif %}" href="#hp-tabs-{{ section.id }}-{{ forloop.index }}" aria-controls="hp-tabs-{{ section.id }}-{{ forloop.index }}" role="tab" data-toggle="tab">
                        {{ 'homepage.onboarding.tab_title' | t }}
                      </a>
                    </li>

                  {% endfor %}
                </ul>
              </div>

              <div class="tab-content">
                {% for i in (1..3) %}

                  <div role="tabpanel" class="special-block-none {% if _number_active == forloop.index %}show active {% endif %}tab-pane" id="hp-tabs-{{ section.id }}-{{ forloop.index }}">
                    <div class="hp-tabs-list tabs-list-row row-number-4">
                      {{ emptyProduct01 }}
                    </div>
                  </div>

                {% endfor %}
              </div>

            {% endif %}
          </div>
        </div>

        {% if _image_position == 'right' %}
          {% unless _image == blank  %}<div class="general-image col-lg-3 d-none d-lg-block"><a href="{{ section.settings.image_link }}"><img src="{{ _image | img_url: '300x' }}" /></a></div>{% endunless %}
        {% endif %}
      </div>

    {% if _layout == 'boxed' and settings.show_left_column == false %}</div>{% endif %}
  </div>
{% endif %}  

{% schema %}
{
  "name": "Products Tabs",
  "max_blocks": 6,
  "settings": [
	{
      "type": "paragraph",
      "content": "Created by 'Products Tabs' section"
    },
	{
      "id": "title",
      "type": "text",
      "label": "Section Label",
      "default": "Products Tabs"
    },
    {
      "type": "checkbox",
      "id": "lazyload",
      "label": "Enable Lazy loading",
      "default": true
    },
    {
      "type": "header",
      "content": "Layout"
    },
	{
      "type": "checkbox",
      "id": "hide_mobile",
      "label": "Visibility: Hide for Mobile"
    },
	{
      "type": "select",
      "id": "layout",
      "label": "Section Layout Mode",
      "default": "boxed",
      "options": [
        {
          "value": "boxed",
          "label": "Boxed"
        },
        {
          "value": "full",
          "label": "Wide"
        }
      ]
    },
	{
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#fff"
    },
	{
      "type": "select",
      "id": "type",
      "label": "Type",
      "default": "row",
      "options": [
        {
          "value": "row",
          "label": "Row"
        },
        {
          "value": "carousel",
          "label": "Carousel"
        }
      ],
      "info": "Use when Product Tab - Special block is Type 03 - None"
    },
	{
      "type": "select",
      "id": "carousel_style",
      "label": "Carousel style",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "Style 01 - 1 row"
        },
        {
          "value": "2",
          "label": "Style 02 - 2 rows"
        }
      ],
      "info": "Use when Product tab Special block is Type 03 - None"
    },
    {
      "type": "text",
      "id": "number_active",
      "label": "Set active tab by default",
      "default": "1",
      "info": "Value is the tab order number."
    },
    {
      "type": "text",
      "id": "limited",
      "label": "Total items for each tab",
      "default": "4"
    },
	{
      "type": "range",
      "id": "item_per_row",
      "label": "Number of items per row",
      "min": 2,
      "max": 7,
      "step": 1,
      "default": 4,
      "info": "Use when Product Tab - Special Block is Tyle 03 - None"
    },
    {
      "type": "header",
      "content": "NAVIGATOR & PAGINATION"
    },
    {
      "type": "checkbox",
      "id": "navigator",
      "label": "Show Navigator",
      "default": true
    },
	{
      "type": "checkbox",
      "id": "paging",
      "label": "Show Pagination",
      "default": false
    },
    {
      "type": "header",
      "content": "Tab Style"
    },
	{
      "type": "select",
      "id": "tab_style",
      "label": "Tab style",
      "default": "1",
      "options": [
        {
          "value": "1",
          "label": "Style 01 - Tab"
        },
        {
          "value": "3",
          "label": "Style 02 - Tab with Image"
        }
      ],
      "info":"Heading and Subheading will not work with Style 02"
    },
    {
      "type":"paragraph",
      "content":"----Tab Style 02 Settings"
    },
    {
      "type":"image_picker",
      "id":"image",
      "label":"Choose an image"
    },
    {
      "type":"text",
      "id":"image_link",
      "label":"Image link"
    },
    {
      "type":"select",
      "id":"image_position",
      "label":"Image position",
      "options":[
        {"value":"left","label":"Left"},
        {"value":"right","label":"Right"}
      ],
      "default":"left"
    },
    {
      "type":"color",
      "id":"tab_03_color",
      "label":"Tab Style 02 Background Color",
      "default":"#ffffff"
    },
    {
      "type":"paragraph",
      "content":"----Heading & Subheading Settings"
    },
	{
      "type": "text",
      "id": "section_title",
      "label": "Heading",
      "default": "Newarrivals"
    },
    {
      "type":"checkbox",
      "id":"enable_highlight",
      "label":"Enable highlight",
      "info":"This function will dehighlight the last word of your Heading (if there are more than 2 words)",
      "default":true
    },
    {
      "type": "select",
      "id": "text_align_title",
      "label": "Text align for product tab heading",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
		{ "value": "right", "label": "Right" }
      ],
      "default": "center"
    },
	{
      "type": "select",
      "id": "tab_title_style",
      "label": "Tab heading style",
      "options": [
        { "value": "1", "label": "Style 01" },
        { "value": "2", "label": "Style 02" },
		{ "value": "3", "label": "Style 03" },
		{ "value": "4", "label": "Style 04" }
      ],
      "default": "1",
      "info": "Style 03 only for Product Tab with Special Block 'Type 01 - Product', Product style: 'Left 01'"
    },

    {
      "type": "header",
      "content": "Layout Content"
    },
	{
      "type": "select",
      "id": "text_align",
      "label": "Text align for product heading",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
		{ "value": "right", "label": "Right" }
      ],
      "default": "left"
    }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "Product Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_title",
          "label": "Heading",
          "default": "Lifestyle"
        },
        {
          "id": "collection",
          "type": "collection",
          "label": "Collection"
        },
		{
          "type": "header",
          "content": "Special block"
		},
    {
      "type":"paragraph",
      "content":"Special Block is not used with 'Tab Style 02 - Tab with Image'"
    },
		{
          "type": "select",
          "id": "special_block",
          "label": "Type",
          "default": "none",
          "options": [
            {
              "value": "product",
              "label": "Type 01 - Product"
            },
            {
              "value": "image",
              "label": "Type 02 - Image"
            },
			{
              "value": "none",
              "label": "Type 03 - None"
            }
          ]
        },
        {
          "type": "select",
          "id": "big_product_style",
          "label": "Product Style",
          "default": "left-01",
          "options": [
            {
              "value": "left-01",
              "label": "Left 01"
            },
			{
              "value": "left-02",
              "label": "Left 02"
            },
            {
              "value": "center",
              "label": "Center"
            },
			{
              "value": "right",
              "label": "Right"
            }
          ]
        },
		{
          "id": "product",
          "type": "product",
          "label": "Product"
        },
		{
          "type": "text",
          "id": "product_sold",
          "label": "Number of product already sold",
          "info": "Only for Product style is Left 01. Blank to hide."
        },
		{
          "type": "text",
          "id": "product_expire",
          "label": "Product expire",
          "info": "Format is mm/dd/yyyy. Only for Product style is Left 01."
        },
		{
          "type": "select",
          "id": "big_image_style",
          "label": "Image style",
          "default": "left",
          "options": [
            {
              "value": "left",
              "label": "Left"
            },
			{
              "value": "right",
              "label": "Right"
            }
          ]
        },
		{
          "type": "image_picker",
          "id": "big_image",
          "label": "Image"
        },
		{
          "type": "text",
          "id": "big_image_size",
          "label": "Image size (pixels)",
          "default": "360x618",
          "info": "Default is 360x618 pixels"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Products Tabs",
      "category": "Collection",
      "blocks": [
        { "type": "product" },
		{ "type": "product" },
		{ "type": "product" }
      ]
    }
  ]
}
{% endschema %}
