Section in shopify

section-product-lists.liquid

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

{% paginate collection.products by {{section.settings.prod_per_page}} %}
{% comment %}ly_global_begin{% endcomment %}{% include 'ly-global' %}{% comment %}ly_global_end{% endcomment %}
<div class="wrap-bread-crumb breadcrumb_collection2">
  <div class="text-center bg-breadcrumb" style="background-image : url({% if section.settings.bg_breadcrumb != blank  %}{{section.settings.bg_breadcrumb | img_url : 'master'}} {% else %}//placehold.it/1920x510 {% endif %})">
    <div class="title-page">

      <h1 class="">{{page.title}}</h1>

    </div>
    <div class="title-collection">
      <p><span>{{page.content}}</span></p>
    </div>
    {% include 'breadcrumb' %}
  </div>
</div>
<div data-section-id="{{ section.id }}" data-section-type="section-product-v2" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %}">
  <div class="section-product-v2 mt-all" >
    <div class="container container-v2">
      <div class="text-center title-product-v2">
        {% if section.settings.title_section_product != blank%}
        <h3 class="block-title">{{section.settings.title_section_product}}</h3>      	
        {% endif %}
      </div>
      <div class="row product_best_sell engoc-row-equal">    
        {% assign products_limit = section.settings.products_limit %}
        {% assign col = section.settings.select_collection %}
        {% for product in collections[col].products limit: products_limit %}
        <div class=" col-lg-3 col-6 col-md-4">
          {% include 'product-item-v1' %}
        </div>

        {% else %}
        {% for i in (1..12) %}
        <div class=" col-lg-3 col-6 col-md-4">
          {% include 'empty-product-item' %}
        </div>
        {% endfor %}
        {% endfor %}
      </div>
    </div>
  </div>
</div>

{% if paginate.pages > 1 %}
<div class="collection-page-fullwidth">
  <div class="pagi-nav text-right">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '<i class="fa fa-angle-left"></i>' | replace: 'Next &raquo;', '<i class="fa fa-angle-right"></i>' }}
  </div>
</div> 
{% endif %}

{% endpaginate %}

{% for block in section.blocks %}
  {% comment %} {{ block.settings }} {% endcomment %}
  {% if block.type == 'collection_or_image' %}
    {% assign imgflexOrder = 'order-2 order-lg-1' %}
    {% assign contentflexOrder = 'order-1 order-lg-2' %}
    <div class="container-fuild">
      <div class="row align-items-center">
        {% if block.settings.img_position == blank %}
        {% assign imgflexOrder = 'order-1 order-lg-2' %}
        {% assign contentflexOrder = 'order-2 order-lg-1' %}
        {% endif %}
        <div class="col-12 col-lg-6 {{ imgflexOrder }}">
          <figure class="collection-picture">
            {% if block.settings.img_category != blank %}
            <a href="{{block.settings.url_category_collection}}"><img src="{{block.settings.img_category | img_url:'master'}}" class="img-fluid"></a>
            {% else %}
            <a href="{{block.settings.url_category_collection}}"><img src="//placehold.it/1920x510" class="img-fluid" alt=""></a>
            {% endif %}
          </figure>
        </div>
        <div class="col-12 col-lg-6 {{ contentflexOrder }}">
          <div class="collection-infomation p-5">
            <h3><a href="{{block.settings.url_category_collection}}">{{ block.settings.collection_title }}</a></h3>
            <p>{{ block.settings.collection_excerpt }}</p>
          </div>
        </div>
      </div>
    </div>

  {% elsif block.type == 'banner_collection' %}


    <div class="container-fuild">
      <div class="row">
        <div class="col-12">
          <figure class="collection-banner">
            <!-- output an image with a link -->
            {% if block.settings.img_banner != blank %}
            <a href="{{block.settings.url_collection}}"><img src="{{block.settings.img_banner | img_url:'master'}}" class="img-fluid"></a>
            {% else %}
            <a href="{{block.settings.url_collection}}"><img src="//placehold.it/1920x510" class="img-fluid" alt=""></a>
            {% endif %}
          </figure>
        </div>
      </div>
    </div>


  {% endif %}
{% endfor %}

{% schema %}
{
  "name": "Product Lists",
  "settings": [
	{
		"type" : "image_picker",
		"id": "bg_breadcrumb",
		"label" : "Background Image BreadCrumb",
		"info" : "1920x510px recommended"
	},
	{
      "type": "text",
      "id": "title_section_product",
      "label": "Title section Product",
      "default": "Trending"
    },
	{
      "type": "range",
      "id": "prod_per_page",
      "min": 2,
      "max": 50,
      "step": 1,
      "label": "Products Per Page",
      "default": 8
    },
	{
      "type": "header",
      "content": "Info Product"
    },
    {
      "type": "collection",
      "id": "select_collection",
      "label": "Select Collection"
    },
	{
      "type": "range",
      "id": "products_limit",
      "label": "Limit products",
      "min": 2,
      "max": 50,
      "step": 1,
      "default": 8
    },
	{
      "type": "header",
      "content": "Info button"
    },
    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    }
  ],
"blocks": [
    {
      "type": "banner_collection",
      "name": "Banner Collection",
      "settings": [
   
          {
            "type": "image_picker",
            "id": "img_banner",
            "info": "320 x 320px recommended",
            "label": "Image Banner"
          },
          {
            "type": "text",
            "id": "banner_title",
            "label": "Title Banner",
			"default" : "New In"
          },
          {
          "type": "url",
          "id": "url_collection",
          "label": "Url collection"
          }

      ]
    },
    {
      "type": "collection_or_image",
      "name": "Collection or Image",
      "settings": [
        {
          "type" : "checkbox",
          "id" :	"img_position",
          "label" : "Image left",
          "default" : true
        },
        {
          "type": "image_picker",
          "id": "img_category",
          "info": "1000 x 600 recommended",
          "label": "Image Colleciton"
        },
        {
          "type": "text",
          "id": "collection_title",
          "label": "Title Collection",
          "default" : "New In"
        },
        {
          "type": "textarea",
          "id": "collection_excerpt",
          "info": "Short description of collection",
          "label": "Excerpt Collection"
        },
        {
          "type": "text",
          "id": "collection_price",
          "info": "Fill integer only",
          "label": "Price Collection"
        },
        {
          "type": "url",
          "id": "url_category_collection",
          "label": "Url collection"
        }
      ]
    }
  ],

  "presets": [
    {
      "name": "Product Lists",
      "category": "HOME 1"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}