How to add featured collection in shopify

<style>
  .was_price {
    text-decoration: line-through;
    color: #ccc;
}
  
  .off {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 45px;
    height: 45px;
    background: #ff1616;
    border-radius: 50px;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    line-height: 1; padding-top:7px;
}
</style>

<div class="container-fluid">
<h2 class="text-center display-5">{{ section.settings.heading }}</h2>
<div class="row">
{% for product in collections[section.settings.featured_collection].products %}
  <div class="col-md-3 col-sm-4">
    <div class="card">
      
    	{% assign image  = product.featured_media.preview_image %}
    {% if image != blank %}
      <a href="{{ product.url }}"><img class="card-img-top" src={{ image | img_url: 'x400' }} /></a>
      {% else %}
      {{ 'product-1' | placeholder_svg_tag: 'img-class' }}
    {% endif %}
      <div class="card-body text-center">
      	 <h5 class="card-title display-6">{{ product.title }}</h5>
        <span class="off">
      {% if product.compare_at_price_max > product.price %}
         
{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}% off
{% endif %}
      </span>
        <p class="card-text"> 
        <span class="current_price">
          {% if product.price_varies and product.price_min > 0 %}
            <small><em>{{ 'products.general.from' | t }}</em></small>
          {% endif %}
          {% if product.price_min > 0 %}
            <span class="money">{{ product.price_min | money }}</span>
          {% else %}
            {{ settings.free_price_text }}
          {% endif %}
        </span>
        {% assign variant = product.selected_or_first_available_variant %}
        <span class="was_price">
          {% if variant.price < variant.compare_at_price %}
            <span class="money">{{ variant.compare_at_price | money }}</span>
          {% endif %}
        </span>
        </p>  
      </div> 
    </div>
  </div>
{% endfor %}
  
</div>
  </div>

{% schema %}
  {
    "name": "Featured Collection",
  "class":"featured-collection",
    "settings": [
  
          {
            "type":"text",
            "id":"heading",
            "label":"Heading",
            "default" : "Featured Collection"
          },
      {
            "type":"collection",
            "id":"featured_collection", 
            "label" : "Select Featured collection"
          },
 {
            "type":"product",
            "id":"pro", 
            "label" : "Select Featured collection"
          }



],
          "presets":[
      {
        "name":"Featured Collection"
      }
          ]

  }
{% endschema %}