To add a new category item, find category-list block and copy a list item.
<li class="category-item js-catItem" data-category="category-name" data-path="categories/category-name.html">Category name</li>
Next, create a new html file and name it the same as data-category content(it is required for category html to have the name exactly the same as data-category content)
In your new category html file paste following markup and start adding product items
<li class="product-page-item js-product-page" data-category="category-name"> <div class="prod-page-view"> <ul class="prod-page-list"> <li class="cat-products-list prod-page"> <div class="order-block"> <p class="added-products l-dis-ib">Added products <span class="products-number"><span class="js-products-counter"></span></span></p> <span class="order-now-btn js-order-btn l-dis-ib">Pre-Order Now</span> </div> <div class="products-list-block"> <ul class="products-list js-products-list"> <li class="products-item js-product-item"> <div class="product-view l-dis-ib"> <a href="large image path" class="js-imagelightbox"> <span class="hover-view" data-icon=""></span> <img src="small image path" alt="Product description"> </a> </div> <div class="product-short-info l-dis-ib"> <p class="prod-name js-prod-title">Product name</p> <p class="prod-code js-prod-code">Product code</p> </div> <div class="prod-price-block l-dis-ib"> <span class="add-prod-btn js-add-to-card product-control-btn l-dis-ib">+</span> <p class="prod-price js-prod-price l-dis-ib">Product price<span class="curency"></span></p> </div> </li> </ul> </div> </li> <li class="cat-products-desc prod-page"> <article> <div class="category-image-block"><img src="category image" alt=""></div> <div class="category-description-block js-description-block"> <h3 class="category-title">Category name</h3> <p class="category-description"> Category short history or description </p> </div> </article> </li> </ul> </div> </li>