startbootstrap/templates/ecommerce.html

---
layout: default
title: Bootstrap Ecommerce Templates
description: Free Bootstrap 4 ecommerce page templates and layouts that are ready to customize and combine into your own custom Bootstrap based ecommerce application
permalink: /templates/ecommerce/

meta-title: Bootstrap Ecommerce Templates

type: template

redirect_from:
  - /template-categories/ecommerce/
---

{% include masthead/masthead-page.html %}

<div class="container">

  <!-- Show paginated posts for the specificed collection -->
  <div class="row">
    {% assign sorted = site.templates | sort: "rank" %}
    {% for template in sorted %}
    {% if template.categories contains 'ecommerce' %}
    <div class="col-md-4">
      <div class="item-preview mb-5">
        <a class="item-preview-img box-shadow-lg d-block mb-3" href="{{ template.src }}">
          <img class="img-fluid" src="{{ template.img-thumbnail }}" alt="{{ template.img-desc }}">
        </a>
        <div class="item-preview-title d-flex align-items-center">
            {{ template.title }}
            {% if template.pro %}
            <span class='badge badge-warning ml-auto small badge-pill'>Pro</span>
            {% else %}
            <span class='badge badge-success ml-auto small badge-pill'>Free</span>
            {% endif %}
        </div>
        <div class="item-preview-description">{{ template.bump }}</div>
      </div>
    </div>
    {% endif %}
    {% endfor %}

    {% include survey.html %}

  </div>
  <!-- /.row -->

</div>
<!-- /.container -->

<section class="after-loop">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/themes/" class="after-loop-item card border-0 card-themes shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Themes</h4>
            <p class="w-75">Fully designed and ready to modify and publish!</p>
            <i class="fal fa-paint-brush-alt"></i>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/snippets/" class="after-loop-item card border-0 card-snippets shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Snippets</h4>
            <p class="w-75">Code snippets ready to copy and paste!</p>
            <i class="fal fa-code"></i>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-md-8 mx-auto">
        <a href="/guides/" class="after-loop-item card border-0 card-guides shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Guides</h4>
            <p class="w-75">Guides and tutorials to help you learn Bootstrap!</p>
            <i class="fal fa-books"></i>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>