DEV Community

Govind Jangra
Govind Jangra

Posted on

Building a Simple E-commerce Webpage for an Essential Oils Store

Essential oils are booming in popularity, and many entrepreneurs are launching online stores to sell these natural products. As a developer, you might be tasked with creating a simple webpage for a small business, like an essential oils shop. In this beginner-friendly guide, we’ll build a basic e-commerce webpage using HTML, CSS, and JavaScript, featuring products from a supplier like VedaOils. By the end, you’ll have a functional, responsive webpage to showcase essential oils, with a clean design and interactive elements.

Why Build an Essential Oils Store?

Essential oils are versatile, used in aromatherapy, skincare, and wellness. A simple webpage can help small businesses reach customers online. For this project, we’ll assume you’re building a site for a store sourcing products from VedaOils, a UK-based supplier known for 100% pure essential oils, carrier oils, and soap-making supplies. This tutorial focuses on the front-end, but you can extend it with a backend later.

Step 1: Setting Up the Project

Create a project folder with three files: index.html, styles.css, and script.js. We’ll use basic HTML for structure, CSS for styling, and JavaScript for interactivity.

Step 2: HTML Structure

Let’s create a simple webpage with a header, product section, and footer. The product section will display a few essential oils.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Essential Oils Store</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Pure Essence Oils</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#products">Products</a>
      <a href="#about">About</a>
    </nav>
  </header>

  <section id="products">
    <h2>Our Essential Oils</h2>
    <div class="product-grid">
      <div class="product">
        <img src="https://via.placeholder.com/150" alt="Lavender Oil">
        <h3>Lavender Essential Oil</h3>
        <p>Perfect for relaxation and skincare.</p>
        <p class="price">£12.99</p>
        <button onclick="addToCart('Lavender Essential Oil', 12.99)">Add to Cart</button>
      </div>
      <div class="product">
        <img src="https://via.placeholder.com/150" alt="Peppermint Oil">
        <h3>Peppermint Essential Oil</h3>
        <p>Refreshing and great for focus.</p>
        <p class="price">£10.99</p>
        <button onclick="addToCart('Peppermint Essential Oil', 10.99)">Add to Cart</button>
      </div>
    </div>
  </section>

  <footer>
    <p>Products sourced from <a href="https://www.vedaoils.co.uk/">VedaOils</a>, a trusted supplier of pure essential oils.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

This HTML sets up a header with navigation, a product grid with two sample oils, and a footer linking to VedaOils.

Step 3: Styling with CSS

Style the page to make it visually appealing and responsive. Add the following to styles.css:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}

header {
  background: #2e7d32;
  color: white;
  text-align: center;
  padding: 1rem;
}

header h1 {
  margin: 0;
}

nav a {
  color: white;
  margin: 0 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

#products {
  padding: 2rem;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.product {
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
}

.product img {
  max-width: 100%;
  height: auto;
}

.price {
  font-weight: bold;
  color: #2e7d32;
}

button {
  background: #2e7d32;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background: #1b5e20;
}

footer {
  background: #f5f5f5;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

footer a {
  color: #2e7d32;
  text-decoration: none;
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}
Enter fullscreen mode Exit fullscreen mode

This CSS creates a clean, green-themed design that’s responsive for mobile devices.

Step 4: Adding Interactivity with JavaScript

Add a simple “Add to Cart” function to script.js to simulate e-commerce functionality:

let cart = [];

function addToCart(productName, price) {
  cart.push({ name: productName, price: price });
  alert(`${productName} added to cart! Total items: ${cart.length}`);
  console.log(cart); // For debugging
}
Enter fullscreen mode Exit fullscreen mode

This script stores items in a cart array and shows an alert when a product is added. You can expand this later with local storage or a backend.

Step 5: Testing and Deployment

Open index.html in a browser to test the layout and “Add to Cart” functionality.

Ensure images load (replace placeholder URLs with real ones from your supplier).

For deployment, host on platforms like Netlify or GitHub Pages for free.

Why VedaOils?

For this project, we referenced VedaOils as a supplier because they offer a wide range of pure essential oils, ideal for small businesses. Their UK store provides fast shipping and quality certifications, making them a reliable choice for sourcing products to feature on your site.

Next Steps

Add a backend (e.g., Node.js or Firebase) for cart persistence and payments.

Integrate real product images and descriptions from your supplier.

Enhance accessibility with ARIA attributes and keyboard navigation.

This project is a starting point for developers looking to build e-commerce sites for niche markets like essential oils. Share your thoughts or improvements in the comments—I’d love to hear how you’d expand this!

Top comments (0)