How to create a Joomla eCommerce website

Next, you’ll want to convert Joomla to a web store CMS. Use a Joomla extension to extend the system with eCommerce features and func­tion­al­i­ties. The most popular ex­ten­sions include:

• Virtue­Mart: Virtue­Mart has been running since 2005. The open source eCommerce solution offers over 500 features to start your in­ter­na­tion­al Joomla eCommerce store. Ad­di­tion­al Virtue­Mart plugins can be used to add yet more functions.
   
• J2Store: J2Store has already been down­loaded over 350,000 times. The extension is available in a slim, free, basic version or in a paid pro edition (monthly sub­scrip­tion) with ad­di­tion­al features such as coupons, vouchers or invoice templates.
   
• HikaShop: HikaSHop is available in three different editions. The free Starter package is best suited for those setting up their first Joomla eCommerce store. To operate a store long-term, however, you need one of the paid (one-off payment) versions “Essential” (small stores) or “Business” (large stores).

For the purposes of this tutorial, we will use the Virtue­Mart extension. Re­gard­less of your selection, in­stal­la­tion of the store extension works as follows:

1. Launch the Joomla backend.
2. On the left click on “System”.
3. From “Install” select “Ex­ten­sions”.
4. Specify the location of the Joomla web shop plugin package files, if you’ve already down­loaded them.
5. Al­ter­na­tive­ly, you can navigate to the “Install from Web” tab and search for the desired extension.
6. Click the ap­pro­pri­ate search result and press “Install”.

By default, Virtue­Mart is installed in English. However, there are numerous language packs for the extension, which can be used to change the menu language in the Joomla backend at any time.

To organise your products optimally, set up the shop by creating suitable product cat­e­gories. It’s a good idea to consider which cat­e­gories are best suited for your project. Once you’ve worked out a concept for clas­si­fy­ing your products, proceed as follows:

1. Click 'Com­po­nents' on the left in the Joomla backend.
2. You should be able to see the Virtue­Mart menu after in­stalling the extension. Open it and select 'Product category'.
3. Click 'New' to create a new category.

Now, adjust the settings for each category. Enter important in­for­ma­tion such as the category name and a search engine-friendly alias and metadata in the first tab. You can then add a de­scrip­tion to your category.

In the “Virtue­Mart Category View Settings” tab, you can now configure the category struc­tural­ly and visually. For example, you can specify whether the search function and sub­cat­e­gories are viewable and which templates and layouts should apply to the re­spec­tive pages.

Finally, add one or more images to the product category in the “Images” tab. If you haven’t uploaded any images yet, you can do so at this point. Scroll down and select the desired photo via “Upload file”. To upload, hit “Save” in the top menu bar. The image is au­to­mat­i­cal­ly selected and you can define all important image in­for­ma­tion such as the file name, alt text or de­scrip­tion:

Once you’ve created cat­e­gories for your Joomla eCommerce store, you can fill them by adding products. To add a new product, follow these steps:

1. Call “Com­po­nents” from the left-side menu.
2. Click on “Virtue­Mart”.
3. Select “Products”.
4. Click “New”.

Setting options for in­di­vid­ual products are extensive. Enter all relevant product in­for­ma­tion in the first tab — product name, man­u­fac­tur­er and ISBN, for example. You can also set the price. Assign a category you created in “Cat­e­gories” and check “Published” for the product to be displayed.

Other options for product main­te­nance are as follows:

• “Product de­scrip­tion”: Add a short and detailed de­scrip­tion and meta in­for­ma­tion for the re­spec­tive product.
   
• “Product status”: Define in­for­ma­tion as to the status of a product. How many items do you have in stock? How many items can in­di­vid­ual users purchase? Ad­di­tion­al­ly, you can prepare and send emails to buyers.
   
• “Product di­men­sions and weight”: Add in­for­ma­tion on length, width, height and weight (with and without packaging).
   
• “Product image”: As with cat­e­gories, you can upload product images.
   
• “Custom field”: If you want to tease products or cat­e­gories, you can set it up in this tab. If necessary, you can also define your own fields.

Once you’ve saved the finished product entry, it’ll be listed in the overview.

After you’ve created and linked category pages and products, it’s time to display them on your Joomla site. The Virtue­Mart store can be in­te­grat­ed as a single page in any menu since all shop-internal pages are linked to each other. For example, you can integrate the store into the main menu as follows:

1. Call up “Menus” from the left side.
2. Select “Main Menu”.
3. Click “New”.
4. Enter a title such as “Store”.
5. “Select” the category layout in “Menu Item Type".
6. Click “Virtue­Mart” and “Category Layout”.
7. Hit “Save”.

You should carefully consider the payment and shipping options you’d like to offer in your Joomla web store. In principle, the more options you offer, the better. Virtue­Mart supports various payment options such as PayPal, Amazon Pay and 2Checkout.

The shipping or payment options you add are up to you to decide, but you must create in­di­vid­ual entries for each option. Proceed as follows:

1. Select the category “Com­po­nents” on the left.
2. Launch the “Virtue­Mart” menu.
3. Click “Shipping Method” or “Payment Method”.
4. Add a new entry with “New”.