E-commerce Product Catalog using Django
Last Updated :
22 May, 2025
We will build a simple e-commerce product catalog using Django. You'll learn how to create a product model, display product listings and details with dynamic templates, handle images, and configure URLs and media files all step-by-step to help you create a solid foundation for an online store.
Create Your Django Project and App
Prerequisites:
Open a terminal and run:
django-admin startproject ecommerce
cd ecommerce
python manage.py startapp catalog
Register the App
Open ecommerce/settings.py, find the INSTALLED_APPS list, and add 'catalog':
INSTALLED_APPS = [
# other installed apps
'catalog',
]
Note: An e-commerce product catalog is a great Django project to work on. To master building complex web applications like this, the Django Web Development Course can guide you step-by-step.
Define Your Product Model
In catalog/models.py, define the Product model:
Python
from django.db import models
class Product(models.Model):
name = models.CharField(max_length=255)
description = models.TextField()
price = models.DecimalField(max_digits=10, decimal_places=2)
image = models.ImageField(upload_to='products/')
created_at = models.DateTimeField(auto_now_add=True)
updated_at = models.DateTimeField(auto_now=True)
def __str__(self):
return self.name
Register the Model with Admin
To manage products easily through Django's admin panel, register your model in catalog/admin.py:
Python
from django.contrib import admin
from .models import Product
admin.site.register(Product)
Create Views for Listing and Detailing Products
In catalog/views.py, add views:
Python
from django.shortcuts import render
from .models import Product
from django.http import HttpResponse
def product_list(request):
products = Product.objects.all()
return render(request, 'myapp/index.html', {'products': products})
def product_detail(request, pk):
product = Product.objects.get(pk=pk)
return render(request, 'myapp/index2.html', {'product': product})
def home(request):
return HttpResponse('Hello, World!')
Define URL Patterns
Create catalog/urls.py and set URLs:
Python
from django.urls import path
from . import views
urlpatterns = [
path('/home', views.home, name='home'),
path('', views.product_list, name='product_list'),
path('<int:pk>/', views.product_detail, name='product_detail'),
]
In your main project ecommerce/urls.py, include these:
Python
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('catalog.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Create HTML Templates
Inside the catalog app folder, create a templates/catalog directory and add the following HTML files.
index.html (Product List)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Catalog</title>
<style>
/* Add CSS styles for flex container and items */
.product-list {
display: flex;
flex-wrap: wrap; /* Allow items to wrap to the next row if necessary */
justify-content: space-between; /* Space items evenly along the main axis */
list-style: none; /* Remove list styles */
padding: 0;
}
.product-item {
flex: 1; /* Grow to fill available space evenly */
max-width: 30%; /* Limit item width to avoid overcrowding */
margin: 10px; /* Add spacing between items */
border: 1px solid #ccc; /* Add a border for visual separation */
padding: 10px;
text-align: center;
}
/* Style the "Buy Now" button */
.buy-now-button {
display: block;
margin-top: 10px;
background-color: #007bff;
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Product Catalog</h1>
<ul class="product-list">
{% for product in products %}
<li class="product-item">
<a href="{% url 'product_detail' product.pk %}">
<img src="{{ product.image.url }}" alt="{{ product.name }}" width="100">
</a>
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<p>Price: ${{ product.price }}</p>
<a href="#" class="buy-now-button">Buy Now</a>
</li>
{% endfor %}
</ul>
</body>
</html>
index2.html (Product Detail)
This HTML file is used to view the particular product on the page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ product.name }} - Product Detail</title>
</head>
<body>
<h1>{{ product.name }} - Product Detail</h1>
<div>
<img src="{{ product.image.url }}" alt="{{ product.name }}" width="200">
</div>
<h2>{{ product.name }}</h2>
<p>{{ product.description }}</p>
<p>Price: ${{ product.price }}</p>
<a href="{% url 'product_list' %}">Back to Product List</a>
</body>
</html>
Configure ecommerce/settings.py to serve static and media files during development:
Python
import os
from pathlib import Path
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]
MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / "media"
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
Apply Migrations and Run the Server
Apply migrations to create the Product table:
python manage.py makemigrations
python manage.py migrate
Create a superuser to access the admin:
python manage.py createsuperuser
Run the development server:
python manage.py runserver
Output
When we click on particular Product:
Similar Reads
E-commerce Website using Django This project deals with developing a Virtual website ‘E-commerce Website’. It provides the user with a list of the various products available for purchase in the store. For the convenience of online shopping, a shopping cart is provided to the user. After the selection of the goods, it is sent for t
11 min read
E-commerce product recommendations using catboost E-commerce platforms use product recommendations to enhance customer experience and increase sales. CatBoost is a gradient boosting algorithm designed to efficiently handle categorical data and missing values making it ideal for this task. It works by combining decision trees and correcting errors f
4 min read
E-commerce Website using Tailwind and React using Django Our e-commerce website, "ECOM," aims to offer users a smooth online shopping experience. We use Tailwind CSS for styling, React for interactive user interfaces, and Django for a strong backend. Shopify features a wide range of products across different categories, with functionalities like user auth
6 min read
How to Create a Basic Project using MVT in Django ? Prerequisite - Django Project MVT Structure Assuming you have gone through the previous article. This article focuses on creating a basic project to render a template using MVT architecture. We will use MVT (Models, Views, Templates) to render data to a local server. Create a basic Project: To in
2 min read
Blog Post Recommendation using Django In this article, we will guide you through the creation of a blog post recommendation system using Django. Our article covers the integration of a user-friendly login system with a registration form, ensuring a seamless experience for your website visitors. Additionally, we have implemented a sophis
10 min read