Hera - Documentation

Here you can find detailed information about the installation, configuration and special features of Hera VirtueMart template. Use the menu on the left side to quickly navigate to the documentation's main sections.

Template installation

To install the template :

  1. Login to Joomla administration area.

    Joomla administration login page.

  2. Go to "Extensions -> Extension Manager".

    Joomla 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.

    Upload & install extension.

  4. Go to "Extensions -> Template Manager" and set the template as default.

    Joomla template manager.

    Set template as default.

Updating the template

FIRST BACKUP YOUR TEMPLATE FILES

The update process is simple, you just reinstall the new version over the existing and after that replace the favicon with your own. The installation will not overwrite the custom.css and custom.js files so your code changes will remain intact.

In case you had modified any template files, you will have to replace the new files with the modified or redo the modification to the new files.

Quick start package installation

To install the quick start package follow these steps:

  1. Upload the hera_j3_vm3_QS.zip to your server's www root folder (public_html on Cpanel servers).

    Cpanel public_html folder.

  2. Extract the file.
  3. Open your favorite browser and type your domain name.
  4. The quick start installation page will appear.

    The quick start package installer.

Before installing on a live server you should first create a database and a database user because the installer will ask for this information.

To set up the template logo you must create a Custom HTML module and publish it on the "logo" module position:

  1. Enter a title for the module.
  2. Insert your logo in the editor text area.
  3. Set position to "Logo".
  4. Set "Status" to "Published".
  5. Click the "Save & Close" button.

The Joomla custom HTML module editing screen.

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".

The module caching must be disabled or else the mobile menu will not displayThe Joomla! menu module editing screen.

Template styles

The Hera template has 7 color 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.

Screenshot demostrating the selection of a color style.

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.

A screenshot demonstrating the selection of template width.

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.

A screenshot demostrating the selection of fonts for the body and headings.

Disabling sticky menu

By default the main menu of the template has a sticky behavior and follow you while scrolling down the page. If you need to disable it, select the "Template Settings" tab on the template configuration page, check the "Sticky menu off" checkbox and save.

Screenshot of the template settings tab.

Content slider

  1. 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.

    Content slider options.

  2. Also set the time in milliseconds (i.e. 1000 for 1 second) so that the slider will wait before displaying the next image.
  3. Now create Custom HTML modules with the content you want to display in the slider and publish them in slide position.

    Custom HTML editing screen.

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 they wont slow your page load. My favorite tool for compressing jpeg images is Kraken.io , for png files you can also try TinyPNG online tool.

Body background 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.

Use this tool to find the hex value of colors if you don't know it.

Set background color

Template background image

The template has an option to set a custom background image. By deafult the background image will be centered, fixed and it will cover the full screen. There is also an option to repeat the image, see the image below.

  1. Go to template configuration page and click the "Select" button at the "Background image" option.
  2. 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.
  3. After selecting or uploading the desired image, save the new settings.
Set background image

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 tinypng.com service to drastically reduce the size without losing quality.

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.

Use this tool to find the hex value of colors if you don't know it.

Change content background

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.

A screenshot demonstrating how to set color for the links.

Use this tool to find the hex value of colors if you don't know it.

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 and name it custom.css . In this 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.

The custom css file is not overwritten by the template updates.

Custom css code

Since Hera version 3.5.0 (2.8.0 for J2.5) the option has moved to the "Custom code" tab.

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 you will find a file named 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.

The custom.js file is not overwritten by the template updates.

custom javascript

Since Hera version 3.5.0 (2.8.0 for J2.5) the option has moved to the Customization settings tab.

Module positions

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
  3. At "Advanced options" of the module select "welcome" layout

    Joomla! login module.

Stacked modules

Since version 3.1.0 the template has options for certain module positions to display the published modules as stacked (full width) instead of floating.

Module positions that support stacked display

  • top-a
  • top-b
  • top-c
  • bottom-a
  • bottom-b
  • bottom-c

Screenshot of the Module settings tab.

Disabling module positions

The template has the option to disable the display of certain module positions on mobile devices (smartphones & tablets). The advanced mobile detection feature can detect if the visitor is using a mobile device and depending on your settings does not load the module positions for faster page load.

All you have to do is check and save the module positions you dont want to display ("Mobile Settings" tab on the template configuration page).

Screenshot of the Mobile Settings tab in the template configuration page.

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.

Screenshot of the template manager.

Hide add to cart button

If you need to hide the "Add to cart" button on the categories pages and the VirtueMart front page there is an option in the "VirtueMart Settings" tab on the template configuration page.

Screenshot of the VirtueMart settings tab.

Quantity buttons

By default the quantity buttons are not displayed on the categories pages and product modules.

To enable them select the "VirtueMart Settings" tab on the template configuration page, check the "Quantity buttons" checkbox and save.

Screenshot of the VirtueMart settings tab.

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.

VirtueMart configuration, shopfront settings screenshot.

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 per Row" to 1 and save the new settings.

Screenshot of VirtueMart category edit page.

Disable image zoom

If you need to disable the product image zoom effect on the product page, the template has an option for this in the "VirtueMart Settings" tab on the template configuration page.

Screenshot of the VirtueMart settings tab.

Disable lazy load

To disable the lazy loading of product images in categories, products module and the VirtueMart front page just check the "Disable lazy load" option in the "VirtueMart Settings" tab on the template configuration page.

Screenshot of the VirtueMart settings tab.

Discount as percentage

The template has an option to display the discount as percentage.

Select the "VirtueMart Settings" tab on the template configuration page, check the "Discount as percentage" checkbox and save.

Screenshot of the VirtueMart settings tab.

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.

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

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.

product badges

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!

If you need to translate the text to your language, copy the en-GB.tpl_hera_j3_vm3.ini in your language folder, rename it and edit the file.

Example for Greek language

  1. Copy the original file to "language\el-GR" folder of Joomla installation, rename the file to el-GR.tpl_hera_j3_vm3.ini.

    Screenshot of Joomla! language folders.

  2. Edit the text fields, for instance TPL_VM_NEW="New" to TPL_VM_NEW="Νέο" .

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".

Display product sku

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".

Addthis sharing buttons

Stock level

The template has an option to display the stock level of the product instead of the "In stock" or "No stock" text.

Select the "VirtueMart Settings" tab on the template configuration page and check the "Stock level" checkbox and save.

Screenshot of the VirtueMart settings tab.

Credit card icons

The template includes a set of credit card icon and also the option to upload and use your own icons, images

To display the credit card icons go to template configuration page and select the "Credit Card Icons" tab. From there you can either select the build in icons or upload your own.

Screenshot of the Credit Cards tab in the template configuration page.

The icons, images will display always on a reserved position at the bottom right part of the template.

Screenshot of the Credit Cards template position.

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.

Cookie law notice setup

Also make sure that you assigned the module to display on all pages.

Assign module on all pages

After the creation of the module go to template configuration page, check the "EU cookie law" check box and save the settings.

Screenshoot of template settings page.

Social media

The template has two main social media features, the sliding fan box and the social media icons. The options for both are in the "Social Media Settings" tab on the template configuration page. Screenshot of the Social Media Settings tab in the template configuration page.

Screenshot of the Social Media Settings tab in the template configuration page.

The social media icons are displayed in a reserved template position in the center of the toolbar section. Screenshot of the toolbar section of the template.

Screenshot of the toolbar section of the template.

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".

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.

Google Analytics area

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" :

Screenshot of the Seo settings tab on the template configuration page.

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 :

Google verification id