ZT Melano Shop Guide

1. Introduction

Version 1.0.6 released May 13, 2015 & Upgrade to ZO2 Framework v1.4.7

Zootemplate now has ZT Melano Shop- the first powerful Joomla Template with the extended styles for many popular extensions: EasyBlog, ZT Shortcodes, Virtuemart, ZT Layer Slider.

We want to give a huge thank you for purchasing this Joomla Template. We greatly appreciate your feedback from you on how, if anywhere, you would like this documentation imporved. If you have any further question, please kindly contact to us via our Helpdesk.

2. Help & Support

2. 1. References

You may find these sites useful while installing and configuring your Joomla site!:

2. 1. 1. Joomla installation

2. 1. 2. Joomla help

Online Joomla guide

There are many tutorials, acticles and forums to help you learn how to use this Joomla template and its features. This section provides helpful links to instructions on commonly used this Joomla template features, but you can learn even more by exploring these resources:

All of our items come with free support, and we have a dedicated support system to handle your requests. Support is limited to questions regarding the template’s features or problems with the template. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your template then you should enlist the help of a developer.

To submit a Ticket always remember:

  • Include as many information as possible to explain your issue.
  • Your URL.
  • Name of the Template.
  • Your Joomla version.
  • Screenshots (you can use this tool: http://pen.apl.vn)
  • If you installed extensions, specify which are these.

(We reserve the right to change or modify current Support Policy with no prior notice.)

2. 2. Zootemplate policy

ZooTemplate hereby grants you a revocable, non-transferable and non-exclusive license to use the web extensions and other products sold through our web site by ZooTemplate (the “products”) in accordance with these Terms of Use (the “license”) issued by ZooTemplate.

2. 2. 1. Limited Usage Granted

You have the right to use the ZooTemplate extensions on as many concurrent sites as your entitlements provide for. After your membership expires, you may continue to use the extensions your entitlements allow for, so the extensions are not time-limited. The Developer level clubs grants unlimited implementations of ZooTemplate extensions as long as the usage complies with the rest of the Terms & Conditions.

2. 2. 2. Ownership

You may not claim intellectual or exclusive ownership to any of our products, modified or unmodified. All products are property of ZooTemplate.com. Our products are provided “as is” without warranty of any kind, either expressed or implied. In no event shall our juridical person be liable for any damages including, but not limited to, direct, indirect, special, incidental or consequential damages or other losses arising out of the use of or inability to use our products.

2. 2. 3. Refund Policy

Since ZooTemplate is offering non-tangible irrevocable goods we can offer direct refunds if your account has not been logged-into yet. In this case the refund will be provided without any question. ZooTemplate also will offer a full or partial refund within 15 (fifteen) business days starting from the moment when the member make the payment. In this case ZooTemplate has the right to ask questions for the refund and also we have the right to NOT offer the refund if we see reasonable. The above notice, also, applies to the license fee and all our Sign Up Plans. Please Contact Us if you need further information.

2. 2. 4. Delivery

After we have successfully received your payment, your membership information will be emailed to the address that you have provided during the sign up process. It normally happened within minutes. If you do not receive this information in 24 hours from you completed sign up process please contact us support(at)ZooTemplate(dot)com. With this information you can access the member area section to download our products and access our Forums.

2. 2. 5. Unauthorized Use

You may not place any non-GPL portions of our products, modified or unmodified, on a diskette, CD, website or any other medium and offer them for redistribution or resale of any kind without prior written consent from ZooTemplate. Please Contact Us if you require more clarification.

2. 2. 6. Modifications

You are authorized to make any necessary modification(s) to our products to fit your purposes. You may not however redistribute or release non-GPL portions of the templates as GPL or otherwise. You may not remove or change the ZooTemplate copyright information in the header of the xml descriptor file for all products. You may however remove our copyright from the footer of the templates if needed. No use of our trademarks is granted under this Agreement. Please read the FAQ section regarding this if you have further questions. Porting non-GPL portions of our templates to other platforms and content management systems and redistributing as GPL or otherwise is also strictly prohibited. Please Contact Us if you have any requirements that are not covered by these terms.

2. 2. 7. Warranty and Support

ZooTemplate offers these templates and designs ‘as is’, with no implied meaning that they will function exactly as you wish or with all 3rd party extensions/products. Further, we offer no support via email or otherwise for installation, customization, administration of Joomla!CMS itself. Private customer forums are available at our Forums. ZooTemplate.com does not commit to monitor these forums, but we reserve the right to respond and answer questions. ZooTemplate does not warranty or guarantee these templates in any manner. We cannot guarantee they will function with all 3rd party extensions/products or web browsers. Browser compatibility should be tested against the demonstration templates on the demo server. Please ensure that the browsers you use will work with the templates as we can not guarantee that ZooTemplate templates will work with all browser combinations.

More infomation please refer to http://www.zootemplate.com/legal/terms-of-use.

2. 3. Third-party extensions

This template may not be compatible with some third-party extensions. It’s impossible for Joomla template authors to make the template compatible by default with all existing extensions because there are thousands of available Joomla extensions. Only the “default” Joomla default is compatible with all third-party extensions, because all extensions are designed to work with it. But authors of the extension should provide detailed instruction about how to integrate the extension with custom templates, since nobody really uses “default” Joomla template, everybody uses custom template.

Generally all extensions can work with all templates but they sometimes have to be integrated manually. The same applies for third party scripts or extensions you may add that can cause conflicts with our Joomla template. In such cases you need to customize the template and merge two conflicting template files into one template file.

2. 3. 1. Support

Unfortunately third-party extensions are beyond the scope of our support, please contact the author of the extension if needed. Author of the extension should provide detailed instructions about how to integrate the extension with any custom Joomla template.

3. Installation

There are 2 methods of installing the ZT Melano:

3. 1. Quickstart installation

If you’ve just started building your Joomla site from the scratch, we recommend following Quick start guide to install the entire site comes with sample data.

3. 2. Separate Template Installation

To install ZT Melano you only need to take a few quick steps:

3. 2. 1. Package Browser

  • In Joomla administration go to menu Extensions > Extension Manager > then select Browse button and localte ZT Melano files.

3. 2. 2. ZT Melano Installation

You have 2 options A or B to install the ZT Melano:

  • A. Option 1:

    Step 1: Install plg_system_zo2_vX.Y.Z.zip. After that click on button Upload &Install.

    Step 2. Install template_zo2_melano_vX.Y.Z.zip. After that click on button Upload &Install.

Note: X.Y.Z is template/extension version you have

  • B. Option 2:

    Install package_zo2_melano_shop_j3.x_vX.Y.Z.zip. After that click on button Upload &Install.


3. 2. 3. ZT Melano Activation

  • Go to Back-end > Extensions > Plugin Manager > Use the Filter to search for Zo2 Framework and enable it.


  • Once ZT Melano Shop is installed in your Joomla site, you need to make it default for your website so your pages get the new design. Please go toExtensions > Template Manager > Zo2_melano – Default > Click on the star icon next to it.


4. Extensions Configuration

4. 1. Extension Installation

In ZT Melano Shop, we use:

  • ZT Slideshow
  • Virtuemart
  • ZT Virtuemarter (including ZT Comparelist, ZT Wishlist, Best Seller and Latest Products)
  • ZT Shortcodes
  • ZT Language Switcher

4. 2. Module Configuration

4. 2. 1. Virtuemart

Version: *Virtuemart version 3.0.9

VirtueMart is a highly configurable and customizable multi-language shopping cart solution for Joomla 2.5 and 3 with a large number of additional extensions.


A more detailed instruction about how to edit and configure Virtuemart can be found in Virtuemart Extension Configuration Manual

4. 2. 2. ZT Virtuemarter

ZT Virtuemarter is a combo Joomla package was made for Virtuemart extension., developed by a group of enthusiastics programmers and developers of Zootemplate.com.

4. 2. 2. 1. ZT Comparelist


  • Position: zt-top-menu
  • Type:Zt Comparelist
  • Access: Public
  • Show title: Hide
  • Pages: All

4. 2. 2. 2. ZT Wishlist


Position: zt-top-menu

  • Type: Zt Wishlist
  • Access: Public
  • Show title: Hide
  • Pages: All

4. 2. 2. 3. Latest Products


  • Position: zt-latest-products
  • Type: Ztvirtuemarter Product
  • Access: Public
  • Show title: Show
  • Pages: Home

Now, you reach the Module section the configure the module. Follow the photo below:


4. 2. 2. 4. Bestseller products


  • Position: zt-best-seller
  • Type: Ztvirtuemarter Product
  • Access: Public
  • Show title: Show
  • Pages: Shop

Now, you reach the Module section the configure the module. Follow the photo below:


4. 2. 3. ZT Layer Slider


  • Position: slide
  • Type: Zt – Slideshow
  • Access: Public
  • Show title: Hide
  • Pages: Home

ZT Slideshow allows you to easily create the sliders with multiple cool effects. With this module, you can now add a custom Slider to any or every page on your website. Equally, you can also add as many slider as you like.

A more detailed instruction about how to edit and configure ZT Slideshow can be found in ZT Slideshow Configuration Manual.

4. 2. 4. ZT Shortcodes

A good new for you, All new Joomla templates with Zo2Framework now comes with 25 built-in shortcodes (e.g. tabs, gallery, video, google map etc.) that users can attach. With this new Joomla extension, you can have an extensive collection of powerful ecommerce features that benefits all from shop owners, developers, to customers:tach to certain pages by adding the corresponding macro codes into articles or even modules. But we went a step further than the competition, we created ZT Shortcode Generator plugin for Joomla 3.x. This is a free plugin for adding & displaying Zo2 shortcodes on your website.


A more detailed instruction about how to edit and configure ZT Shortcode can be found in ZT Shortcode Configuration Manual.

4. 2. 5. ZT Language Switcher


  • Position: zt-language
  • Type: Zt – Language Switcher
  • Access: Public
  • Show title: Hide
  • Pages: All

ZT Language Switcher is a lightweight but powerful Joomla extension, developed by a group of enthusiastics programmers and developers of Zootemplate.com. We thought the standard Joomla language switcher could use a small face lift and we created a simple module, which can help you to set up and run within seconds. Our ZT Language Switcher shows the language flags in a nice elegant dropdown.

A more detailed instruction about how to edit and configure ZT Language Switcher found in ZT Language Switcher Module Configuration Manual.

4. 2. 6. Module Configuration

We use many custom HTML modules in our ZT Colias demo for layout and concept. You can replace the content of the same to your taste or replace them with other modules. Just need to insert your new content into the shortcodes by clicking the “ZT Shortcodes” button and choose of the element you would like to insert..

4. 2. 6. 1. ZT Welcome


  • Position: zt-welcome
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: All
4. 2. 6. 2. New Collection


  • Position: zt-new-collection
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: Home
4. 2. 6. 3. Sale Off


  • Position: zt-sale-off
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: Home
4. 2. 6. 4. Last Video


  • Position: zt-last-video
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: Home
4. 2. 6. 5. Paralax


  • Position: zt-paralax
  • Type: Custom HTML
  • Access: Public
  • Show title: Hide
  • Pages: Home
4. 2. 6. 6. Our brands


  • Position: zt-logo-brand
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: Home
4. 2. 6. 7. So whats The Fuzz


  • Position: zt-user-wrap1
  • Type: Custom HTML
  • Access: Public
  • Show title: Hide
  • Pages: Home
4. 2. 6. 8. Contact


  • Position: zt-position-1
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: All
4. 2. 6. 9. Tags


  • Position: zt-position-2
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: All
4. 2. 6. 10. Stay connected


  • Position: zt-position-3
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: All
4. 2. 6. 11. Latest News


  • Position: position-7
  • Type: Latest News
  • Access: Public
  • Show title: Show
  • Pages: Explore

Now, you reach the Module section the configure the module. Follow the photo below:


4. 2. 6. 12. Tag Widget


  • Position: position-7
  • Type: Popular Tags
  • Access: Public
  • Show title: Show
  • Pages: All

Now, you reach the Module section the configure the module. Follow the photo below:


4. 2. 6. 13. Recent Work


  • Position: position-7
  • Type: ZT Headline
  • Access: Public
  • Show title: Show
  • Pages: Explore

Now, you reach the Module section the configure the module. Follow the photo below:


4. 2. 6. 14. Flickr Widget


  • Position: position-7
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: Explore
4. 2. 6. 15. Newsletter


  • Position: zt-newsletter
  • Type: Custom HTML
  • Access: Public
  • Show title: Show
  • Pages: JBlog

4. 3. Module Class Suffix

Module Class Suffix is a parameter in Joomla! modules. This toturial will show you the easiest way to add and use Module Class Suffix to fine-tune the appearance of your site. The guide will be shown in Joomla! 3.4.1 and do the same with other Joomla versions.


*You can find all Module Class Suffix settings by following the guide about Module Class Suffix

5. Mega Menu


ZO2 Framework supports Mega Menu adding lots of advanced features. This Mega Menu is a perfect choice for creating unique menus. You can create a vertical, horizontal or fixed responsive menu with many custom styles and effects.

Please note that the megamenu setting is not global setting. If you use multiple styles, you need to enable and configure the megamenu option in the style you want to use the feature.

ZO2 Framework Mega Menu consists of 2 parts: Mega Menu Configuration and Mega Menu Edit

6. Layout Builders

Layout Builder is one of the unique features introduced in Zo2Framework which supports multiple layouts that allow you to make your content displayed flexibly. In the layout builder we used 12 columns. We called the columns as col. This means in our layout builder we used 12 cols. This 12 cols covered the whole width of our layout. If Users wants to create 4 columns then have to use col3 for every column. Also if anyone wants to create 3 columns then have use col4 for every column.


This part brings more functionalities and improvement user interface in managing template layouts, including:

  • Specify the number of modules to be placed within a module position.
  • Set the width for Column using bootstrap spanX classes (form col1 to col12)
  • Set any of the above options for either tablet/mobile or desktop mode through Column’s/Row’s Settings.
  • Change the name of each row, and also select any module to each column.

screenshot-localhost 2015-05-28 15-01-15

*You can find all Layout builder settings by following the guide about Layout Builder

7. Profiles

A profile is a custom set of theme settings which can define the style, content and layout of your site. The default profile defines the default settings for the entire website. You can create new profiles and use them to any different theme. This allows you to load different theme settings on different pages.

New profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. One example where we use the profiles are the different theme variations we deliver with each theme. Also special module layout behavior is done using profiles.

Now, in your Joomla backend, select Extensions > Template manager > zo2_hallo - Default to get started with new Profile function of Zo2 Framework. “Profile” tab is underneath the Menu Bar of Zo2 settings


7. 1. The default Profile

In the general theme settings you find a parameter called Default Profile. Here you choose the profile which will be loaded on all your pages. By default it is set to the profile called default. Each theme has a default profile and it can not be deleted. If you want to load another newly created profile as default for all your pages you can select it here. Zo2 will load your new profile automatically.


7. 2. Step 1: Create a new profile

New profiles can be created in the profile theme settings by clicking the Save As button which is available right next to the “profile dropdown” list”.


The first time you click the button, a window will appear allowing you to create a new profile.

  • Now just need to enter a name for your new profile and “Save” it.


Below you can see all settings you can control and override with your new profile. By default all values are inherited by the default profile.


7. 3. Step 2: Create different layouts for new profile

As said before, new profiles inherit all settings from the default profile, so you just need to apply the settings you want to change. Now of course this is right for Layout Builder settings.

You can refer the guide to use Layout Builder on this same documentation system in purpose of adding or editing your new profile’s layout builder.

7. 4. Step 3: Custom Style for new profile

Profile option from Zo2 Framework is very useful allowing you to create preset styles and customization. With Preset Style, you can assign a certain style to your theme or change the preset style such as Background, Header, Text, Link…

To select a preset style and create your desired style, in your new Layout Profiles tab, please scroll down the page you’ll see Style section.

This more detailed tutorial to custom style will cover this topic in depth.

7. 5. Step 4: Assign any profile to any menu item

Assign any profile to any menu item directly from your theme configuration with just a few clicks.


7. 6. Final Step

After all the changes with the new profile, one very important action you have to take, is clicking the Save button to apply all to your Joomla site.

8. Fonts, Theme Preset and Advanced Settings


Built in new Zo2 Framework, ZT Six provides you a various of settings:

  • General Settings: These are the general options for the templates
  • The Font Settings: provides the ability to change the font size as well as the font type used in the template. Many popular web fonts are included as options and some templates also include additional custom font options.
  • Theme Preset: The Presets Style Panel in ZO2 Framework makes use of a powerful Preset system that allows you to create preset styles and customization.
  • Advanced Settings: show up with many advanced options related to RTL, sticky menu, responsive layout, switcher box, custom css, tracking code and developer options.

Please visit to our Zo2 Framework document site to see the setting for each section.

9. EasyBlog

Everybody loves a better blogging solution. And EasyBlog from Stackideas makes it so easy for you to start a blog in Joomla.


9. 1. Download EasyBlog

  • Download EasyBlog from Stackideas.com. We’ve teamed up with StackIdeas to give a massive 20% discount on EasyBlog for our existing customers.

9. 2. Install EasyBlog

  • Login to your Joomla back end and head on to the installation area at Extensions > Extension Manager
  • Locate for the package which you have downloaded earlier com_easyblog_3.9.15370_paid_jx.y.zip by clicking on the Browse button. Hit theUpload File & Install button.


  • Installation is completed now.


  • You can found all settings for EasyBlog in Component > Easyblog:


For detailed explanation, see Documentation from Stackideas: http://stackideas.com/docs/easyblog.

10. Typography and Short Code

We carefully handcrafted this joomla template with a strong focus on typography, usability and overall user-experience. ZT Melano delivers the shortcodes you need in spades, letting you quickly and easily put together great content and sharp layouts.

Please view all typography embed in ZT Melano.

Shortcodes Buttons built in Editor


Please view all Shortcode embed in ZT Melano.

11. Frequently Asked Questions

11. 1. How can I change my Joomla site favicon?


  • You can upload your favicon.ico into the main folders of your front-end and back-end templates, which are found in the \zt_cramos\images folders respectively, overwriting favicon file that came with your templates.
  • Or You can attact a favorite icon to display in the top left hand area of the browser.

To upload a favicon to your Joomla site, in Extension => Template manager => open Zo2_melano template => General tab > Favicon option, just click the Select button.


See more about how to change the favicon, please refer to this link: http://docs.zo2framework.org/post/settings#1-2-favicon

11. 2. How do I change my site’s name?


  • In your Administrator, navigate to System => Global Configuration => Locate Site Name tab and change your site’s name.


  • Click the Save button.
  • That’s it!

11. 3. How to install and change languages in my Joomla site?


Installing a new language in Joomla 3.x is much easier than changing languages in Joomla 2.5. This is because of the new Install Language Tool from Joomla 3.x , which allows you to install new languages without manually needing to find and download them from other sites on the web.

  • In the top menu of you Administraton Panel, click Extensions => Language Manager


  • Click the Install Language button towards the top of the page.


  • Here, you can find the language you want to install using Search box or by browsing through the list of available languages. When you find a language you would like to install, select it by checking the checkbox in front of it’s name in the list and click on the Install button in the Joomla toolbar.


  • When the language has been installed correctly, You should see a similar message:


  • Now, the new language is showed in the list. To make this language as the default, in the top menu, go to Extensions => Language Manager and click the star icon next to selected language, then go to the frontend to see the changes.

11. 4. How to edit CSS of the Template?


There are 2 ways to edit css of the template:

  • Every Zo2 Framework’s template is packed with a handful of stylesheets in the form of LESS file. So you should follow this guidehttp://docs.zo2framework.org/post/customize#2-custom-styles
  • Since Zo2Framework version 1.3.1 we added an option called Load Custom CSS: if enabled, custom.css file (in which you can override the default styling of the template) will be loaded in the frontend.

This might be useful when you want to make some changes in the template design. All the CSS placed in this file will not be lost after upgrading the template.

12. Support Us

We want to know if you are happy, unhappy, or disappointed with something the feature has done, or if you have a suggestion about how we can do something better.

All feedback will be taken seriously and treated confidentially.