In this article, we’ll walk through the code for creating an Ecommerce Template using the Bulma CSS framework. This navigation bar includes a logo, menu items, a search bar, user authentication buttons, and category boxes. We’ll also explore sections for featured categories, today’s deals, and a footer.
Step 1: Document Structure
The HTML document starts with the standard structure, including a DOCTYPE declaration, HTML tag, and head section. The head section contains metadata like charset, viewport settings, Bulma CSS link, and a title.
Open your Visual studio code and initiate a Boiler plate by pressing (!) mark.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags, charset, and Bulma CSS link -->
<title>Amazon-Like Navigation</title>
</head>
<body>
<!-- Page content goes here -->
</body>
</html>
Add the Meta Tags, you can Generate Meta Tags using Metatags.io and add an CDN/Internal CSS files for the Bulma CSS Framework.
Step 2: Navigation Bar Setup
Within the body, we set up a navigation bar using Bulma classes. It includes a logo, menu items, and a search bar. User authentication buttons are added at the end.
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<!-- Logo and Brand -->
<div class="navbar-brand">
<!-- Logo image -->
</div>
<!-- Menu Items -->
<div class="navbar-menu">
<!-- Menu content -->
</div>
<!-- Search Bar and User Authentication Buttons -->
<div class="navbar-end">
<!-- Search bar -->
<!-- User authentication buttons -->
</div>
</div>
</nav>
Step 3: Featured Categories Section
A dark-themed hero section showcases featured categories. Each category is represented by a box with a title and description.
<section class="hero is-dark is-medium">
<div class="hero-body">
<!-- Featured Categories content -->
</div>
</section>
Step 4: Category Boxes
Below the featured categories, there are category boxes with titles and descriptions for Grocery Items, Shoes, Books, Electronics, Movies, and Clothing. Additional categories can be added.
<section class="section">
<div class="container">
<div class="columns is-multiline">
<!-- Category boxes -->
</div>
</div>
</section>
Step 5: Featured Category Cards
Three featured category cards with images, titles, and descriptions are displayed side by side.
<section class="section">
<div class="container">
<div class="columns">
<!-- Featured Category Cards -->
</div>
</div>
</section>
Step 6: Today’s Deals Section
A section displaying today’s deals includes cards with images, titles, descriptions, and pricing.
<section class="section">
<div class="container">
<h1 class="title">Today's Deals</h1>
<div class="columns is-multiline">
<!-- Deal cards -->
</div>
</div>
</section>
Step 7: Footer
The document concludes with a dark-themed footer containing columns for navigation links.
<footer class="footer has-background-dark has-text-white">
<div class="container">
<div class="columns">
<!-- Footer navigation links -->
</div>
</div>
</footer>
Step 8: JavaScript Library Inclusion
Finally, the Font Awesome JavaScript library is included for additional icon support.
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
We have made the Premade Ecommerce Store Template using Bulma CSS you can Download and Make necessary changes and give us a credit if you’d like to use our premade template, If you want to support us you can also do that by donating us.