(For more resources related to this topic, see here.)
Looks are everything on the web. If your store doesn’t look enticing and professional to your customers then everything else is a waste. This article looks at how to make your VirtueMart look stunning.
There are many different approaches to creating a hot-looking store. The one that is best for you or your client will depend upon your budget and your skill set.
The sections in this article will cater to all budgets and skill sets. For example, we will cover the very simple task of finding and installing a free Joomla! template or installing a VirtueMart theme.
Then we will look at the pros and cons of using two different professional frameworks namely Warp and Gantry.
In the middle of all this, we will also look at the stunningly versatile Artisteer design software that won’t quite give you the perfect professional job but does a very fine job of letting you choose just about every aspect of your design without any CSS/coding skills.
Removing the Joomla! branding at the footer
With each version of Joomla! and VirtueMart being better than the last one in terms of looks and performance, it is not unheard of to launch your store with the default looks of Joomla! and VirtueMart.
The least you will probably want to do is remove the Powered by Joomla!® link at the footer of your store. This will make your store appear entirely your own and perhaps have a minor benefit to SEO as well by removing the outbound link.
Getting ready
Log in to your Joomla! control panel. This section was tested using the Beez_20 template but should work on any template where the same message appears. We will also be using the Firefox web browser search function but again, this is almost identical in other browsers.
Identify the message to be removed on the frontend of your site as shown in the following screenshot:
How to do it…
This is going to be nice and easy so let’s get started and perform the following steps:
- Navigate to Extensions | Template Manager from the main Joomla! drop-down menu as shown in the following screenshot:
- Now click on the Templates link (it is the one next door to the Styles link) as shown in the following screenshot:
- Scroll down until you see Beez_20 details and Files click on it as shown in the following screenshot:
- Now scroll down and click on Edit main page template .
- Next press Ctrl + F on your keyboard to bring up the Firefox search bar and enter <div id=”footer”> as your search term. Firefox will present you with the following code:
- Delete everything between <p> and </p> both inclusive.
- Click on Save & Close .
How it works…
Check your Joomla! home page. We now have a nice clean and empty footer. We can add Joomla! and VirtueMart modules or just leave it empty.
Installing a VirtueMart template
In this section we will look at how to install a theme to make your store look great with a couple of clicks. There are a few things to consider first. Is your website just a store? That is, are all your pages going to be VirtueMart pages?
If the answer is yes then this is definitely the section for you. Alternatively you might just have a few shop pages in amongst an extensive Joomla! based content site. If this is the case then you might be better off installing a Joomla! template and then setting VirtueMart to use that. If this describes your situation then the next section, Installing a Joomla! template is more appropriate for you.
And there is a third option as well. You have content pages and a large number of VirtueMart pages. In this situation some experimentation and planning is required. You will either need to choose a Joomla! template that you are happy with for everything or a Joomla! template and a VirtueMart theme which look good together. Or you could use two templates. This last scenario is covered in the Creating and installing a template with Artisteer design software section.
Getting ready
Find a template which is either free or paid and download the files from the template provider’s site (they will be in the form of a single compressed archive) on your computer.
How to do it…
Installing a VirtueMart template has never been as easy as it is in VirtueMart 2. Perform the following steps for the same:
- Navigate to Extensions | Extension Manager from the top Joomla! menu.
- Click on the Browse… button in the Upload Package File area, find and select your template file as shown in the following screenshot:
- Click on the Upload & Install button and you are done!
How it works…
The VirtueMart template is now installed. Take a look at your shiny new store.
Installing a Joomla! Template
As there is clearly something of a supply problem when it comes to VirtueMart-specific free templates, this section will look at installing a regular Joomla! template and using it in your VirtueMart store.
Installing a Joomla! template is a very easy thing to do. But if you have never done it before read on.
Getting ready
Check the resources appendix for a choice of places to get free and paid templates. Download your chosen template on your desktop. It should be in the form of a ZIP file. Log in to your Joomla! admin area and read on.
How to do it…
This simple section is in two steps. First we upload the template then we set it as the active template.
- Select Extensions | Extension Manager from the top Joomla! menu.
- Click on the Browse… button in the Upload Package File area, find and select your template file as shown in the following screenshot:
- Click on the Upload & Install button.
- Now select Extensions | Template Manager .
- Click on the checkbox of the template you just installed and then click on Make Default .
How it works…
So what we did was to install the template through the usual Joomla! installation mechanism and once the template was installed we simply told Joomla! to use it. That’s it. You can now go and assign all your modules to your new template.
