In this tutorial we will show how to create an online shop using Joomla 3 and without any shop software like VirtueMart or HikaShop etc.
We will use another approach, a simpler approach because shop software might seem too complex or hard to configure.
We will use a Joomla module called Pay My Bill, which is very simple to use and has many functions to meet the needs of an online shop.
Minimal Joomla knowledge required, minimal web design skills required, no programming required.
View the website result of this tutorial
We need to download Joomla 3.2 from the official website, click here to download.
We need an hosting account of course, to host the website, or for testing under windows wampserver might be used, or xampp.
Now we have an working Joomla 3 website with sample data on it, we now need to configure and build the website.
First thing that we need to do is rename the htaccess.txt file from the website root folder to .htaccess, this will be needed to use search friendly URLs (SEF URL).
To do this we navigate to /administrator and log in as admin in the back-end of the website.
In the top menu click on "System" and select "Global Configuration", on this page under "Site" tab we need to enable the "Use URL rewriting" option. Now we have search engine friendly urls and no index.php in the url.
Second thing we need to take care of is the emailing settings, so the website can send e-mails.
To configure the email settings we need to go to the "Server" tab, on the same line with the "Site" tab we just configured.
Now, here we have 3 options on how to send emails, "PHP Mail" which will work if you installed the site on an actual hosting account which has php mail function enabled.
"Sendmail" option requires again that your website is on an actual web hosting account, will not work on localhost.
"SMTP" will work on a hosting account and on your local server on localhost, you need to configure this setting with your email account details.
Last thing we need to do is edit the contact info.
In the administration menu click on "Components" and select "Contacts". We have here listed the sample contact provided with the installation.
Open the "Your Name" contact for editing.
Now all the settings here are self explanatory, we add an address, the email address which will receive the contact emails, phone numbers, an image if needed, that must have been previously uploaded to joomla_root_folder/images.
Done! We have now a website that is search engine friendly and has a working contact form, now we move on with the actual website content.
Firstly we need to remove content that we don't need.
The sample data added an image all over the website below the top main menu.
This is a module, in administration top menu click on "Extensions" and select "Module Manager", in the list of modules we open the "Image" one.
We rename it's title to "Home Intro", delete the image from the "Custom HTML" box and add our own text (or image) that describes the website in a few words.
Now we need to show this module only on the home page, not all over the website, to do this we select the "Menu Assignment" tab, click on the select box and select "Only on the pages selected".
We uncheck all that is checked beside the "Home" option, if we would want to see this intro on the contact or about pages too, we would leave them checked also.
We also need to remove the right side module with the sample text and the login module.
We go again on "Extensions" >> "Module Manager" and we just click on the checked status to unpublish the modules "Side Module" and "Login Form", we don't need these 2.
There are some menu items provided by the sample data that we don't need.
In administration menu click on "Menus" and select "Main Menu".
We unpublish all the items listed here beside "Home", "About Us" and "Contact Us" by clicking on the green checkboxes.
We need to create a category in which we add all our products.
In administration menu click on "Content" and we select "Category Manager", here click on "New" to create a new category.
We set the category title as "Products" and add a description of the website products.
On the home page we want to list the latest products. We need to change it's menu type to a category blog layout.
In the admin menu we go to "Menus" and select "Main Menu", from the list we open "Home".
To change the menu type click on "Menu Item Type" and select "Articles" >> "Category Blog" from the list.
Now we just need to select the category, on "Choose a category" we select "Products".
Also we need to hide the "print" and "email" icons from "Options" tab, set "Show Print Icon" and "Show Email Icon" to "Hide"
There aren't yet any products added so don't panic if the homepage is empty for now.
We need to create a new article and menu item for the terms and conditions page.
In the admin menu click on "Content" and select "Article Manager", on this page click on "New" to add a new article.
We set "Terms and Conditions" as the "Title" and add the terms of conditions for using the website and buying products in the content tab, after finishing click on "Save & Close" button.
Now we need to add the menu item by clicking on "Menus" and select "Main Menu", click on "New" to add the new menu item.
As "Title" we add "Terms and Conditions", for "Menu Item Type" we select "Articles" >> "Single Article", for "Select Article" we select "Terms and Conditions".
We need to edit the About Us page to add the new content.
In the admin menu click on "Content" and select "Article Manager" and open the "About Us" article.
Delete the existing content and add the website about content.
Up untill now we have the structure of the website, now we need to add the products.
As mentioned before we will use Pay My Bill module.
It has many payment methods suitable for credit/debit card payments or e-currency payments, PayPal, CashU, CardStream, PerfectMoney, EgoPay, OkPay, PlatiOnline, PayU Romania, PayU LATAM (Latin America countries), PayU Poland etc.
Install the module as any other joomla extension by clicking "Extensions" >> "Extension Manager" >> "Install" in admin menu.
We need to create the payment buttons for the products, above we said we will sell software, tangible products, process invoices and hire services.
For the software product we will sell the actual Pay My Bill product on this website.
First thing we need to do is configure the payment methods we will accept.
In admin menu click on "Extensions" and select "Module Manager", in this page we select "Pay My Bill" in the "Select Type" filter.
The actual software product (the zip document in this case) must be uploaded to this location Joomla_Root/modules/mod_paymybill/documents.
We open the "Pay My Bill" module for configuration, for title we will leave "Pay My Bill" because this is the product sold.
We configure the module as follows:
Now all we need to do is configure the payment methods, for this demo we will use PayPal sandbox and CardStream because of easy testing.
The software product is configured, we just save it.
This product will be a CD sent to the buyer.
To create another product with Pay My Bill we need to open the existing "Pay My Bill" one and saving it as a copy, "Save as Copy" button.
Now we have a duplicate product with the same payment methods already saved, all we need to do is edit some values as follows:
That's it for the CD product.
This product will allow customers to pay their invoices online.
We will just duplicate any of the previous products and change the following settings:
Now we have a product in which the customers set the paying value and an invoice number.
This product would be used to pay in advance for services, in example 5 hours of programming services.
we will just duplicate the "Pay invoice" product and edit the following settings:
And that's it for the Hire me product, customers can buy hourly services.
Now we have our products ready but they are not shown anywhere on the website.
We will create for each product an article and add it to the "Products" category.
For each of the 4 products we will create a new article by clicking "Content" >> "Article Manager" >> "Add New Article" in the admin menu.
For each article will add the same product name as used in the Pay My Bill module, "Pay My Bill", "Joomla Shop Guide CD", "Pay Invoice", "Hire me".
For each article we will select the "Products" category.
For each article we add the corresponding details in the "Content" box.
At the end of the content we add {loadposition xxx} where xxx is the position set for each product from Pay My Bill, in example "pay_my_bill".
It is also recommended to use the "Read More" function, add the "Read More" in the first part of the article, thus the frontpage content looks nicer.
That's about it with the products, all we need to do now is add some finishing touches for the display options of homepage product list and single articles.
First we need a new menu, click on "Menus" >> "Menu Manager" >> "Add New Menu" in admin menu.
Add for Title "Products" and for Menu type "products".
We need to create a new module to list all of the website products for easy access.
To do this we will create a new module by clicking on "Extensions" >> "Module Manager", on this page click on "New" and select "Menu".
We will name this module "Shop".
On "Select Menu" choose "Products".
Select the position "Left top [position-7]".
In the "Menu Assignment" we select "On all pages".
Now we need to add menu items for our products.
Click on "Menus" >> "Products" >> "Add New Menu Item", for each of the 4 products we add a new menu item with the title as the product name, "Menu Item Type" as "Articles" >> "Single Article" and we select the corresponding article in "Select Article" option.
We still need to add some finishing touches to the website, configuration options.
We want to display the products in 2 columns, to do so click on "Menus" >> "Main Menu" and open "Home".
In the "Blog Layout" tab set "Leading Articles" to 0 and "Columns" to 2.
We want to get rid of all the extra data like "Author", "Publish Date" etc.
Click on "Content" >> "Article Manager" and on top right on "Options".
Set this options: "Show Category", "Show Author", "Show Publish Date", "Show Navigation", "Show Hits" to "Hide".
We need to add Meta Keywords and Meta Descriptions for our products.
To do so click on "Content" >> "Article Manager" and for each product article add in "Publishing" tab keywords and a short description about the corresponding product.
You have finished your Joomla Shop website now.
Add as many "Click to pay" buttons with {loadposition xxx} in the same article, in example at start, middle and bottom of the article content.
Pay My Bill module will not duplicate the html output like most Joomla modules do, you may add as many payment buttons as you want anywhere on your website.
Pay My Bill module can be loaded as a normal module, you don't need to create an article, just set the correct position and add description for you product.