DEV Community

Cover image for Ways of creating an online shop website (technical side of e-commerce)
Vosidiy
Vosidiy

Posted on • Updated on • Originally published at bootcamp.uxdesign.cc

Ways of creating an online shop website (technical side of e-commerce)

The volume of online sales in the world has grown dramatically in recent years. I worked with many people who started online business. Some of them failed, some of them selling online successfully. Some of them spent a lot money and time to create a website, some of them running business without having own website, but selling online. I also started an online store business. After a while, I gave it up. Because my partner who gave me this idea, he couldn’t supply products.

Briefly about myself…

I became interested in IT and programming in 2010 ( I was 20). I first learned PHP and Wordpress and made several online store websites and product catalog websites. When I was a student at university, I earned money by creating e-commerce websites. At that time, websites was very simple: There was a product catalog, categories, cart, order forms and admin panel…
Later, I chose web design field, Creating an interfaces was interesting for me rather than programming. Until now I designed hundreds of online stores and marketplace websites. Sometimes I also convert my designs into responsive HTML / CSS pages.
In the process, I learned all technical aspects of e-commerce business. Now, I decided to write about it.

Ways of selling online

It all starts with asking a question:
What do you want to sell?
Where do you want to sell? Who do you want to sell to?
Actually, there are two main options selling items in your city (without online):
Option 1: You buy land and build a shop.
Option 2: You rent a place in a big market or supermarket.
The same is true in the world of the internet:
Method 1: You get a hosting server (a database, GB or MB space) and program everything as you want or hire a programmer to do job.
Method 2: You register on a big marketplace websites and start selling. Such sites are also called multi vendor e-commerce sites. For example, amazon.com, alibaba, etsy.com and so on.
In this article, we will talk about Method 1 — how to create your own e-commerce website.

How to start a shopping website?

There is an endless debate among programmers: “Is PHP better or Python?”, “Laravel or Yii framework?”, “Wordpress or other CMS?” and so on. There are also many online web constructors, just like LEGO, you can create your own website by combining the elements you need. For example Squarespace, Webflow, Wix and so on. They also allow you to create a website with your custom design.

dev tools for ecommerce

If you are far from the IT and programming, then you may ask someone to guide you. And he or she will tell you “do it this way or that way” based on his or her own experience. You trust him. Because, he is a programmer! Then if you ask another programmer, he will recommend the method he knows well. And you start taking risks. In most cases, programmers prefer to start from scratch, Or to build based on previously written code.

Creating a website is still half of the way :-), there is still a lot of work you have to do: Integrating with payment system (Paypal, Visa or your country’s local bank), integration with delivery service, future improvements like UX / UI design, code optimization,…, content filling, constant updating product catalog, such as taking images of products, writing detailed information and so on. Apart from that, marketing and online advertising is also important (this is another big topic).

If you ask an architect about building methods, he will tell you about several ways to build a simple building. Whether brick or cement, wooden board or aluminum profile, and so on. The same is true in the field of programming.

What does an online store website consist of?

  1. Front-end part (Visible part for users or clients). For example, Home page, Catalog page, Product information page, etc. Site design.
  2. Database.
  3. Admin control panel. To add, delete items, receive orders. This is usually used by administrator or operator.

website architecture back-end development

Method #1. Creating everything from scratch (from zero)

Many websites (including online stores) are written in PHP. But nobody writes code in pure PHP. Because it would be very time consuming. There are many so called “code libraries” (also called Frameworks) based on PHP.

Most widely used PHP frameworks are Laravel, Yii, or Codeigniter. Remember: A programmer usually doesn’t work with all programming languages. Even PHP programmers have their own preferred Frameworks. Some prefer to use Laravel framework, others prefer the method they like. So, you select a programming language (PHP for ex.) to build your future website, and then select a Framework based on that language. That’s it!

There are some advantages and disadvantages of creating all from scratch.
Bad news is: You will spend more time and money. Many unexpected bugs (errors) may occur during creation. Need to test all functionality before you launch business.
Good news is: You can create whatever you want without limits. Anytime you can expand your website’s functionality.

Steps to create it all from scratch.

  1. Planning and designing. Hire a web designer to create interface of your future website. This also take some time depending how professional your designer is. But now there are ready-made design libraries — pre-made web elements. Also known as Design library or UI Kit. For example: https://ecommerce-uikit.com
    This can save 80% of the time of designer.

  2. HTML/CSS coding. So once you’ve got a detailed design of your future website, you need to convert them into html / css files.
    Here’s what you need to know. There are many ready-made html templates for e-commerce you can find on the Internet. If you use a ready-made html template, then there is no need to hire a designer.
    You can find many beautifully designed templates: For example: https://themeforest.net/category/site-templates?term=ecommerce
    I would also like to mention the html template I created:
    https://bootstrap-ecommerce.com
    You can easily customize the color and style. It consists of ready-made blocks. It is enough to know Bootstrap, CSS and SASS to customize according to your style.
    Check also https://bootstrap-ecommerce.com/templates.html

  3. Creating a database. Mysql, postgresql, mongodg and others can be used.

  4. Integrate your html pages with database.

  5. Testing and fixing errors.

  6. Upload to server and launch.

So, the process of creating all from scratch is completely up to you. Only money, time and an experienced programmer is needed.

Method #2. Using ready-made code

There is another way that saves a lot of time and effort. If someone created a site from scratch with PHP or other language, then you can get a copy of that code to speed up the process. For ex. you can ask a programmer if he/she already worked on similar project, may be he can re-use that code for you. On the internet there are many open-source codes. On github.com you can find many of them. There are also paid options available on this site:
https://codecanyon.net/category/php-scripts/shopping-carts
You can also search Google for “online shop script” or “ecommerce php script”. Hundreds of people have already created similar project. Why reinvent the wheel. All you have to do is adapt it to your needs. Anyways, you can save 90% of time.

Method #3. Use of CMS systems

CMS (Content Management System). This is also a ready-made code similar to the above method. But it is not a code created by “someone”, but a community with its own ecosystem and support team. An example of this is the Wordpress CMS.
Wordpress is also a system created in PHP. In other words, it is a ready-made website created in PHP and has its own admin panel and front view. Usually CMS systems have additional plug-ins. Plugin — it is a set of additional codes which can enhance the capabilities of system. For example, Wordpress was actually designed for simple blog websites. But it has a plugin called Woocommerce (woocommerce.com) that allows to create an online store.

Another popular CMS system is opencart (opencart.com), a ready-made system for online shopping. To use them, you just need to get a hosting (web server — a place for a database) and buy a domain name (www. something .com).

The advantage of CMS is, it takes 5 minutes to create your basic online store with essential functionalities. But…. you spend some time customizing it for your needs, such as changing design, adding extra features, and connecting to a payment system. For such tasks you need to find a programmer who already has experience in this system. Usually a programmer who is expert in PHP may not know Wordpress at all. Although Wordpress is also built on PHP :-).

Method #4. Use of SAAS systems

This is the easiest and quickest method. SAAS means Software as a service. You need to open account and start uploading your products.
Most popular SAAS system is shopify.com. It gives all essential functionality with pre-made design templates for your website. Or you can create your own design also.There is only monthly fee to run your shop.

Benefit of the SAAS system is, you don’t need to worry about hosting server, finding programmer, security, payment systems and so on. Shopify has already integrated with Paypal and Visa, Master Card.

Method #5. Create based on Headless CMS or API

Usually modern javascript is used for this method. For ex. ReactJS, VueJS or other libraries. It means that, your front-end (visual part for user) and back-end (admin control) parts are totally separate. They communicate via API (Aplication programming interface) or special code to retrieve any information (for example, Product Name and Picture) from the database.
You can create your website with PHP + Larevel using this method. Or you can use ready made codebase.
Here is one of the example: vuestorefront.io
It provides all you need (Admin control, Database, …) but without front-end (visual part of your website). You will use their API to integrate with your custom html template. Sometimes this method called also SPA (Single Page Application)

Advantages of this method:

  1. Performance will be high. There is no page reload on each click. Only certain part of website will change when you click on any button or link.
  2. The front-end and Admin parts of the website are completely separate from each other, which makes them easier to manage or extend later.
  3. It is also possible to create a mobile application of the your website using the API. Because mobile apps communicate with server via API code. Note: When creating a mobile version of the online store, I’d recommend the following ready-made design and html template for your app: https://bootstrap-ecommerce.com/templates/mobile/website/index.html

Which method should I choose?

The choice depends on your situation and future plans.

thinking man
If you do not have a large number of products for sale, then do not rush to open your own shopping website. It would be better to join marketplace websites (where many users can register and sell items). for example Amazon, Ebay, Etsy. You may find local marketplaces in your country also, For ex: market.yandex.ru in Russia. abad.uz, sello.uz in Uzbekistan.
On marketplaces you don’t have to worry about coding or integrating with a payment system. All you have to do is to create a profile and add your products.

If you are planning to sell a large number of products and you don’t have experience in online business. In that case, I recommend methods #2 or #3. Using ready-made code or CMS will save your time and money. Because you don’t know if sales will grow or not, it helps to test your business idea.
Start using Opencart or Wordpress + Woocommerce. Then connect payment systems. Only one programmer is enough to do this job.

Later, when your business grows and you will need a custom website with many functionalities. For example, advanced search functionality, which can auto-correct words, or multi alphabet search functionality and so on. So in that case you will need to hire a professional programmer and start from scratch (as mentioned above in method #1).
In fact, custom features can be added to CMS-based sites as well. Only if you find an expert who can do it.

Payment system

There are many payment gateways. For ex. stripe.com, braintreepayments.com or paypal.com and others. You can check the list of the countries which supported by those payment systems. There might be local payment gateways in your country. For ex: yookassa.ru in Russia, merchant.payme.uz in Uzbekistan

Marketing and advertising

In fact, it’s a big topic. In short, hire someone to do social media marketing (SMM — facebook and instagram), Video advertising (Youtube), Search engine (Google ads, SEO). In many Asian countries Telegram app channels are very popular.

About success…

Success in any business is not easy. Here are some important rules I understood from my experience:

  1. Start small. Forget about having a huge business empire all of a sudden. The long journey also begins with the first step.
  2. Work with constant patience and attention.
  3. It is very important to respond every user’s (or client’s) message or call. The list goes on and on. In the next articles I plan to write to you on the following topics.
  4. Sale of digital products (sale of e-books, software products, creative developments)
  5. Creating a mobile version of the online store (for smartphones).
  6. Useful microservices for wesbite which may boost sales growth.

Follow me for more articles:
https://www.linkedin.com/in/vosidiy
https://dribbble.com/vosidiy
https://behance.net/vosidiy

Top comments (0)