Before you query for products, let's use a basic template approach for dynamically adding product cards:

1. Add the HTML template for the dynamically added product cards to index.html:

<script type="text/template" data-template="product-item">
  <div class="item-card">
 <div class="item-card-content-container">
 <img class="item-card-content-container-img" 
 src="${primaryImage}" />
 <span class="item-card-content-container-title">${title}
 </span>
 <span class="item-card-content-container-text">${description}</span>
 </div>
 </div>
</script>

2. Add the relevant CSS to app.css:

.item-card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    background-color: white;
    width: 280px;
    height: 200px;
    float: left;
    margin: 10;
}

.item-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.item-card-content-container {
    padding: 2px 16px;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: hand;
}

.item-card-content-container-img {
  display: block;
  max-width: 80px;
  max-height: 80px;
  width: auto;
  height: auto;
  text-align: center;
}

.item-card-content-container-title {
    display: block;
    font-size: 1.6rem;
}

.item-card-content-container-text {
    word-wrap: normal;
    font-size: 1.2rem;
    overflow: hidden;
}