HERA VIRTUEMART TEMPLATE
DOCUMENTATION
•
Template installation
•
Quick start package installation
•Module positions
•
Template logo
•Template menu
•Template width
•Template styles
•
Custom background image
•Body background color
•Content background color
•Template fonts
•
Free shipping badge
•Product badges
•
Text of product badges
•Pop up login
•
Links color
•
Add to cart button color
•Custom css
•
Custom javascript
•EU cookie notice
•
Responsive content slider
•Social sharing buttons
•Product SKU
•
Google analytics code
•Category List , Grid layout
•Webmaster Tools
Template installation
To install the templates :
1. Login to Joomla administration area. 2. Go to "Extensions -> Extension Manager".
3. In the "Upload Package File" field find the template file that you downloaded from our web site and hit the "Upload & Install" button.
4. Go to "Extensions -> Template Manager" and set the template as default.
IMPORTANT
You must enable "Use external google jQuery library" in VirtueMart Configuration or else the template will not be functional. Also make sure that no other plugin, module or extension loads jQuery to avoid conflicts.
Quick start package installation
To install the quick start package follow these steps (we will use Horme files for this example ) :
1. Unzip the template file you downloaded
(Horme_virtuemart_template_UNZIP_FIRST.zip). Inside you will find the template file (horme2.zip) and the quick start package file
(horme-quickstart-package.zip).
2. Upload the horme-quickstart-package.zip to your server's www root folder (public_html on Cpanel servers).
3. Extract the file.
4. Open your favorite browser and type your domain name.
5. The Joomla installation page should appear. Follow the installation steps and at
step 6 "Main Configuration" in the "Load sample data" area click the option
"sample_horme" and hit the "Install Sample Data " button.
6. Finish the installation by filling all the necessary fields and click the "Next" button.
7. Delete the installation folder.
That's it, you just finished the quick start package installation.
IMPORTANT !!!
As a next step you have to set the user that will be associated with the shop vendor, log in to the administration area of your web site and follow the steps below to set the user that will be the shop vendor.
1. Go to Virtuemart administration and click the shop menu , fill in the shopper information and save.
2. Go to Joomla menu"Users ->User Manager" and find your user ID .
3. Go to Virtuemart menu "Configuration-> configuration" at the "Shop" tab and check the option "administrated multivendor" .
4. Go to "Tools -> Tools & Migration" at the "Migration" tab and input your user's ID in the "Write here the new store owner id" field and click the "set store owner" button.
5. Repeat step 2 and uncheck the option "administrated multivendor".
Now all the tabs in the Shop menu are available and you can edit the shop name, description e.t.c.
You are finished ! Enjoy your new e-shop.
Before installing on a live server you should first create a database and a database user because the Joomla! installer will ask for this information at step 4.
Template logo
To set up the template logo follow these steps: 1. Create a new Custom HTML module. 2. Set position to "Logo".
3. Set "Status" to "Published".
4. Insert your logo in the Custom Output Text Area. 5. Set Module Assignment to "On all pages".
Template menu
In order to display the main menu find your desired menu module, set the position to "menu" and select "YES" in "Always Show Submenu Items".
Template width
The template has two predefined template widths 1. Box = 1170px centered
2. Full Width = Full Screen
In order to set the width, go to template configuration page and select the desired width from the "Template Width" drop down list.
Template styles
The Hera template has 7 template styles. If you would like to change the template style go to template configuration page, select the desired style form the "Template style" drop down list and save.
Custom background image
The template has an option to set a custom background image. The background will be centered, fixed and it will cover the full screen.
Go to template configuration page and click the "Select" button at the "Background image" option. The file up-loader window will open so you can select an image from the image directory or upload a new image from your computer. After selecting or uploading the desired image, save the new settings.
NOTICE
It is preferred to use a background image with size 1920x1080px so the background is clear on large screens. Make sure that you compress the image at 75-80% if you use jpg file, or if it is a png file use the https://tinypng.com/ service to drastically reduce the size without losing quality.
Body backgound color
If you like to change the default body background color go to template configuration page, enter the hex value or the color name in the "Body background color" input field and save.
Content background color
If you like to change the default content background color, go to template
configuration page, add the hex value or the color name in the "Content background color" input field and save.
Template fonts
In order to set the desired fonts for the body and headings go to template
configuration page , select the desired font family from the "Body fonts" and "Header fonts" drop down lists and save.
NOTICE
The template uses Google fonts, so it is important to check if the font family you selected has character sets for your language.
Free shipping badge
The template has an option to display a free shipping badge. In order to enable the badge you have to set the amount for free shipping in template configuration page under "Virtuemart Settings" -> "Free shipping badge" input field. Any product with a sale price equal or higher than the amount you set will display the free shipping badge.
Product badges
The product badges work with virtuemart version 2.0.22 and higher. If you have an older version you have to upgrade first.
The settings below apply to most of the templates but some features might not be available.
New Products
To enable the badges for new products follow these steps: 1. Go to virtuemart configuration.
2. Select the "Shopfront" tab.
3. At the "Core settings" area find the "Latest Products - Number of days to display" field and input the number of days you want a product to be considered as new.
Featured Products
To enable the featured badge you must check the "On Featured" checkbox in the product edit page.
Discounted Products
For discounted products the badge is displayed automatically.
Out of stock Products
(Only for Horme 2 template) The out of stock badge is displayed automatically except if the option "Products Out of Stock are orderable, no special action" is selected in Virtuemart configuration.
If your template has the option "Product badges" in "Virtuemart Settings" field you must check it also for the badges to display.
Text of product badges
You have two options to customize the displayed text
1. Directly edit the language file that you can find in the language\en-GB folder inside the Joomla installation.
2. Use the Language Overrides feature of Joomla!
Example
If you need to translate the text to your language, copy the en-GB.tpl_hera.ini in your language folder, rename it and edit the file.
Example for Greek language
Copy the original file to language\el-GR folder of Joomla installation, rename the file to el-GR.tpl_hera.ini and edit the text fields.
Pop up login
In order to enable the pop up login module :
1. Create or use an existing Joomla! login module 2. Publish it in toolbar-r module position
Links color
To change the default color of the links, go to template configuration page, enter the hex value or the color name in the "Links color" input field and save the settings. Use this tool to find the hex value of colors if you don't know it.
Add to cart button color
If you want to change the add to cart button color go to template configuration page, select a color option from the "Button color" drop down and save.
Custom css
The template has an option that allows you to add custom css code to easily change the styling of any element of the template without modifying the core template css files.
In the css folder of the template create a file with name custom.css. In that file you can put your css code that will override the styling of the template. After saving your custom css code in the custom.css file you must go to template configuration page, check the "Custom css file" checkbox and save the setting so the template can use the custom.css file.
Custom javascript
The template has an option that allows you to add custom js code without modifying the core template files.
In the js folder of the template create a file with name custom.js. In that file you can put your javascript code. After saving your custom js code in the custom.js file you must go to template configuration page, check the "Custom js file" checkbox and save the setting so the template can use the custom.js file.
EU cookie notice
The template has a simple build-in option for displaying a notice about the use of cookies in you website that is mandatory in EU.
In order to enable the EU cookie law notice first create a Custom HTML module with your desired message for the visitors and publish it on position cookie.
After the creation of the module go to template configuration page, check the "EU cookie law" check box and save the settings.
Responsive content slider
The configuration of the content slider is very simple. Please follow the instructions below.
1. Login to Joomla! admin area.
2. Go to Extensions -> Template Manager. 3. Click on template name.
4. In "Content Slider" set the slider height to the height of your image banners i.e if your banner is 1170x400 pixels set it to 400, do not add px after the size number.
5. Also set the time in milliseconds (i.e. 1000 for 1 second) so that the slider will wait before displaying the next image.
6. Now create Custom HTML modules with the content you want to display in the slider and publish them in slide position.
NOTICE
It is important to use the right size images for your slides to have a nice looking slider, please follow the instructions below:
1. Always use exactly the same size images for your slides. If you have set the template width to "Box" make sure your images have 1170px width and of course the same height to avoid the "jumping" issue while the slider adjusts to the new image height. If you have set the template width to "Full Width" use images with width 1920px to make sure that the slide will cover the whole screen width on large screens.
2. Make sure that you have compressed your images before using them for the slides so it wont slow your page load. For jpeg images use 75-85% compression,
my favorite tool for compressing jpeg images is Image Tunner , for png files nothing beats TinyPNG online tool, unbelievable compression without affecting quality.
Social sharing buttons
To display the social sharing buttons in product pages you have to check the "AddThis social buttons" check box in template configuration page under "Virtuemart settings".
Product SKU
To display the product sku in product page and category page (if supported by the template) you must check the "Product SKU" check box in template configuration page under "Virtuemart Settings".
Google analytics code
To set up the Google analytics code first login to your Google analytics account and click the "Admin" link on the horizontal menu, in "PROPERTY" section click "Tracking Info" and then "Tracking code".
Copy the tracking code and go to template configuration page, paste the code in the "Google Analytics" text area under "Seo Settings" and save the settings.
Category List , Grid layout
In order to change the category layout to list for all categories go to VirtueMart
configuration -> select Templates Tab, change the value of "Default number of products
in a row" to 1 and save the new settings.
If you would like to change the layout to list only for a specific category, you must go to "Product Categories", select the category, change the value of "Number of Products
Webmaster Tools
The template can generate the necessary meta tags for Bing and Google Webmasters owner verification after you enter your verification id in the following input fields in template configuration page under "Seo settings" :
To find your owner verification ID, go to verification options of webmasters tools in HTML tag option. The ID is the alphanumeric text without the double quotes in the content attribute of the tag:
