Shopify Product, category and images

product-section.liquid

  <section class="products section bg-gray">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="title text-center">
            <h2>Trending Products</h2>
          </div>
        </div>
             {% assign home_collections = collections[section.settings.home_product_collection] %}
        <div class="row">
            {% for product in home_collections.products limit: section.settings.product_limit %}
                <div class="col-md-4">
                        <div class="product-item">
                            <div class="product-thumb">
                               {% if product.compare_at_price and product.compare_at_price != product.price %}
                                    <span class="bage">Sale</span>
                               {% endif %}
                                <img class="img-responsive" src="{{ product.featured_image.src | img_url:'1920x' }}" alt="product-img">
                                <div class="preview-meta">
                                <ul>
                                    <li>
                                    <a href="product-single.html"><i class="fa fa-search"></i></a>
                                    </li>
                                    
                                    <li>
                                    <a href=""><i class="fa fa-shopping-cart"></i></a>
                                    </li>
                                </ul>
                                </div>
                            </div>
                        <div class="product-content">
                    <h4><a href="product-single.html">{{ product.title}} </a></h4>
                    <p class="price">{{product.price | money}}</p>
                </div>
                </div>
            </div>
            {% endfor %}
        </div>
      </div>
    </div>
  </section>

  {% schema %}
      {
          "name":"Homepage Products",
          "settings": [
              {
                  "type": "text",
                  "id": "heading",
                  "label":"Section Heading",
                  "default":"Trending Products"
              },
                 {
                  "type": "collection",
                  "id": "home_product_collection",
                  "label":"Trending Products Collection"
              },
              {
                  "type": "range",
                  "id": "product_limit",
                  "label":"How many products?",
                  "min":3,
                  "max":9,                  
                  "default":6
              }
          ]
      }
  {% endschema %}