"E-commerce" - a word that has caught a lot of attention in recent years. Due to fast development in technologies and a huge impact from the COVID - 19 pandemic, people are moving their shopping habit from physical to online.
It is also a good way to make a bit of extra income and you can easily bring your products to a larger group of potential customers compared to a physical shop.
So, why don’t start it now?
You don’t need to be a “computer-geek” to build your own e-commerce website. With a little bit of concentration and some help from a CMS platform and its extensions/templates, you will be able to create your own online store before you even notice.
In this article, I’m going to guide you through, step-by-step, how you can build your own Joomla e-commerce website using redSHOP extensions and a template.
Shall we dive in?
I. What is redSHOP?
To some of you who haven’t heard of redSHOP, it is a shopping cart (e-commerce) solution that is designed to work with Joomla CMS platform.
With advanced modules and plugins developed by redSHOP team, the extension brings value to both store administrators and customers, reducing the time spent on creating, managing products for owners and delivering a better experience for users.
Some of redSHOP’s features include:
- Showing unlimited number of products
- Support multiple currencies
- Support sending out newsletters and catalogues
- Ready-to-use and easy-to-manage webshop
- Statistic and Search Engine Optimization
- And many more
To learn more about redSHOP and its outstanding features, please visit redCOMPONENT website for more insight.
II. Building a Joomla e-commerce website using redSHOP extension and template
Now you have understood what is redSHOP and what it is capable of, it’s time to show you guys how you can use redSHOP and a template to build your online shop:
Step 1: Shape the structure of your website
The very first thing, before getting into detail, is to plan out the structure of your website. How do you want the page to present, which sections go to which area, etc… you need to plan all of that and make that plan a reality.
What if you find it difficult or have no innovative idea just yet?
When I find myself in this situation, I always go for the option of finding myself a suitable template that I find interesting.
Therefore, in this tutorial, I’m going to build a Joomla e-commerce website using JSN Ferado 2 template.
Step 2: Install redSHOP to your Joomla site
Before actually putting your hands on the creation process, you need to set up redSHOP on your Joomla site first.
Go to redSHOP website and download the extension for free.
And just like any other extension, you can install redSHOP by opening your site backend, navigate Extensions -> Manage -> Install and drag the file into the upload section.
After finishing the installation, the system will show you 3 options to choose from: Configuration Wizard, Install Demo Content and go to Dashboard.
From my experience, I would suggest you to choose the second option, to install the demo content and after installing, it will forward you to the Dashboard automatically.
Step 3: Create product categories
Category function allows you to sort out the products that are similar and put them into groups for easier navigation.
To create a product category, simply click on the categories section and create a new one.
And then you need to insert the information for your category as you wish.
Note: since we installed the demo content, there will be demo categories already available, what you need to do in this situation is to delete the demo contents or edit them as your preference.
If you want to create multiple categories with different levels, remember to select the category parent. If you have fewer products and only one category, a simple “Product category” will work just fine.
In this tutorial, I’m going to create 6 different categories for my online shop
Step 4: Add your Products and it detailed information
A Joomla e-commerce website is nothing without any products. Therefore, now it’s time to create products for our store.
Heads to Products -> Product Manager and click on “New” button to create your product.
There, you will find a bunch of fields that you need to fill out, such as: name, product number, price, product category, product image, description, etc …
The more detail you get, the easier it will be for the customers to understand and find the value of your products.
Note: Just like the categories, the same thing goes with the products. There will be demo products available and you need to delete them, or edit them as your preference.
Additionally, if you take a look on the left column, you will find that redSHOP supports various more functions other than creating products and product categories. These functions include: media management, order management, Discount management, Communication, Shipping methods, and many more.
If you want to learn in detail how these functions can help you and your online business, go check out redSHOP’s documentation.
Now let’s get back to the main reason why we are here, once you have finished creating your products, it’s time to show them on the front end.
Step 5: Show your products on frontend
After creating your online products, it’s time to publish them on your frontend.
To do that, go to your menu tab in the Joomla backend and create a new menu item.
Go to menu type, choose redSHOP and select the one you want to show.
Give the new menu item a name and click save. Once finished, it will be shown on your front end.
Step 6: Install JSN Ferado 2
It is time to set up the layout and display the content on your front end. And there’s no other way that is easier and less time consuming than getting a template for your Joomla e-commerce website.
You can choose any other templates from different third parties as you wish. However, I would strongly recommend you choose the one that is already compatible with redSHOP extensions. We have a few templates that are fully compatible with redSHOP of our own, you can check them out!
As aforesaid, I’m going to use JSN Ferado 2 for this project. Firstly, download the template from JoomlaShine website. Or you can click on the button below
And then you need to install it to your e-commerce site with the same process as other extensions. If you don’t know how to do that or suddenly forget without a reason, go back to Step 2 and follow it.
After the installation, you will have the foundation of your website using JSN Ferado theme.
Step 7: Building your Joomla e-commerce website
Since there are many pages and things to take care of in order to launch an ultimate online store and the time is limited. Hence, in this tutorial, I’m just going to show you my method to build a home page for your store. And, you can use this to other web pages as you wish.
To apply this method, I’m going to take advantage of another extension - JSN PageBuilder 4.
What is JSN PageBuilder 4?
JSN PageBuilder 4 is a Joomla page builder extension which helps you to build various types of pages, from homepage to sale page, contact page to 404 page, etc… without touching the template module.
With drag and drop feature and multiple built-in elements to support different sections of a webpage, you can easily build web pages for your Joomla e-commerce website.
You can check out this blog post on step-by-step guide to create Joomla pages using JSN PageBuilder 4.
Building a homepage with JSN PageBuilder 4
To build the homepage, as mentioned in Step 1, you need to layout the structure.
In my experience, a potential homepage should have these following sections:
- Slideshow
- Product category
- Team members
- Featured collection
- Blog posts
- Newsletter subscription
Once you have planned out what you are going to have on your homepage, go to Joomla backend and create a new article using JSN PageBuilder 4.
- Section 1: Slideshow
A slide show on the top of your homepage will help you to demonstrate the key features/items that your store can offer.
To create this block, go to Add elements and find the element Slideshow
Here, you can choose from 4 different layouts as your preferences.
- Section 2: The Product Categories
We don’t need to be fussy and bring ourselves to a difficult position. The product category in the homepage is made with 2 elements: a heading and images.
Once you have finished styling the headings and choosing the suitable images. Click on each image and link them to the category URL so that when users click on the images, it will redirect them to the category page.
- Section 3: Team members
Adding a team member section is an effective way to give your business an accessible face. It gives your customers an idea of who they will be working with/buying from.
And luckily, JSN PageBuilder 4 has a pre-made section for team members.
- Section 4: Featured collection
This section shows all of the “hot” items from your shop that are popular. It helps customers to easily find an item and fasten their shopping-to-checkout process.
The same method as the “Product Category” section applies here. Go back to section 2 to see how you can create this section if you forget how to.
- Section 5: Best seller
Why do you put "best seller" in this position you ask? This position in a page is normally a lower selling position and since best selling items can sell itself, this combination is actually gonna increase your overall sales.
To show your best selling products, first you need to create a category with your top revenue items (see step 3 if you don’t know how to create a category with redSHOP)
Next, as mentioned above, there are many extra modules provided by redCOMPONENT to support redSHOP extension, and one of them is called “redSHOP Products” that’s gonna help you to show your best selling products on the homepage.
You need to download the module on redSHOP website. Once downloaded, simply install the module like any other plugins.
To create your bestseller module, go to Extension -> Modules to create a new module.
If you have successfully installed the “redSHOP Products” module, you will find the module in the module list, select it.
Now, it’s your turn to fill in the information detail of your best selling items.
After finishing the module. It’s time to show it on frontend.
There are 02 ways that you can show this piece of information on your homepage.
Option 1: Using JSN PageBuilder 4
On JSN PageBuilder 4’s dashboard, click on Add Joomla Elements -> Joomla Modules and drag the element to the position you wish.
On the right column, in the content section, click on the "+" button and select the module you just created.
And it will automatically appear on the frontend.
Option 2: Using JSN Ferado 2 template
With this method, you need to assign the position for your module.
Then, go to the template dashboard, select module position and drag it to the position that you wish.
Next, on the right column, select the module position that you assigned earlier.
And that’s how you show your best selling items on your homepage using JSN Ferado 2 template.
- Section 6: Blog posts
Blog posts are great marketing and SEO tools for your e-commerce. Showing latest or featured blog posts on your homepage to tell your customers about you, your business and your products or useful piece of information regarding the products or the field that you are in.
I recommend using the EasyBlog extension to create and manage your blog posts.
And to show these blog posts on the front end, go to Add third party elements -> EasyBlog -> EasyBlog Post list
There are different layouts for you to choose from, depending on your needs and the number of blog posts you want to show.
- Section 7: Newsletter subscription
There’s no marketing method better than newsletter and email marketing. And to collect emails of your customers, you need a section where users can type in their email address.
A simple Mailchimp form can get the job done!
Go to Add element -> Advance -> Mailchimp form and select the form that you want to be displayed on your online store.
And those are all the necessary sections that you should include in your homepage and how you can optimize JSN PageBuilder 4 to display them. Once you have finished adding and styling the elements, it’s time to save the page and go online.
III. To Sum Up
And that’s the 7 steps to build your own Joomla e-commerce website using redSHOP and a JoomlaShine template. If you take a glance at it, it can be a lot to absorb within one read. But, try to read this in detail, you will find how simple it can be and your online shop will be finished in no time.
Hope that this article brings you some value in one way or another.
Happy building!
