DEV Community

Cover image for Django & Stripe eCommerce - Free Starter
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Django & Stripe eCommerce - Free Starter

Hello coders!

This article presents an open-source mini eCommerce solution powered by Stripe and Django on top of an open-source kit styled with Bootstrap 5. The UI has been improved to support fast editing of any product defined in Stripe (information, pricing, and also images). Being released on GitHub the sources can be incorporated into commercial projects or simply used in eLearning activities. Thanks for reading!

Another useful feature of this project is the Bootstrap 5 design, provided by Creative-Tim. Soft UI Design, the UI Kit used to style the pages, comes with 50+ components and reusable widgets for at least a decent eCommerce project.


How it works

To fully use the features of this starter, we need a Stripe account with a few products defined, and no more than 5 minutes to follow up the steps presented in the video:

  • βœ… Download or fork the product
  • βœ… Install the dependencies
  • βœ… Migrate the database and create a superuser
  • βœ… Save Stripe secrets in env file
  • βœ… Start the app & Authenticate as a superuser
  • βœ… Import the products and edit the local information

Being visual, the above steps should not take a long time, even for programming beginners. The left panel shows the Stripe products and the right panel is dedicated to local products.

Editable fields for each product: name, description, short information and images.

For each image, the user can provide external links or local images saved by the Django backend.

Django & Stripe - Edit Products UI


Once a product is created, the user can visualize the generated page, edit the information and delete the product (requires confirmation).

Django & Stripe - Imported products layout.


Django & Stripe - Product Page

Django & Stripe - Imported product header.


Thanks for reading! For more resources and support, please access:

Top comments (4)

Collapse
 
crearesite profile image
WebsiteMarket

Nice

Collapse
 
sm0ke profile image
Sm0ke

Ty! πŸš€πŸš€

Collapse
 
uithemes profile image
ui-themes

DEMO?

Collapse
 
sm0ke profile image
Sm0ke

soon :)
πŸš€πŸš€