Creating your first e-commerce with Shuup open source platform — Part 1

Shuup logo by Shuup Inc.

This is the part 1 of a series about how to setup, develop and deploy stores using Shuup, an open source e-commerce platform based on Django and Python.

The series will contain the basic steps of creating, customizing and deploying Shuup. I will try to explain the core concepts behind the platform by creating a sample store along with some sample addons, templates and other kind of add-ons.

You can check Shuup's source code at GitHub.


Installing Shuup

I assume you know basic Python, Django and virtualenv.

We’ll be using Python 3.5 to develop and deploy our environment, but you can use Python 2.7 or greater.

Let's get started creating and activating the virtualenv somewhere in your computer:

virtualenv venv
source venv/bin/activate

Now let's install Shuup:

pip install shuup

The installation can take some time, specially the download part, as the project has a lot of third-party dependencies.

After the installation, let's migrate the database to create the tables. Shuup already contains a basic Django settings file used for development and testing and we are going to use that in our first steps:

python -m shuup_workbench migrate

Shuup is a Django app and when starting a new project we usually create it using Django's startproject command and from there we change the settings.py that was generated, but for now, we are just taking a first look at the platform. I will be back for this on next posts.

You can check Shuup workbench settings in the shuup_workbench/settings/base_settings.py file. It configures SQLite as the default database, a nice fit for quick development and testing purposes.

That said, let's now initialize the Shuup project using the shuup_init management command:

python -m shuup_workbench shuup_init

The command above creates the most basic objects required to start running the platform, like an initial shop, order statuses, currencies, etc. If you don’t run that, you will see a No Shop! error when running the development server and browsing the shop.

Now we need a super user to manage the platform. Run the createsuperuser management command to achieve that:

python -m shuup_workbench createsuperuser

Running Shuup

Now let's run our development server and see what we get!

python -m shuup_workbench runserver

Browse http://localhost:8000/ to see a nice warning page:

Shuup in maintenance mode

Perfect! Our Shuup instance is up and running! Let's configure our shop by entering in the Administration URL: http://localhost:8000/sa/. Fill the authentication form with the super user credentials we have created before and hit Login.

Welcome to Shuup Administration panel. You are going to face a Wizard to configure your shop. This wizard is customizable and we are going to see how to create more steps (or even remove them) in future posts. Note: you can change all the information you entered in the wizard form later on, so don't worry if you entered a typo or any other kind of error. The purpose of the wizard is to configure your shop as fast as possible.

The first step is about the basic information about your shop. Please, make yourself comfortable and fill the form with some dummy values.

Configuring basic shop details

The second step ask you to enable a payment method. As we don't have any payment method add-on enabled at this moment, let's add a manual payment method (which is actually an add-on), we need at least one method to continue. So click on Activate and enter some name.

Enabling the Manual payment method

The third step asks for a shipping method. And again, we don't have installed any shipping method add-on, we have just the Shuup's default, so let's activate the manual shipping method. Repeat the payment method step procedure.

Enabling the manual shipping method

The fourth step asks you to select a theme. Select the default one and move on. Unfortunately, Shuup doesn't have a preview for the default themes yet, but enabling 3rd party themes will show nice previews here to help you selecting the right theme for your shop.

The fifth step asks to create initial CMS pages like Privacy Policy, About Us, etc. You can uncheck the pages you don't want. It also asks if you want to configure the notification system to send an email to the customer when (s)he places an order. The pages and the notification content will be created based on Shuup templates. You can change the content of the page and email later. Let all options checked so you can check what it generates.

Creating the initial content pages and notifications

The sixth and final step asks if you want to create some sample Categories and Products and also configure a sample carousel, so you will start with a simple shop ready to be tested. The dummy objects can easily be removed after we finish our test. Check all options and hit Finish.

Installing sample objects to test your shop

You'll be guided through a small and quick tour on Shuup basic features. Don't be shy and check all items, they are very important to make you understand the administration environment.

Shuup presents all the steps you have done so far. You still need to complete two final steps: add a shop logo and create other users to help you manage the shop.

Shuup initial steps to publish your store

Go ahead and upload a logo. Send some dummy image for now and create a dummy staff user. After that, hit Publish Store.

Your store is live! Enter http://localhost:8000/ again and check you shop running.

Shuup front page when shop is live

Take some time to explore Shuup Front and Admin pages. We are going to see many concepts in next posts through real world examples.

If you have any question, shoot it! I will be happy to answer and help you. You can always contact the Shuup team at Gitter.im and also at GitHub. We are happy to merge pull requests with improvements, new features and of course, bug fixes. On the next post, we are going to see how to extend Shuup in several ways to fit your project needs. 🎉