The following documentation explains the installation and configuration steps of the VP Neoteric Joomla Template.
Installation
In the download section of VP Neoteric you will find following two ZIP packages:
Template Package
This is a standard Joomla! Extension Package which includes the following items.
- VP Neoteric Template
- System - VP Prime Framework Plugin
- Essentials for VirtueMart Component Package (Essentials for VirtueMart User Guide)
- VP Prime Ajax Product Search Module (VP Prime Ajax Product Search User Guide)
- VP Prime Manufacturer Carousel Module (VP Prime Manufacturer Carousel User Guide)
- VP Prime Mega Menu Module (VP Prime Mega Menu User Guide)
- VP Prime Offcanvas Menu Module (VP Prime Offcanvas Menu User Guide)
- VP Prime Product Carousel Module (VP Prime Product Carousel User Guide)
- VP Prime Product List Module (VP Prime Product List User Guide)
- VP Prime Slider Module (VP Prime Slider User Guide)
- VP Prime VirtueMart Category Module (VP Prime VirtueMart Category Guide)
- VP Prime Mini Cart Module
Upload and Install
You can install the zipped package as it is, through Joomla Extension Installer and which will install all the above twelve (12) items together in your site making your life little easier. After the installation you can find the package as VP Neoteric Template - Package in Joomla! Extension Manager.
Log in to your site's administrator section. Click on System → Install → Extensions. Click on the Upload Package File tab. Drag and drop the installation ZIP file. Alternatively, click on the Browse for File button, locate the installation ZIP file and select it. After a short while, Joomla! will tell you that the package has been installed.
VP Neoteric Template - Package is a big extension (around 3MB). Some servers do not allow you to upload files that big. If this is the case you can try the Manual installation or increase upload_max_filesize to at least 4MB.
Manual installation
Sometimes Joomla! is unable to properly extract ZIP archives due to technical limitations on your server. In this case, you can follow a manual installation procedure.
Before doing anything else, you have to extract the installation ZIP file in a subdirectory named akeeba on your local PC. Then, upload the entire subdirectory inside your site's temporary directory. At this point, there should be a subdirectory named virtueplanet inside your site's temporary directory which contains all of the ZIP package's files.
If you are unsure where your site's temporary directory is located, you can look it up by going to the Global Configuration, click on the Server tab and take a look at the Path to Temp-folder setting. The default setting is the tmp directory under your site's root. Rarely, especially on automated installations using Fantastico, this might have been assigned the system-wide /tmp directory. In this case, please consult your host for instructions on how to upload files inside this directory, or about changing your Joomla! temporary directory back to the default location and making it writable.
Assuming that you are past this uploading step, click on Extensions, Manage link on the top menu. Click on the Install from Directory tab. Locate the Install Directory edit box. It is already filled in with the absolute path to your temporary directory, for example /var/www/joomla/tmp. Please append /virtueplanet to it. In our example, it should look something like /var/www/joomla/tmp/virtueplanet. Then, click on the Install button.
Quick Start Package
This is the Quick Start package of the template and installing this will give you an exact clone of the demo site.
How to Install Quick Start Package?
A Quick Start package is a complete Joomla Installation package which includes Joomla, VirtueMart and all Demo contents. You do not need to install Joomla separately for this. The installation process of a quick start package is exactly same as standard Joomla! Installation process as you can see here: docs.joomla.org/J4.x:Installing_Joomla
Quick Start Package Installation Process:
- Download the quick start package from the download section of our site.
- Upload this zipped file to the public_html of your site i.e the root folder of your site using FTP or file manager in your hosting account cPanel.
- Extract this zip file using the extract button in your root folder.
- Go to phpMyAdmin in cPanel and create a database taking note of the username, password and name of the database.
- Open your favourite browser type your domain and the normal Joomla installation process will start. Follow all the steps and when you come to the database site fill in the database details you created in step 4.
Uninstall
After the installation you can find the package as VP Neoteric Template - Package in Joomla! Extension Manager. In case you need to uninstall the template, you need to select this package in Extension Manager and hit uninstall button. This will uninstall all the above twelve extensions including the template at one go.
Quick Setup
If you have just installed the Template Package on your site, follow the below steps to set up the template on your site quickly.
- Go to "Site Template Styles" and set "VP Neoeric" as the default template.
- Go to VP Neotric template settings and add the Logo image files under the General tab.
- Go to the "Site Modules" section and publish the following at the said module positions after configuring them as per requirement.
- Publish the "VP Prime Ajax Product Search" module at the "search" module position.
- Publish the "Essentials for VirtueMart - Wishlist" module at the "wishlist" module position.
- Publish the "Essentials for VirtueMart - Compare" module at the "compare" module position.
- Publish the "VP Prime Mini Cart" module at the "mini-cart" module position.
- Publish the "VP Prime Mega Menu" module at the "mega-menu" module position.Publish the "VP Prime VirtueMart Category" module at the "category-dropdown" module position. Remember to select the "Layout" as "Dropdown" under the Advanced tab.Publish the "VP Prime Slider" module at the "slider" module position in the home page menu item.
- Publish the "VP Prime Offcanvas Menu" module at the "offcanvas-menu" module position.Publish the "VP Prime VirtueMart Category" module at the "offcanvas-menu" module position. This time, select the "Layout" as "Default" under the Advanced tab.
- Publish the "VP Prime Manufacturer Carousel" module at the "bottom-slider" module position.
The rest of the modules can be published at any desired position per your requirements.
Configuration
General
Basic Options
Logo - General
Select the logo image for the site.
Logo - Tablet & Mobile
Select the logo image to be displayed in smaller devices like tablets & mobiles.
Title (alternative to logo)
Title of the website, alternative to logo.
Favicon
Select the favicon file. You can upload custom ICO file to the images folder located at the root of your site.
SVG Favicon
Select the SVG favicon file. You can upload custom SVG file to the images folder located at the root of your site.
Pinned Tab Icon
Select the SVG tab icon file. You can upload custom SVG file to the images folder located at the root of your site.
Pinned Tab Icon Color
The pinned tab icon color.
Meta Theme Color
The meta theme color.
Layout Styles
Container Width
Container width.
Show Scroll to Top Button
Show scroll to top button.
Header
Sticky Header
Sticky header.
Show Login/Register Link
Show login/register link.
Main Body
Left Module Grid Size
Grid size of the left side module position container for desktop view. Maintain your desired size between 1 to Full Width.
Right Module Grid Size
Grid size of the right side module position container for desktop view. Maintain your desired size between 1 to Full Width.
Content Area Grid Size
Grid size of main content area in desktop view. Auto calculated based on Left and Right Module Position Grid Size.
Left Module Position in Smaller Devices
Select where the left module position to be displayed in smaller devices. The options are "Above content area" and "Below content area".
Full Width Views
Select the views for which you want to disable the left and right module positions.
Full Width Menu Items
Select the menu items for which you want to disable the left and right module positions.
Fonts
Lazy Load FontAwesome Fonts
Select yes to lazy load the Fontawesome icon fonts library.
Lazy Load Default Icon Fonts
Select yes to lazy load the default template icon fonts.
Text Font
Select the desired font for the website. Default is Roboto (local). Alternatively, you can select Google (web) to load any of your desired Google Fonts.
Lazy Load Google Fonts
Select yes to lazy load Google fonts.
Google - General Font
Google Font Name
Select the font which you want use as the main font for the site.
Google Font Style
Select the font style which you want use as the main font style for the site.
Google Additional Font Styles
Select the additional font styles that you want to be loaded.
Google - Headings Font
Google Font Name
Select the font which you want use as the main font for the headings.
Google Font Style
Select the font style which you want use as the main font style for the headings.
Cookie Consent
Show Cookie Consent
Select yes to show cookie consent.
Cookie Consent Position
Select the desired position for the cookie consent message.
Cookie Policy Article
Select the cookie policy article.
Cookie Consent Tenure (days)
Set the desired cookie consent tenure in days. Default is thirty (30) days.
VirtueMart
General
General Options
Displayed Price Type
Select the displayed product price type.
Lazy Loading Images
Select yes to lazy load images.
Rating Star Color
Choose the rating star color.
Manufacturer Link Target
Select the manufacturer link target. The options are "Manufacturer - Details Page" and "Manufacturer - Product Listing".
Show SKU
Select yes to show Product SKU.
Show MPN
Select yes to show Product MPN.
Show GTIN
Select yes to show products GTIN.
Show Social Share Options
Select yes to show the product social share icons.
Maximum Related Products in Ajax Add to Cart Popup
Set the maximum number of related products to be shown in the ajax add to cart popup.
Categories and Manufacturers per Row
Large Devices
Items per row for large devices like modern Desktops. Default is 'Global' which takes the items per row value configured in VirtueMart. If you set anything different it will overwrite them.
Medium Devices
Items per row for medium size devices like older desktops and laptops.
Small Devices
Items per row for small devices like tablets.
Extra Small Devices
Items per row for extra small devices like phones.
Custom Fields
Display as Buttons
Select the custom fields that you want to display as buttons.
Map Field Colors
The template allows you to show custom color background for String, Multivariant and Generic Child Variant types custom field values. You can map colors for the custom field values here. Please remember that the custom field values are case sensitive.
Product Labels
New Label
Show New Label
Set yes to show the new label.
New Label Tenure (days)
Set the number of days the new label will be displayed from the product availability date. You must add availability date to your products to show the new label.
New Label Text
The new label text. You can also add custom language string for multilingual sites.
New Label Background
The new label background color.
New Label Text Color
The new label text color.
Out of Stock Label
Show Out of Stock Label
Select yes to show out of stock label.
Out of Stock Label Text
The out of stock label text. You can also add custom language string for multilingual sites.
Out of Stock Label Background
The out of stock label background color.
Out of Stock Label Text Color
The out of stock label text color.
Discontinued Label
Show Discontinued Label
Select yes to show discontinued label.
Discontinued Label Text
The discontinued label text. You can also add custom language string for multilingual sites.
Discontinued Label Background
The discontinued label background color.
Discontinued Label Text Color
The discontinued label text color.
Discounted Label
Show Discounted Label
Select yes to show discounted label.
Discounted Label Text
The discounted label text. You can also add custom language string for multilingual sites.
Discounted Label Background
The discounted label background color.
Discounted Label Text Color
The discounted label text color.
Featured Label
Show Featured Label
Select yes to show featured products label.
Featured Label Text
The featured products label text. You can also add custom language string for multilingual sites.
Featured Label Background
The featured label background color.
Featured Label Text Color
The featured label text color.
Product Listing
General Options
Normalize Product List
Select yes to normalize product list. If enabled, the template will only display standard product list and do not show featured products, latest products etc separately in the category pages.
Show View Mode Switch
Select yes to show view mode switch.
Show All Price Details
Select yes to show all price details as enabled in VirtueMart Configuration.
Mouse-over Image Slider
Select yes to enable mouse-over image slider.
Show Categories
Select yes to show categories.
Show Rating
Select yes to show rating.
Show Short Description in Grid Mode
Select yes to show product short description in grid mode.
Show Add to Cart
Select yes to show add to cart option in product listings.
Show Quantity Selector
Select yes to show quantity selector.
Products Per Row
Large Devices
Products per row for large devices like modern Desktops. Default is 'Global' which takes the items per row value configured in VirtueMart. If you set anything different it will overwrite them.
Medium Devices
Products per row for medium size devices like older desktops and laptops.
Small Devices
Products per row for small devices like tablets.
Extra Small Devices
Products per row for extra small devices like phones.
Product Details Page
Show Modal Manufactuer Information
Select yes to show manufactuer information in a modal window.
Show All Price Details
Select yes to show all price types on the product details page as enabled in VirtueMart Configuration.
Mouse Over Image Zoom Lens
Select yes to enable mouse over image zoom lens.
Zoom Factor
Set the desired zoom factor for mouse over zoom.
Customization
Global
Body Background Color
The body background color.
Body Text Color
The body text color.
Background Hue
The background hue color.
Text Color Hue
The text color hue.
Primary Color
The primary color.
Primary Contrast Color
The primary contrast color.
Primary Hover Color
The primary hover color.
Primary Hover Contrast Color
The primary hover contrast color.
Secondary Color
The secondary color.
Link Color
The link color.
Link Hover Color
The link hover color.
Top Bar
Top Bar Background
The top bar background color.
Top Bar Text Color
The top bar text color.
Top Bar Border Color
The top bar border color.
Header
Header Background
The header background color.
Header Text Color
The header text color.
Breadcrumbs
Breadcrumbs Background
The breadcrumbs background color.
Breadcrumbs Border Color
The breadcrumbs border color.
Breadcrumbs Color
The breadcrumbs color.
Breadcrumbs Link Color
The breadcrumbs link color.
Breadcrumbs Link Hover Color
The breadcrumbs link hover color.
Breadcrumbs Item Separator Color
The breadcrumbs item separator color.
Main Content Area
Main Content Background
The main content background color.
Utility Wide Section
Utility Wide Background
The utility wide background color.
Utility Wide Border Top Color
The utility wide border top color.
Utility Wide Border Bottom Color
The utility wide border bottom color.
Utility Vertical Section
Utility Vertical Background
The utility vertical background color.
Utility Vertical Border Top Color
The utility vertical border top color.
Utility Vertical Border Bottom Color
The utility vertical border bottom color.
Utility Horizontal Section
Utility Horizontal Background
The utility horizontal background color.
Utility Horizontal Border Top Color
The utility horizontal border top color.
Utility Horizontal Border Bottom Color
The utility horizontal border bottom color.
Bottom Slider Section
Bottom Slider Background
The bottom slider background color.
Bottom Slider Border Top Color
The bottom slider border top color.
Bottom Slider Border Bottom Color
The bottom slider border bottom color.
Bottom Section
Bottom Section Background
The bottom section background color.
Bottom Section Border Top Color
The bottom section border top color.
Bottom Section Border Bottom Color
The bottom section border bottom color.
Bottom Section Module Title Color
The bottom section module title color.
Bottom Section Text Color
The bottom section text color.
Bottom Section Link Color
The bottom section link color.
Bottom Section Link Hover Color
The bottom section link hover color.
Footer Area
Footer Area Background
The footer area background color.
Footer Area Border Top Color
The footer area border top color.
Footer Area Text Color
The footer area text color.
Footer Area Link Color
The footer area link color.
Footer Area Link Hover Color
The footer area link hover color.
Mega Menu
Mega Menu Background
The mega menu background color.
Mega Menu Border Color
The mega menu border color.
Mega Menu Item Font Weight
Mega menu item font weight.
Mega Menu Item Color
The mega menu item color.
Mega Menu Item Hover Color
The mega menu item hover color.
Mega Menu Item Active Color
The mega menu item active color.
Mega Menu Item Caret Color
The mega menu item caret color.
Mega Menu Dropdown Background
The mega menu dropdown background color.
Mega Menu Dropdown Item Color
The mega menu dropdown item color.
Mega Menu Dropdown Item Hover Color
The mega menu dropdown item hover color.
Mega Menu Dropdown Item Active Color
The mega menu dropdown item active color.
Mega Menu Dropdown Group Title Font Weight
Mega menu dropdown group title font weight.
Mega Menu Dropdown Group Title Color
The mega menu dropdown group title color.
Mega Menu Dropdown Group Title Hover Color
The mega menu dropdown group title hover color.
Mega Menu Dropdown Group Title Active Color
The mega menu dropdown group title active color.
Offcanvas
Offcanvas Header Background
The offcanvas header background color.
Offcanvas Header Text Color
The offcanvas header text color.
Offcanvas Menu
Offcanvas Menu Item Background
The offcanvas menu item background color.
Offcanvas Menu Item Color
The offcanvas menu item color.
Offcanvas Menu Item Border Color
The offcanvas menu item border color.
Offcanvas Menu Item Hover Background
The offcanvas menu item hover background color.
Offcanvas Menu Item Hover Color
The offcanvas menu item hover color.
Offcanvas Menu Item Active Background
The offcanvas menu item active background color.
Offcanvas Menu Item Active Color
The offcanvas menu item active color.
Offcanvas Menu Item Opened Background
The offcanvas menu item opened background color.
Offcanvas Menu Item Opened Color
The offcanvas menu item opened color.
Offcanvas Menu Item Opener Background
The offcanvas menu item opener background color.
Offcanvas Menu Item Opener Color
The offcanvas menu item opener color.
Offcanvas Menu Item Opener Border Color
The offcanvas menu item opener border color.
Offcanvas Menu Item Opener Background
The offcanvas menu item opener background color.
Offcanvas Menu Item Opener Color
The offcanvas menu item opener color.
Offcanvas Menu Item Opener Border Color
The offcanvas menu item opener border color.
VirtueMart Category Menu
VM Category Menu Item Background
The VirtueMart category menu item background color.
VM Category Menu Item Color
The VirtueMart category menu item color.
VM Category Menu Item Border Color
The VirtueMart category menu item border color.
VM Category Menu Item Hover Background
The VirtueMart category menu item hover background color.
VM Category Menu Item Hover Color
The VirtueMart category menu item hover color.
VM Category Menu Item Active Background
The VirtueMart category menu item active background color.
VM Category Menu Item Active Color
The VirtueMart category menu item active color.
VM Category Menu Item Opened Background
The VirtueMart category menu item opened background color.
VM Category Menu Item Opened Color
The VirtueMart category menu item opened color.
VM Category Menu Item Opener Background
The VirtueMart category menu item opener background color.
VM Category Menu Item Opener Color
The VirtueMart category menu item opener color.
VM Category Menu Item Opener Border Color
The VirtueMart category menu item opener border color.
VM Category Menu Item Opener Background
The VirtueMart category menu item opener background color.
VM Category Menu Item Opener Color
The VirtueMart category menu item opener color.
VM Category Menu Item Opener Border Color
The VirtueMart category menu item opener border color.
VirtueMart Category Dropdown Menu
Mega Menu Dropdown Group Title Font Weight
Mega menu dropdown group title font weight.
VM Category Dropdown Header Background
The VirtueMart category dropdown header background color.
VM Category Dropdown Header Color
The VirtueMart category dropdown header color.
VM Category Dropdown Header Border Color
The VirtueMart category dropdown header border color.
VM Category Dropdown Background
The VirtueMart category dropdown background color.
VM Category Dropdown Border Color
The VirtueMart category dropdown border color.
VM Category Dropdown Item Background
The VirtueMart category dropdown item background color.
VM Category Dropdown Item Color
The VirtueMart category dropdown item color.
VM Category Dropdown Item Border Color
The VirtueMart category dropdown item border color.
VM Category Dropdown Item Hover Background
The VirtueMart category dropdown item hover background color.
VM Category Dropdown Item Hover Color
The VirtueMart category dropdown item hover color.
VM Category Dropdown Item Hover Border Color
The VirtueMart category dropdown item hover border color.
VM Category Dropdown Item Caret Color
The VirtueMart category dropdown item caret color.
VirtueMart
Product Price before Discount
Product price before discount.
Product Price Discount
Product price discount.
Icon Button Background
The icon button background color.
Icon Button Hover Background
The icon button hover background color.
Icon Button Color
The icon button color.
Icon Button Hover Color
The icon button hover color.
Cookie Consent
Cookie Consent Background
The cookie consent background color.
Cookie Consent Border Color
The cookie consent border color.
Cookie Consent Text Color
The cookie consent text color.
Cookie Consent Link Color
The cookie consent link color.
Cookie Consent Link Hover Color
The cookie consent link hover color.
Custom Codes
Before </head>
Codes you place here will appear in the head section of every page of your site. This feature is useful when you need to add verification code, tracking codes etc. to all pages.
After <body>
Codes you place here will be appeared just after the opening body tag.
Before </body>
Codes you place here will appear at the bottom of the body section of all pages of your site. This feature is useful if you need to input a tracking code for a state counter such as Google Analytics 4 or Google Ads.
Custom CSS
You can use custom CSS to add your styles or overwrite default CSS of a template or extension. This option is useful for small changes in the stylesheets. For more extensive changes we suggest to use a custom CSS file.
Custom Javascript
You can add custom JavaScript code. It loads your custom Javascript after all other JavaScript, allowing you to be the last one which will affect your website.
Module Options
VP Prime Framework adds two new tabs to all module settings page to offer you a few unique features. These features are explained below.
VP Prime - Extra Options
Sub-title
The sub-title of the module. Sub-title is displayed below the module title.
Header Icon Class
You can use Font Awesome 5 Free icon classes.
Header Badge Text
Enter your desired texts for the badge.
Badge Background Color
The badge background color.
Badge Text Color
The badge text color.
VP Prime - Scroll Reveal
Enable Scroll Reveal
If yes, the module will be displayed when it comes within the view-port on scroll.
Origin
Original position from where the module to be revealed.
Distance
It can be any valid CSS distance. Example - 10px, 2em, 5rem, 10%, 20vw etc.
Duration
Enter the duration of the animation in milliseconds.
Delay
Enter the delay of the animation in milliseconds.
Starting Opacity
Starting opacity value, before transitioning to the computed opacity.
Starting Scale
Starting scale value, will transition from this value to 1.
Transition Style
Select the desired CSS transition style (easing).
Mobile
If yes, scroll reveal animations also work on mobile.
Reset
If yes, reveals occur every time elements become visible. If no, reveals occur once as elements become visible.
Use Delay
If always, delay for all reveal animations. If once, delay only the first time reveals occur. If onload, delay only for animations triggered by first load.
View Factor
The factor when an element is considered in the viewport. The default value of 0.20 means 20% of an element must be visible for its reveal to occur.
Advanced Customization
Layout Customization
It would best not to change any of the original files of the template as they will be overwritten by future updates. If you want to make more substantial changes to template appearance you can create a child template. That copies just a small selection of folders and files for you to change or add to but otherwise continues to use the parent template folders and files. VP Neoteric template supports the standard Joomla! Child Template features.
Custom CSS Files
The template allows you to add unlimited custom CSS files to the template. Place your custom CSS files to media/templates/site/vp_neoteric/css/custom folder and it will be automatically loaded to the site. It dynamically adds version stamp to the files to avoid browser caching when the file is modified.
Custom JS Files
The template allows you to add unlimited custom JavaScript (JS) files to the template. Place your custom JS files to media/templates/site/vp_neoteric/js/custom folder and it will be automatically loaded to the site. It dynamically adds version stamp to the files to avoid browser caching when the file is modified.