Site structure
Minimal store HTML template has 10 HTML pages:
- index.html – represents the template homepage
- about.html – presentation page
- contact.html – page with google maps and form fields
- login.html – a popup window to login
- blog.html – page with a list of articles
- article.html – article page
- cart.html – page to view the products that were added to the cart
- checkout.html – page with personal information fields to checkout
- shop.html – view/sort/filter the list of products page
- product.html- the product page
The template for the index.html, contact.html, product.html, about.html uses the following code structure:
<html>
<head>[...]</head>
<body>
<div id="page_wrapper">
<header>[...]</header>
...
sections
...
<footer>[...]</footer>
</div>
</body>
</html>
The pages article.html, blog.html, and shop.html have sidebars.
Sidebar
<!--Right side-->
<aside class="shop-col-right col-12 col-md-12 col-lg-3 gutter-r-0 gutter-30 ">
<div class="sidebar">
...
</div>
</aside>
Cart#
The upper drop-down cart is visible on all the pages.
<div class="cart-container visible"> ... <table class="cart-table"> </table> </div>
Other mentionable html markups:
To Top button
Classic “go to top” button. Just make sure not to change the id as it holds the styling but also js click event.
<a href="#" id="totop"></a>
The html markup that is used for responsiveness is based on flexbox Layout and bootstrap 4 grid system
These examples don’t necessarily mean it has to be this exact pattern, however, it’s the most commonly used.