Note: According to your preference, you can follow a video or written version of the MDB eCommerce 1 minute Quick Start

Written version:

Step 1

After purchasing MDB eCommerce, open the order panel (upper right corner) and download "MDB eCommerce" package.

Unzip the downloaded package and open the index.html file using your favorite text editor.

We recommend Visual Studio Code - free and easy to use editor.


You should see the following code in the index.html file:

<!DOCTYPE html>
<html lang="en">

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="">
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href=",400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- MDB eCommerce core CSS -->
  <link rel="stylesheet" href="css/mdb-ecommerce.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.css">

<body class="skin-light">

  <!-- Start your project here-->
  <div style="height: 100vh">
    <div class="flex-center flex-column">

      <h1 class="text-hide animated fadeIn mb-4"
        style="background-image: url(''); width: 250px; height: 90px;">
      <h4 class="animated fadeIn mb-3"><strong>MDB eCommerce</strong></h4>
      <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>
      <p class="animated fadeIn text-muted">MDB Team</p>

  <!-- Start your project here-->

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB eCommerce core JavaScript -->
  <script type="text/javascript" src="js/mdb-ecommerce.min.js"></script>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript"></script>



All of the necessary files are already linked, so everything is ready to start. If you read the comments carefully, you will easily figure out what is the role of all of the imported files.

Note: All the files listed above have to be linked in the given order.

For example: css/mdb-ecommerce.min.css must be always linked after css/bootstrap.min.css, and js/jquery.min.js must be always linked before js/bootstrap.min.js, etc.

Let's add the first MDB eCommerce component to our index.html file.

Step 2

Between the comments <!--Start your project here--> you will find some sample code.Remove it.

Step 3

Copy and paste the following code just below the <body> tag and between the comments <!--Start your project here-->

<button type="button" class="btn btn-primary">Buy now</button>
<button type="button" class="btn btn-secondary">Buy now</button>
<button type="button" class="btn btn-success">Buy now</button>
<button type="button" class="btn btn-danger">Buy now</button>
<button type="button" class="btn btn-warning">Buy now</button>
<button type="button" class="btn btn-info">Buy now</button>
<button type="button" class="btn btn-light">Buy now</button>
<button type="button" class="btn btn-dark">Buy now</button>
<button type="button" class="btn btn-link">Buy now</button>

Step 4

Save the file and open it in your browser. You will see several colored buttons.

Step 5

Explore our documentation (menu on the left). Choose components you like, copy them to your project and compose your website. And yes, it's that simple!

Video version:

Do you need help? Use our support forum and professional services.