Looking for documentation? Take a look on our wiki

Main Menu

Change the layout/style of your shop

Started by Scar, November 05, 2009, 17:15:06 PM

Previous topic - Next topic


In components/com_virtuemart/themes you can find all styling related to VirtueMart. To create your own style just copy the folder "default" and rename it and place it in the same folder right next to default, i.e. in themes folder.

Now open the new folder and let's have a look at some of the files inside.

theme.css - The main css file of VirtueMart. This is where the styling is. The class names are pretty self-explanatory so you should have no problem finding what you're looking for. If you don't know css you should learn it first, a good start would be: but there are tons of guides out there.

The template folder holds the pages templates like basket, browse pages, product details pages and a lot more. They are in subfolders to keep some order. Browse page is the category page of VM. Flypage is the product detail page. shopIndex is VM frontpage.

In some of the folders you'll find an includes folder that holds templates of subparts of the pages. All are named so that it would be easy to figure out what they do, but have a look inside the files to see what the actually do.

There is no big secret to styling VM pages, it's all pretty simple. A page template consists of html that does the actual styling so go ahead and build your page in your favourite editor. If you don't know html you should learn it first: . When your design is ready we have to fill it up with VM content, like on your flypage you would probably want to have the product images, add to cart and description and so on. All this is done by inserting variables in your design, all available variables are listed in the Developer Manual. Place all your styling in the theme.css.

Let's say you want to add the add to cart button to your new flypage design. You'll find the addtocart variable in the list in the Developer Manual. The syntax would then be like this:

<?php echo $addtocart ?>

Voila! It magically appears on your flypage. This is exactly the same for all the variables. If you need some hints on what to put on your flypage just take a look at one of the default flypages. If you make your own from scratch don't forget to put this on top of the file:

<?php if( !defined'_VALID_MOS' ) && !defined'_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' );



To use your new theme go to Admin->configuration->Site(tab), to the right there is a dropdown, select the name of our new theme.

There is also a good tutorial here: