How to Create an eCommerce Website Using Joomla in 2021 (Step-by-step)
Disclaimer: Your support helps keep JovialGuide running! Our content is reader-supported. This means if you click on some of our links, we may earn a commission.
Do you want to create an eCommerce website in Joomla? Or are you a Joomla developer who wants to learn how to create an eCommerce website using Joomla? Then this JovialGuide is for you!
Joomla is a very powerful and flexible CMS to use. It comes with packed features to easily build a website without any coding knowledge.
You can start selling goods online and make money from it, by creating an eCommerce website using Joomla.
In this JovialGuide, we will show you how to create an eCommerce website using Joomla (2021).
As a result of the lengthiness of this JovialGuide, below we have provided you with navigations, to help you easily reach the section that you want.
Getting Started
- What Do You Need to Create an eCommerce Website Using Joomla?
- How Much Does it Cost to Create an eCommerce Website Using Joomla?
How to Create an eCommerce Website Using Joomla (2021)
- Step 1: Setup Your Hosting Account
- Step 2: Install Joomla
- Step 3: Understand the Joomla Control Panel
- Step 4: Customize Your Joomla Website
- Step 5: Install a Joomla HikaShop Template
- Step 6: Install HikaShop
- Step 7: Customize Your Design/Template Styles
- Step 8: Add Your First Product
- Step 9: Add Payment Method
- Step 10: Add Shipping Method
- Step 11: Add a Menu Item
- Step 12: Install Joomla Extensions
- Step 13: Learn Joomla
What Do You Need to Create an eCommerce Website Using Joomla?
To create an eCommerce website using Joomla, you need an SSL certificate (HTTPS), domain name and a Joomla hosting account.
SSL certificate uses HTTPS for a secure connection. It basically lets you transfer data over a secure connection.
Domain name is the unique name your website users will use in finding your Joomla store. For example; jovialguide.com is the unique name of this website!
Hosting lets you host or house your Joomla shop. We recommend A2 Hosting (see review) because it is fast, secure, reliable and affordable.
How Much Does it Cost to Create an eCommerce Website Using Joomla?
The cost of creating an eCommerce website using Joomla is not fixed, because it depends on the service and tools that you will use.
Basically, it depends on the: Joomla hosting company and the premium template, extensions & services/tools you will use.
- There are lots of companies out there offering Joomla hosting services. For some, their services are usually high in price.
- On the other hand, the cost of creating an eCommerce website using Joomla also depends on the premium Joomla template, extension and services/tools that you will use to grow your Joomla store. If you choose to use free Joomla template and extensions with premium tools/services, then you are sure of saving some money than when you use premium Joomla extensions, template and tools/services.
Putting all of the above will give you the cost of creating an eCommerce website using Joomla.
You may want to see our detailed JovialGuide on how much does a Joomla website cost?, for answers.
Now, we will start by setting up our hosting account.
Step 1: Setup Your Hosting Account
We will show you how to setup your Joomla hosting account with A2 Hosting (see review). We recommend them because they are secure, reliable, fast and affordable.
Choose a Plan
To setup your hosting account with them, visit A2 Hosting. When it opens, you will see their Joomla hosting plans. Choose the one you want.
Choose a Domain Name
After you have selected the plan that you want, you will be asked to choose your domain.
You can transfer your existing domain from another registrar to A2 Hosting, register a new domain name or use an existing domain and update the nameserver.
Configure your Plan Options
On this page, you will be presented with configuration options and paid services.
Select the options you need and click the Continue button to proceed.
Review Your Details
This page allows you review all of the configurations you did.
Once you have reviewed and confirmed everything, click on the Checkout button to proceed.
Checkout
On the checkout page, fill out your account password, billing address, personal information, and choose your preferred payment method.
For payment methods, A2 Hosting accepts different payment options, such as: America Express, Visa, Mastercard, etc., choose one that is most comfortable to you.
After you have confirmed everything, click on the Complete Order button and your A2 Hosting account will be setup.
Step 2: Install Joomla
To install Joomla via Softaculous, log-into your Joomla hosting cPanel.
If you have not gotten a Joomla hosting yet, we recommend A2 Hosting.
When you are on the cPanel page of your Joomla hosting account, locate the “Software” or “Softaculous Apps Installer” section and click on “Softaculous Apps Installer”.
After that, under the “Top Scripts” section, click on “Joomla”.
This will open up a page containing details about Joomla and your hosing server. To start installing Joomla via Softaculous, click on the “Install Now” button.
On the “Software Setup” section of Joomla installation, select the Joomla version you would like to install. The latest version is completely recommended for security reasons.
After that, choose the protocol of your choice. Basically, there are four different protocols. Namely: the http://, http://www, https:// and the https://www. If your Joomla website uses SSL – Secure Socket Layer, then choose any of the HTTPS protocols.
Next, in the domain field, select the domain that you would like to install Joomla to. For example: example.com.
For the subdirectory field, leave it empty, because we are installing Joomla to the root domain and not in the subdirectory.
If you would like to install Joomla in a subdirectory, see how to install Joomla in a subdirectory.
On the “Site Settings” section, enter your Joomla “Site Name” and “Site Description” into their fields.
After you have done that, on the “Database Settings” section, select if you would like to import sample data. If not, select “None”!
For the “Admin Account” section, enter your preferred Admin Username, Password, Real Name and Email.
For Joomla security reasons, use password combinations that are difficult to guess, and also use an Email address you still have access to.
On the “Choose Language” section, go ahead and select the language of your choice.
After that, click on the “Advanced Options” section, and other options will toggle show.
Start by entering a database name to be created for the installation. Or you can leave the generated database name.
Next, enter a table prefix or leave the automatically generated one. If you are entering a table prefix, make sure it is 5 character long, and ends with an underscore (_).
For “Auto Upgrade”, for security reasons, select “Upgrade to any latest version available (Major as well as Minor)” so that it will automatically upgrade Joomla when there’s a major or minor release.
Now select a backup location where your Joomla backups will be saved.
After you are done, confirm everything from the top.
Once you have confirmed everything, click on the “Install” button and wait for the wizard to install Joomla for you.
If the wizard installs Joomla successfully, then you will see a success message that says “Congratulations, the software was installed successfully”!
Congratulations! You just installed Joomla via Softaculous.
Access and Log-into the Joomla Backend
After installing Joomla, the next thing to do is to log into the backend of your Joomla website so that you can start creating your blog.
The admin log-in page of your Joomla website could be accessed by adding /administrator to the end of the URL. For example, If your Joomla homepage URL is example.com, adding /administrator to the end of example.com, it becomes example.com/administrator.
Once you type in the correct Joomla login page URL, you will be presented with a page like the one below.
Now, to log into your Joomla website, enter your correct Joomla admin username and password (the ones you used while installing Joomla), and click login.
Step 3: Understand the Joomla Control Panel
Once you are logged into the Joomla backend, you will see a page that looks like this:
That is the Joomla Control Panel!
While creating an eCommerce website using Joomla, for sure, you have to understand the Joomla control panel and how to use it in order to be able to customize and add more functionalities as you want. Nevertheless, we have this section to get you acquainted with the Joomla control panel.
- Content – provides you with links to manage your
articles, categories and media contents. - Structure – gives links to Menu(s) and Modules, where you can create and manage Joomla Menus and Modules.
- Users – provides a link to the users’ page, which allows you create, modify and manage your Joomla users.
- Configuration – is the most powerful section of all. It provides navigations to pages that lets you change your Joomla template, set site offline, set SEO meta data, etc.
- Extension – lets you install Joomla extensions.
- Maintenance – provides you with links to pages that checks if the version of Joomla you are running is the latest (up-to-date), and if all of the extensions you are running are up-to-date.
- Latest actions – displays all of the most recent actions or activities carried out by your Joomla users.
- Logged-in users – shows the usernames of all of the logged-in users.
- Popular articles – displays a list of all of the popular articles in your Joomla website.
- Recently added contents – shows the recently added contents to your Joomla website.
- Site Information – displays the information about your server, like: PHP version, Operating System, time, etc.
The taskbar of Joomla is located at the top of every backend page of Joomla.
It lets you easily navigate through different pages of the Joomla backend without going to the control panel first.
Since we will be using more of the taskbar for navigation to create an eCommerce website using Joomla, we will also familiarize ourselves with it.
- System – takes you to the Joomla Control Panel, allows you clear expired cache, see system information, etc.
- Users – lets you create and manage users, access level, user groups, and many more.
- Menus – allows you add and manage Menus and Menu Items.
- Content – lets you add and manage articles, categories and media contents.
- Components – shows you Joomla post-installation messages, allows you create tags, setup redirects, and many more.
- Extensions – lets you install, update, and manage your Joomla extensions.
- Help – takes you to the official Joomla documentation for help topics.
You may want to see our JovialGuide on the overview of the Joomla control panel to learn more.
Step 4: Customize Your Joomla Website
There are a few things to do after installing Joomla. These things let you customize your Joomla website to be professional.
In this section, we will show you what to do after installing Joomla.
Below, we will start by changing the Sitename.
Change Sitename (Site Title)
To change your Sitename, navigate to System » Global Configuration. On the Site tab, under the Site Settings section, you will find Site Name. Type the new Sitename that you want into the field.
Note that Sitename is different from the browser page title. Sitename is basically your Sitename, for example; JovialGuide.
Once you are done, click on the Save button to save (not the Save & Close button).
After that, still stay on the Global Configuration page, there are a few other configurations to set.
Add Sitename in Page Titles
This configuration adds the Sitename to all page titles of your Joomla website.
Still on the Global Configuration page, under the Site tab, locate the SEO Settings section. Go ahead and change the Site Name in Page Title from No to either “After” – to add the Sitename after the page title, or “Before” – to add the Sitename before the page title.
After that, save the new setting by clicking on the Save button to save (not the Save & Close button).
Don’t leave the Global Configuration page yet.
Edit Metadata Settings
Metadata settings are what search engines use in indexing your website. What you set is exactly what search engines will use on your website.
To set your meta settings, under the Metadata Settings section, enter your Site Meta Description and your Site Meta Keywords.
Your Site Meta Description is a short description of what your website is all about in 20 words in maximum.
Site Meta Keywords are a set of keywords that are related to your website.
Google as a search engine claims to not use meta keywords to rank your website. Nevertheless, you can leave the Site Meta Keywords field empty (blank).
Once you are done, this time, click on the Save & Close button.
Create a Contact Us Page
You have to create a contact us page to collect feedbacks from your Joomla users.
In our detailed JovialGuide, we explained how to create a contact us page in Joomla.
Create an FAQs Page in Joomla
You can easily create an FAQs page in Joomla to answer the most frequently asked questions of your users.
This is most useful if you run a service-based Joomla website.
In our detailed JovialGuide, we explained how to create an FAQs page in Joomla.
You may want to see our detailed JovialGuide on things to do after installing Joomla to learn more.
Step 5: Install a Joomla HikaShop Template
A Joomla template is a set of styles used to design and beautify a Joomla website.
The frontend appearance of your Joomla website; the part where your users see is controlled by a Joomla template.
Joomla templates are available in both free and paid versions to choose from.
There are also templates providers that you can buy or download Joomla templates for free from. JoomDev and JoomShaper are some of the best Joomla template providers to buy and download from.
By default, Joomla comes with two default templates for the frontend, namely: Beez3 and Protostar. However, after you install Joomla, it uses Protostar, one of the default frontend templates for your Joomla website. It looks like the screenshot blow.
Nevertheless, it is not up to the needs of your Joomla eCommerce store. This is the time you need to install a HikaShop Joomla template of your choice!
Joomla offers different methods to install a template. However, in this JovialGuide, we will use the “upload package method”.
To install a HikaShop Joomla template using the upload package method, firstly, you have to download the Joomla template you want to install, into your local storage.
If you need help choosing the right Joomla template for your website, see our JovialGuide on how to choose the best Joomla template for more.
You may want to see the best HikaShop Joomla templates.
After you have downloaded the Joomla template that you want to install, click on Extensions » Manage » Install.
When it opens, click on the Upload Package File tab. Now, you can drag-and-drop the package file that you want to upload and install unto the upload box. Alternatively, you can click on or browse for file button, then select the Joomla template you downloaded and want to upload and install, from your local storage (where you downloaded it to). Then wait for it to upload and install.
Once upload and installation is successful, it will show you a success message that says “Installation of the template was successful”.
After you have uploaded and installed the Joomla template of your choice, notice that it didn’t show on the part your visitors see (frontend). Nevertheless, to make it show, you have to set it as the default frontend template – the visual part your visitors sees.
Set the Newly Uploaded Template to Default Frontend Style
To set the template style you just uploaded to default, navigate to Extensions » Templates » Styles. After that, tick the checkbox beside the Template Style that you want to set to default, then click on the Default button.
Alternatively, you can simply click on the star icon beside the template style that you want to set to default, and the style will become the default frontend template style.
Step 6: Install HikaShop
Since we are using HikaShop to create an eCommerce website in Joomla, then you need to install it to your Joomla website.
HikaShop is available in 3 different versions: HikaShop Starter – free, HikaShop Essential – paid, and HikaShop Business – paid (best version). Choose one that is best for you!
Installing a Joomla template is the same as installing a Joomla extension. So follow the instructions for installing a Joomla template (above).
Step 7: Customize Your Design/Template Styles
Your aim is to create an eCommerce website using Joomla that meets your needs without hiring a Joomla developer.
Joomla template allows you easily customize your design without knowing how to code!
To customize the website design of your template style, go to Extensions » Templates » Styles.
When it opens, click on the default template style (the one you uploaded and made default) to open it. Alternatively, you can tick the checkbox beside your default template style and then click on the Edit button.
After that, click on the Advanced tab. When it opens, you will see configuration settings like: Template Colour, Background Colour, etc. Now set the Template Colour, Background Colour, Title, Description, etc., to what you want.
Once you are done, click on the Save & Close button to save your new configurations.
After you have saved, visit your Joomla eCommerce store to see everything you have done.
Step>Step 8: Add Your First Product
To add a product in HikaShop, go to Components » HikaShop » Products.
On the products’ page of HikaShop, you will notice “no records found”. This is basically because you have not added any products yet.
Before we add our first HikaShop product, let’s add our first Category and Brand.
To add a category in HikaShop, still on the Products page of HikaShop, click on Products » Categories.
On the Categories page, click on the New button to add a new HikaShop Category.
Now enter the required details and click on Save & Close (at the top of the page), to save, and then redirect to the Categories page.
To add a Brand in HikaShop, goto Products » Brands. Then it will open up the Categories page. After that, click the New button. Now go ahead and enter your Brand details and Save & Close.
To go back to the HikaShop Products page so that we can add our first HikaShop product, click on Products » Products.
To add your first HikaShop product, click on the New button at the top of your HikaShop Product screen.
You will be presented with a page that allows you add a product. Notice that this page is divided into different sections. We will be starting with the first section – Main Options, and subsequent sections follow.
Main Options
Main Options section allows you set the name of your product, category, etc.
- Name – This field allows you set the name of your product. Type in your product name into the name field. Whatever thing you enter into the Name field will be displayed on the store.
- Product Code – You can set product code for the product you are adding. Your product code has to be unique. If you do not enter a product code, it will be automatically generated from your product name.
- Quantity – In this field, you have the ability to enter the quantity of products that are available. If you enter a number into the quantity field, the quantity will decrease once somebody buys that product. Once the product quantity decreases to “0”, the product will be “Out of Stock”. However, if you leave the quantity field untouched, “Unlimited” will serve as the quantity of product that you have.
- Categories – You can assign your product to one or more categories. Shoes, books, etc., are examples of a category.
- Brand – Here, you can assign your product to a brand. If you are selling laptops, HP, Dell, etc., are examples of a brand.
- Tags – You can assign one or more tags to your product.
- Published – This option is responsible for displaying your post on the frontend of your store. By default, the selected value is “Yes”, which means that once you save the product, it will be shown (published) on your store. If set to “No”, your product will not be shown on the frontend after you save it.
Images And Files
Images And Files section is the next section that comes after the “Main Options” section. It allows you upload images and files for your product.
There are two surfaces for your images and files. The first surface is for images, while the second surface is for your files.
To add an image, there are 4 ways of doing it:
- You can easily drag and drop the image on the image drag and drop surface, and the image will be automatically uploaded to your web server.
- Click on the upload button (the first button from left), then upload the image from your local storage.
- You can also insert an image by clicking on the second button (select an image), and you will be presented with a modal that allows you add an image that is already uploaded or present on your web server.
- Lastly, you can also add an image by clicking on the first button from right. This option allows you to enter an image URL from another website or source.
To add files, follow the steps for adding images, they are the same for adding files.
Prices and Taxes
Here, you can set the price and tax for the product that you are adding.
Start by selecting a Tax Category.
Selecting a Tax Category requires you to configure a Tax Rule first.
To add price and tax, enter the price in the Price field, Price with Tax, as well as the Currency. Quantity allows you select the minimum quantity the price will apply once in cart.
If you had already configured a tax rule, then the price with tax will be automatically calculated for you.
Description
This section lets you write a description for the product you are adding.
Write a very detail description about your product. It is exactly what will be displayed to your shop as product description.
SEO
Here, you can set the SEO of your product for search engine ranking. Since most of the traffic to your store/product page will be coming from search engines, then you certainly have to pay good attention to the SEO of your store, in order to receive a decent amount of traffic.
There are input fields in this section that you need to configure for your product’s SEO. Let’s take a look at them:
- Page Title – Here, you can enter the page title for your product. Page title displays at the browser tab, before page icon (favicon). Enter your desired page title. Make it short and detailed.
- Brand URL – The brand URL field allows you enter a website URL to the descriptive page of your product. It will be displayed on your product page. If you have no brand URL, you can leave empty!
- Meta Description – Search engines make use of meta descriptions to rank your website. Type in a short and detailed description about your product into the meta description field.
- Keywords – Keywords are related to your website’s ranking. The Keywords or meta keywords field allows you write words or keywords that best describes your product, separated with commas. You can leave this field empty if you want!
- Alias – This is basically the URL, or permalink to your product. This field is required. However, if you leave it empty, it will be automatically filled from your “Product Name” field.
- Canonical URL – To avoid being flagged by search engines for duplicate content, if you have different URLs of the same domain, pointing to the same product, e.g. “example.com/best-sneakers” and “example.com/product?id=50”, then you have to enter one of them you would like search engines to see as the original URL.
- Condition – Here, you can select the condition of the product you are selling. You have the option to select “New”, “Used”, “Refurbished” or “None”.
You may want to see our JovialGuide on best Joomla SEO extensions and tools to optimize your website.
Restrictions and Dimensions
This section allows you set weight, restrictions for order and dimensions for your product.
- Quantity per Order – There are two fields here that allows you set the quantity of products per order and the maximum quantity per order. This means that a buyer can only order a minimum of xxxx, and a maximum of xxxx in quantity (if set).
- Available From – You can set the date range that your product will be available. If the date range is set from xxxx to xxxxxx. When the date range exceeds xxxxxx, the product will not be able to be added to the cart (only if set).
- Warehouse – Here, you can join different group of products with different shipping methods.
- Weight – This field allows you set the weight of your product alongside its measuring unit.
- Volume – Here, you can set the dimensions of your product and its measuring unit.
To avoid conflicts, be sure your server and website timezone are the same.
Specifications
This is the section that is responsible for setting the specification of your product.
- Characteristics – This is very useful if your product is available in different variants, like color.
- Related Products – Here you can add one or more products that are related to the current product you are adding. The related products you add here, will be shown on the bottom of this product page.
- Options – Here, you can suggest for your buyers or customers, additional features or options for your product. If you sell xxxxxx, you can suggest additional xxxxxx and its price for your users. If they select the additional option together with your product, then they will pay a bit higher than the product price (product price + additional product price).
Both “Options” and “Bundled Products” are only available in the Hikashop Essential and Business plans.
Display
This section allows you configure the display of your product page.
- Page Layout – This allows you set the layout of your product page. You can further customize your layout via Menu » Display » Views.
- Quantity Input – Here, you can select how you want your quantity input to be displayed. This is basically the button that handles product quantity.
The options that appear for “Page Layout” and “Quantity Input”, are based on how you configure HikaShop.
Before you save cross-check everything to be sure they are fine. Note that you can always come back anytime and edit any of the details you provide for your product.
To save your new HikaShop product, scroll to the top of the page. You will see “Save” and other buttons.
HikaShop allows you:
- Save – save the current product and still remain on the same screen.
- Save & Close – saves the current product, closes this page and takes you to the product page.
- Save & New – saves the new HikaShop product, and opens up a add new product page for you to add a new HikaShop product.
- Cancel – cancels everything by redirecting you to the product page without saving.
Go ahead and select the save option that you want.
That is it, you just added your first HikaShop product!
Repeat the same steps above to add as many HikaShop products as you would want.
Step 9: Add Payment Method
This is the time that you have to setup at least one payment method so that it will be displayed on the checkout page.
To configure a payment method in HikaShop, head over to Components » HikaShop.
When you are on the HikaShop menu, you will notice that there are no payment methods added yet. To add one, click on System » Payment Methods.
After that, click on the “New” button at the tool bar.
This will open up the “Plugins” page. The Plugins page displays the HikaShop payment methods.
In this JovialGuide, we will be using the “Bank Transfer” payment method that is available on HikaShop, since it is not connected to other third party external payment system.
Click on the red x button to (under “Enabled”) enable the “HikaShop bank transfer payment plugin”. After that, click on the “HikaShop bank transfer payment plugin”.
When it opens, configure your bank account details and save.
That is it, you just added a HikaShop payment method to your store!
Step 10: Add Shipping Method
Shipping allows you transport or move your products to your users. Now, if your product is a virtual product (virtual products are services, so the product weight will be 0), then shipping won’t be required!
To add a shipping method, goto Components » HikaShop.
When you are on the HikaShop menu, you will notice that there are no shipping methods added yet. To add one, click on System » Shipping Methods.
After that, click on the “New” button at the tool bar.
This will open up the “Plugins” page. This Plugins page displays the HikaShop shipping methods.
Click on the red x button to (under “Enabled”) enable any HikaShop shipping method of your choice. After that, click on that same shipping method to configure it. After configuration, save it.
Step 11: Add a Menu Item
For your HikaShop store to display on the frontend, you have to add a Menu Item that displays your products.
On the other hand, once you install HikaShop, it creates a Menu, with some Menu Items. With this, you won’t have to add a Menu before adding Menu Items.
To add a Menu Item that displays your products, goto Menu » HikaShop default menus » Add New Menu Item.
Once it opens, enter your Menu Title.
After that, click on the “Select” button on the same line of Menu Item Type to select a Menu Item Type.
Next, you will be presented with a modal to select a Menu Item Type. To select a Menu Item Type for your HikaShop store, click on HikaShop » Product Listing.
Now to make it the frontend or homepage of your Joomla eCommerce store, change Default Page from No to Yes and save.
Congratulations, you just created an eCommerce website in Joomla using HikaShop.
Now visit your Joomla website to see your eCommerce website in Joomla.
Step 12: Install Joomla Extensions
Now that you are creating an eCommerce website using Joomla, you will need Joomla extensions to extend your Joomla website.
Joomla extension is an addon for adding additional functionalities to your Joomla website.
There are thousands of Joomla extensions in both free and paid versions. All you have to do is to download or buy the ones you need and install.
Installing a Joomla extension has the same steps as installing a Joomla template. So, you can go ahead and follow the steps you used in installing a Joomla template (above) to install a Joomla extension.
Below are some of the recommended Joomla extensions to install:
GDPR Compliant
- EU e-Privacy Directive – to make your Joomla website GDPR compliant (see best Joomla GDPR extensions for more).
Joomla Content Editor
- JCE – for content editing (see best Joomla editor extensions for more).
Search Engine Optimization
- RSSEO – to optimize your Joomla website for search engines.
- JSitemap – to create and manage Joomla sitemaps (see best Joomla SEO extensions and tools for more).
Backup
- Akeeba Backup – to properly backup your Joomla website (see best Joomla backup extensions for more).
Security
- RSFirewall – to secure your Joomla website from hackers (see best Joomla security extensions for more).
Step 13: Learn Joomla
To boost your Joomla knowledge, you have to learn Joomla!
To learn Joomla, you may want to see our detailed JovialGuide on:
- how much does a Joomla website cost?
- types of websites you can create with Joomla
- how to build a Joomla website
- how to create a blog in Joomla
- how to secure your Joomla website
- how to make money with Joomla
We hope this JovialGuide helps you learn how to create an eCommerce website using Joomla (2021).
If you are looking for a perfect and budget friendly Joomla hosting 2021 for your Joomla eCommerce store, then A2 Hosting is available for you.
To get started with Joomla, you may want to see how to build a Joomla website or how to create a blog in Joomla.
See other of our Joomla tutorials for more.
Leave a Reply