Introduction

Current Version 1.0.1 (May 22, 2014)

ZooExtension.com always explores many Magento Themes and gives you many surprise designs. And Magento Theme MT HERLA will be the best example. With unique design, impressive color and hamonious texture, MT HERLA is the perfect choice for any eCommerce website owners who always try to find out solutions that can boost up their sale and increase business growth.

In this document, we will find step by step instructions for installing and using this template effectively. Thank you so much for paying much attention to this tutorial. We would like to help you if you have any question relating to this.

Help & Support


References


You may find these sites useful while installing and configuring your Magento store:

Magento installation


Magento help


Online Magento guide

Magento Go differs from Magento Community Edition but most of the functionality is the same so this knowledge base might be very useful.

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

MT Herla is not only a friendly interface, but also an impressive and beautyful design. So, It will surely meet the highest of your business objectives. With this user guide, we hope you will know how to install & use this template daily to support your business activities effectively.

If you are unable to find answers to your questions, please feel free to post them in HelpDesk, or contact to us. We’d be glad to help you. Once again thank you so much for using our company’s product.

Support policy


This user guide was created to help you quickly configure the theme – please read it carefully, it will help you eliminate most of potential problems with incorrect configuration.

Important: please note that as authors of this theme we are able to provide support only for the features which we created and for the issues related strictly to this theme. Also We DO provide magento services such as: Magento configuration, installation, maintenance, customization etc.

Theme support


If you have found any bugs or have some other problems with this theme, please refer to chapter 17. FAQs. If the problem is not covered there, you can contact us in the comment section on ThemeForest or through the contact form on our profile page on ThemeForest. We will respond as soon as possible (within 24 – 48 hours, usually much faster). Please try to not repeat questions which are already answered in the user guide. This will be much appreciated.

Questions about Magento

Elements such as category management, product management, checkout process, payment methods and many others are standard Magneto functionalities (not related to the theme) and are beyond the scope of our support. How to get Magento support:

  1. If you have some questions about Magento itself, please refer to the following websites, almost every detail of Magento configuration was discussed there so you will find answers for most of your questions::

  2. Magento forum – http://www.magentocommerce.com/boards/

  3. Magento Stack Exchange – http://magento.stackexchange.com/
  4. Stackoverflow.com - http://stackoverflow.com/questions/tagged/magento/

  5. The best place to start searching is chapter 4. Magento configuration in thi suser guide. It covers some of the basic Magento elements.

  6. In the Online Magento Guide you can find all the basic Magento settings and many other useful information.
  7. You might also want to check the other sites referenced in 1.1.2 Magento help such as Magento Go Knowledge Base or Magento Go Video Tutorials.

Theme customization/modification support


Customization/modification of Magento themes is a very large subject and in some cases can be very complex. Due to that we're unable to provide help or support related to the theme customization. For more information about how you can customize this theme, refer to 5.1 How to modify the theme.

Third-party extensions


This theme may not be compatible with some third-party extensions. It’s impossible for theme authors to make the theme compatible by default with all existing extensions because there are thousands of available Magento extensions. Only the “default” Magento theme 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 themes, since nobody really uses “default” theme, everybody uses custom themes.

Generally all extensions can work with all themes but they sometimes have to be integrated manually. That’s because sometimes the extension and the theme override the same Magento template file so there can be a conflict. In such cases you need to customize the theme and merge two conflicting template files into one template file.

This isn't something specific to our themes, this is general rule for all Magento themes and extensions.

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

How to install


To work with this theme, an extension should be installed in theme's directories, not in the “default” Magento theme directories. To be more specific: extension should be installed in the main directories of the default theme in the MT Herla design package. Here are the main directories of MT Herla:

• Template files: app/design/frontend/mtherla/default • Skin files: skin/frontend/mtherla/default

where mtherla is the name of the design package, and default is the name of the default theme in the package.

In many cases you only need to upload the extension to the theme's directories. Sometimes you need to edit layout files to "tell" the theme where it should display extension's output. If you are not familiar with Magento, you should ask the author of the extension for more information. If you feel that you might have troubles with installing extensions, we advise that you order professional installation services.

Quick start


Important things you need to know before you start using Magento


  1. When developing your store you should completely disable Magento cache. Enable it after you finish configuring your store: 4.1 Caching system.
  2. After making changes to your store such as editing products, adding categories etc. you need to reindex the data: 4.2 Index management.

Installation


To start using this theme you only need to take a few quick steps:

  1. Install the theme: 3. Installation

  2. Enable the theme: 4.3 How to enable the theme.

  3. Flush and disable Magento cache: 4.1 Caching system

  4. Import static blocks and pages provided with this theme: 6. Import static blocks & cms pages

Configuration


Next, you need to configure your store. This theme works “out of the box”, but not all of the features are enabled by default. You might want to take the following steps:

You may find these Magento documentation and tutorials useful while configuring your store: 1.1 References.

1) Disable Magento cache before you start configuring your store: 4.1 Caching system.

2) Upload your logo: 4.4 Logo.

3) Configure your home page: 7. Home page.

4) Configure the home page slideshow: 10. MT Revolution Slider.

5) Configure position of the Add to cart button and options box on product page: 4.x.1 Position of: Add to Cart button and product options.

Fresh Magento installation


If you have just installed a fresh copy of Magento you should also:

  1. Create categories: 4.5 Categories.

  2. Create products.

  3. Reindex the data after creating categories and products: 4.2 Index management. You need to reindex after making any changes in Magento catalog.

Theme customization


For more information about theme customization refer to 5 Magento Theme customization.

Demo products


To install demo products and categories you can use the sample data from the official Magento site (it must be installed prior to the basic Magento installation):

Installation


To install the theme you only need to upload all the theme files to your server and then enable and activate the theme in the admin panel. But to avoid unexpected problems after installation, you should first prepare your Magento. Please strictly follow the steps described in this guide.

Prepare your Magento


Step 1. It is recommended to install the theme on a test server before you install it in a live store.

Step 2. Backup Magento files and the store database.

Important: creating backup before installation of any themes or extensions in Magento is extremely important, especially when you are working on a live store.

Step 3. Disable compilation mode in System > Tools > Compilation.

Step 4. Disable every cache you have in your Magento:

  • Magento cache (refer to 4.1.2 Disable cache for details)
  • full page cache and caching modules for Magento (such as Speedster)
  • any additional cache on your server, PHP cache engines, APC, etc.

Important: when developing your Magento store, in order to be able to see changes immediately, you should completely enable the cache.

Step 5. Remove all possible custom modifications of the Magento's “base” theme. MT Herla (same as any other Magento theme) relies on “base” theme, so any modifications of the “base” theme can change the default behavior of Yoming and break some functionality. You should never edit “base” theme's files.

Step 6. Log out from Magento admin panel. Do not just close the browser window: you need to click Log Out link to refresh the access control system.

Install


Before you install the theme you need to prepare your Magento, so please do not omit the previous step: 3.1 Prepare your Magento.

Step 7. Extract the theme package on your computer and navigate inside Theme Files directory.

Step 8. Using your FTP client upload theme.zip file to your Magento's root directory (Magento's root directory is where you can find Magento's basic files, such as: index.php and get.php).

Note: Before uploading file to Magento's root folder, we recommend you to disable the cache management. See more chapter Disable Cache.

Step 9. Unzip theme.zip file – it contains five directories: app, js, media, skin and lib. Magento already contains the same directories so unzipping here will merge theme's and Magento's directories.

Folder Description
App Contain all layout and templates files
Js Contain all Js files of template and other features
Media Contain all image files in the static blocks, icons...
Skin Contain all skin files
lib locate Magento core code

Note: this will not overwrite any Magento core files, this will only add the theme to your Magento. So if you see a message that those four directories already exist on the server, you can confirm that you want to merge directories.

In case you can't unzip files on your server:

Alternatively, you can unzip theme.zip(use file on your computer, and upload its content (four directories which can be found inside: app, js, media, skin) to your Magento's root directory. Note that files can be broken if you send them in large numbers via FTP without zipping. So it is highly recommended to upload zipped files.

upload_theme

Note: After uploading completely, In your Administration Panel, please nagative to Magento Themes > MT Herla > Theme Design and click the Save Config button at the upper-right corner of the panel to create less and css file for each store.

Step 10. Set correct file permissions for all the theme files which you uploaded to your server.

Note: theme files should have the same permissions as other Magento files. Otherwise Magento will not have access to the theme files, images etc. In case of any doubts about the permissions, please contact your hosting provider.

Step 11. Enable the theme. To do this, go to System >Configuration > Design section. In the Current Package Name field enter the name of the design package: mtherla. Click Save Config button:

after_install

If you have more than one store view (by default there's only one) in your Magento and you want to enable the theme for the entire site, make sure that you select Default Config under Current Configuration Scope. In the top right corner of this section. Otherwise, set the scope according to your needs.

Step 13. Flush Magento cache (refer to 4.1.1 Flush cache and any other cache you have in your Magento installation.

Step 14. Go to the next chapter to import sample content.

Import sample blocks and pages


After the theme was installed and enabled, you can import sample static blocks and pages provided with the theme.

Step 16 . Go to MagentoThemes > MT HERLA > Theme Settings > Theme Installation to import static blocks and pages. Refer to 6.1 Import Static Blocks for more details about the import.

Note: if you get 404 not found message when trying to open theme configuration pages in the admin panel after installation, you need to log out and log in again to refresh the access control system.

Now you can open up your web browser to see the new look of the store. Clear your web browser's cache and cookies for your store domain (this will eliminate potential problems with unrefreshed cache).

All the theme settings in the admin panel can be found in two tabs:

  • System > Configuration > MT HERLA
  • System > Configuration > MT Extensions.
Important: it is a good idea to disable Magento cache before you start to configure your store. Otherwise you will need to flush the cache in order to see any changes you have made in the configuration.

In case of any problems after installation, please refer to next chapter.

Problems after installation


If you encounter any problems after installation: flush Magento cache, log out from the admin panel, and log in again. Check again the installation steps and make sure you didn't omit any step. What can cause problems:

  1. Magento cache (or external cache) was not flushed after installation of the theme.

  2. Compilation mode was not disabled before installation.

  3. Some of the theme files werenot uploaded.

  4. File permissions issue.

  5. You have some third-party extensions which change/break theme's default behavior or cause some conflicts.

  6. You edited theme files and accidentally removed or changed something in the files.

  7. You have customized the theme by creating custom sub-theme and your modifications change/break the default behavior of the theme.

  8. You have some elements that left from your previous theme (e.g. in Magento's "base" theme in app/design/frontend/base/) and that changes/breaks the default behavior of the theme.

Also check your log files in var/log/ (log settings should be enabled in the admin panel: System > Config > Developer) for more information about possible errors.

Please refer to the following chapter: 17. FAQs for more information about the most common problems in Magento.

Magento configuration


The following chapter describes some of the basic Magento settings and features.

Please note that as authors of this theme we provide support only for the issues related strictly to the theme. Support for Magento configuration/installation/maintenance etc. is beyond the scope of our support. This chapter should be only treated as a starting point, more inormation about Magento can be found in Magento documentation: 1.1.2 Magento help

Caching system


When developing your Magento store, you want to see the changes you have implemented. In order to be able to see changes immediately, you should completely disable the cache. You can enable it after you finish configuring your store.

If the cache is enabled, always refresh the cache after making any changes in Magento/theme/extension configuration. To access the cache management screen, go to System > Cache Management.

Flush cache


Go to System > Cache Management. Click the following buttons to completely clear the store cache:

  1. Flush Magento Cache
  2. Flush Cache Storage
  3. Flush Catalog Images Cache
  4. Flush JavaScript/CS SCache

flush_cache

Disable cache


Go to System > Cache Management. Click Select All link, select Disable in Actions field and click Submit button:

disable_cache

After cache is disabled cache management screen might look like this:

disable_cache_status

Enable cache


When the store is configured, you can enable caching system again. Go to System > Cache Management. Click Select All link, select Enable in Actions field and click Submit button:

enable_cache

Refresh cache


If the cache is enabled, after each configuration change, extension installation, upgrade or uninstallation always refresh the cache. To do this, go to System > Cache Management. Click Select All link, select Refresh in Actions field and click Submit button:

refresh_cache

Index management


Magento indexes most of its data in order to access it faster. If you make changes to your store such as editing products, adding categories, changing urls, etc. you will need to reindex the data so that the changes can show up on your frontend.

To access the index management screen, go to System > Index Management. To rebuild your indexes, select all, select Reindex Data and click Submit button.

index_management

How to enable the theme


In Magento you can enable the theme on many levels. You can set one theme for the entire store, but you can also set different themes for different parts of the store (even for selected categories, products or CMS pages).

If you want all your store pages to look the same (to use the same theme), your theme should only be enabled in System > Configuration > Design(in this tab, you can set the default theme for your store) (the same as it was described in the installation steps 3. Installation). You need to remove all theme overrides from categories, products and CMS pages.

system_config

There are many places where a theme can be enabled. If you have just installed a fresh copy of Magento, those places will be empty. Otherwise, please take a look at these sections of the admin panel:

  • System > Design: You may set some seasonal themes. For example, you may set a theme for Christmas time, set date interval (Date Form & Date To), which your default theme should be substituted by your seasonal themes.

system_design

This section should be empty, delete all existing entries:

design_empty

  • These fields should be left empty, do not select any theme here:

    • Catalog > Manage Categories > [category] > Custom Design > Custom Design
    • Catalog > Manage Products > [product] > Design > Custom Design
    • CMS > Pages > [page] > Design > Custom Theme

Leave --Please Select-- in these fields, like on the following screenshot:

custom_design

Remember to flush the cache after you change design settings.


You can upload file with different name or different file format (e.g. .jpg or .png). Now you go to MT HERLA section > open the Theme Design tab > Header section and select to upload your desired default/retina logo.

logo

Categories


Note: More info about categories in Magento can be found in: http://www.magentocommerce.com/wiki/welcome_to_the_magento_user_s_ guide/chapter_3#creating_categories.

To create and edit categories in Magento, navigate to Catalog > Manage Categories section of the admin panel. After installation of Magento your category tree is almost empty, there is only the root category (named Default Category):

Screen Shot 2013-09-16 at 10.33.23 PM

The root category is not displayed in the frontend of the store – that's why your main menu is empty just after istalling Magento. You need to add some new top-level categories (also called subcategories because they are descendants of the root category).

Important: all categories have to be descendants of the root category. Do not add categories outside of the root category tree.

To add a new category, select the root category by clicking on it and click Add Subcategory button:

Screen Shot 2013-09-16 at 10.35.20 PM

Fill in all the required fields. Especialy set Is Active and Include in Navigation Menu fields to Yes, and click Save Category:

sample_category

This will create a new category (which will be displayed as a top-level category in the main menu on frontend):

abc_cateogry

Note that this new category has to be a descendant of the root category – it has to be one level lower than the root category:

Screen Shot 2013-09-16 at 10.37.52 PM

If the category is not displayed in the frontend: reindex the data and flush Magento cache.

Category info


For each category you can add some basic information which will be displayed on category page (above the products). Navigate to Catalog > Manage Categories and select a category:

  • Description – category description. You can enter text or HTML.
  • Image – main category image. After image is uploaded and saved, an icon of the existing image will appear to the left of the button, and a Delete Image checkbox will appear to the right.

Landing pages


You can show your customers a landing page instead of the standard product listing page when they select the category. You can do so by enabling static block on your category page. Navigate to Catalog > Manage Categories, select a category, open Display Settings tab and select appropriate value in the Display Mode field. In the CMS Block drop-down, select which block you would like to display on category page. The list will include all existing static blocks.

Depth of the menu


In the main menu you can limit number of displayed cetegory levels. To do that, go to System > Configuration > Catalog > Category Top Navigation and specify the depth in Maximal Depth field.

For example, if you want to display only three levels of categories, enter 3 in Maximal Depth field and save the configuration. From now on, only three levels of categories will be displayed in the main menu.

Categories in Layered Navigation ("Shop By")


You can display categories in Magento's Layered Navigation block ("Shop by" block) at the top of the left sidebar in category view. To display selected category in the Layered Navigation, go to Catalog > Manage Categories, click selected category and set Is Anchor field (in Display Settings tab) to Yes:

59e7206727450487bb8857a7325aacd3

From now on this category will be displayed in the Layered Navigation. If the category is not displayed in the frontend: reindex the data and refresh Magento cache.

Content Management System (CMS)


WYSIWYG editor


WYSIWYG (What You See Is What You Get) editor is a convenient way to add content to pages and static blocks in Magento.

Important: WYSIWYG should only be used to edit text, never use it to edit HTML. Remember to always turn off WYSIWYG editor when you want to edit HTML or Magento's CMS tags in the page/block content. Otherwise WYSIWYG editor can break your content.

In fact the best way to use WYSIWYG is to turn it on only when it is needed. Go to System > Configuration > Content Management and set it as Disabled by Default.

After that, if needed, WYSIWYG can always be turned on with Show/Hide Editor button above the page/block content field:

wysiwyg_editor

Static blocks


Static blocks in Magento are simple portions of content that can be displayed throughout the site. To manage static blocks, go to CMS > Static Blocks section in the admin panel.

To create a static block, go to CMS > Static Blocks, click Add New Block button and follow these steps:

  1. In Identifier field enter an identifier of one of the static blocks. Make sure the identifier is lower-case and separated by underscores to follow Magento’s standards.
  2. Enter the title in Block Title.
  3. Select the Store View to which this block will apply.
  4. Select Enabled in the Status field. Disable dmeans that the block is not displayed in the frontend.
  5. Insert your Content (it can be text or HTML) and click Save Block.

Here's an example:

static_block

For more details on creating static blocks please refer to Magento user guide: static blocks

CMS markup tags


There are some special markup tags – a bits of text surrounded by double curly braces – which have a special meaning in Magento. You can use those tags either in static blocks or CMS pages.

For example, this tag:

{{store url=''}}

will be replaced with the store’s base URL.

It might be useful when you want to display a link on one of your pages. You can use this tag to dynamically build all of your links (you don't need to hard-code any links). Thanks to that you will not need to rebuild your links after you move your store to a new domain. For example, if your store domain is www.example.com, the following tag placed in the page content:

{{store url='path/to/page/about-us'}}

will be replaced with this URL:

http://www.example.com/path/to/page/about-us/

For more information, please refer to this article, where you can find a comprehensive list of available tags: CMS markup tags

Translation / Localization


Interface translation


This theme introduces a few additional interface character strings. For example “Special Price” label is replaced with shorter “Now only” label. Strings are located in app/design/frontend/mtherla/default/locale/en_US/translate.csv. This file can be used to translate the interface into other languages.

Example:

To translate the interface into spanish follow these instructions:

  • Create a new folder for your translation. For spanish language it will be app/design/frontend/mtherla/default/locale/es_ES.

  • Copy translate.csv from app/design/frontend/mtherla/default/locale/en_US and paste it into created folder app/design/frontend/mtherla/default/locale/es_ES*.

  • Open app/design/frontend/mtherla/default/locale/es_ES/translate.csv in OpenOffice Calc (or other text editor like Notepad++, PSPad).

Note: The editor should be capable to save file in UTF-8 encoding. Do not use Excel, it can break file structure. Read more about useful tools: http://www.magentocommerce.com/wiki/groups/166/useful_tools_to_work_with_translations.

  • If you open translate.csv in OpenOffice Calc it might look like this:
Special Price Now only
My Wishlis Wishlist
My Wishlist (%d item) Wishlist (%d)
My Wishlist (%d items) Wishlist (%d)
My Account Account

The first column contains the original character strings. It should be left intact. In the second column you can place your translation of each string.

  • Some strings contains %d or %s entries. These entries should be left intact in the translated strings.

Language flag


If you have more than one store view in your store, the store view switcher will be displayed at the top of the page. You can enable different language for each store view.

For each available language a flag is displayed in the store view switcher (we can also call it “language switcher”). Flag images (16x12 pixels, PNG format) should be uploaded to /skin/frontend/mtherla/default/images/flags folder. Image names should be the same as the store view codes. E.g. if you have a store view with the code de, you will need to upload a flag image de.png to /skin/frontend/mtherla/default/images/flags folder.

To check what is the store view code, go to System > Manage Stores and click on the store view name. You can find the code in the Code field:

edit_store_view

Rememeber that if you change the store view code, you will also need to change the name of the corresponding flag image.

Magento theme customization


Please note that Magento theme customization is far beyond the scope of this user guide. This chapter is only for informational purposes, you should treat it as a starting point. Before you start to customize the theme you need to be sure that you know what you're doing.

Magento is based on a theming concept referred to as parent/child theming – changes in the theme can be implemented without modifying the original. Magento's “base” theme serves as a parent theme for any custom theme.

The correct way to customize the theme in Magento is to create your own sub-theme of the default theme in the design package. You should never edit original design package files. Files that need to be changed can be copied from the default theme of the design package to your custom sub-theme inside that package.

This way you can override any file of the design package. And you can be sure that when something goes wrong you can simply delete your custom sub-theme without breaking the original files.

How to modify the theme


Customize images


The easiest way to customize the theme is to modify or replace default images.

Custom content images

All images which are used in this theme (such as page backgrounds, patterns, icons, banners inside blocks etc.) are stored in media/wysiwyg/magenthemes/mtherla/ directory:

  • patterns – patterns which can be applied for the main sections of the page in System > Configuration > MT HERLA > Theme Design.

To add custom pattern, rename one of the files which name starts with default., for example: default.custom1.png → custom1.png

(by removing the first part of the name: default. – the dot also has to be removed). Then, replace that file with your custom image. Custom image will be available in the admin panel as custom pattern.

  • _backgrounds – images which can be used as page background and other images for static blocks. You can create subdirectories here for custom images.
  • brands – the logo which can be used in Brand Slider.
  • slideshow – images for the home page slideshow.

Interface images

All interface images and icons are stored in skin/frontend/mtherla/default/images/ directory. You can replace those files with custom files. You can also use PSD files included with this theme to create your own versions of images.

Modify template files


Magento consists of dozens of template files, each one is used to render a block of content in the frontend of the store. When you want to customize a theme, you can display the names of template file of every block in the frontend by enabling Magento's Template Path Hints.

Note: to enable Magento's Template Path Hints go to System > Configuration > Developer. Select your current website under Current Configuration Scope in the top left corner of the admin panel, otherwise Template Path Hints settings will not be visible.

This way you can easily check which template files you need to edit to customize specific sections of Magento.

Create custom sub-theme


The correct way to customize the theme in Magento is to create your own sub-theme. You should never edit the original files. Files that need to be modified can be copied to your custom sub-theme.

Note: to check which template file you need to edit to customize specific section of Magento you can enable Magento's Template Path Hints. Refer to chapter 5.5.2 Modify template files for more details. If the file which you selected with Template Path Hints doesn't exist in MT Yoming package (a theme doesn't need to override all template files from Magento's “base” theme), you can copy that file from Magento's “base” theme to your custom sub-theme inside MT Yoming package.

By creating custom sub-theme:

  • You can override any file.
  • You can create upgrade-proof modifications.
  • You can be sure that when something goes wrong you can simply delete your sub-theme without breaking the original files.

Magento theme customization


Design packages


Themes in Magento are grouped together into design packages (in earlier versions called interfaces). By default Magento Community Edition has two packages named "base" and "default".

Note: do not edit files in the "base" package and do not create custom sub-themes inside the "base" package.

Every design package in Magento comes with a default theme named "default" which is the main theme in the design package. When administrator assigns a package to the store, Magento automatically looks for the theme named "default" in that package.

Design package can also contain variations of the "default" theme. This variations are often called sub-themes because they inherit all the files from the "default" theme (from the same package) and from the "base" package. Inside the sub-theme you can override any file of the "default" theme. Sub-theme can even consists of a single file – other files will be inherited from the "default" theme from the package. This is called a fallback mechanism because Magento always falls back to the next theme in the hierarchy to find the requested file. Fallback is described later in this chapter.

Theme structure


Magento themes consists of many files like HTML templates, CSS stylesheets, images etc. All files are split between two directories:

  • app/design/frontend/package_name/theme_name/

Templates directory – contains the layout files, HTML templates and translations

  • skin/frontend/package_name/theme_name/

Skin directory – contains CSS stylesheets, images and theme-specific JavaScript files

where package_name indicates the package name and theme_name indicates the theme name.

Template files are organized as follows:

  • layout – directory contains XML files which define page structure
  • template – directory contains template files (.phtml), a mix of HTML and PHP
  • locale – directory contains CSV files with translation strings

Skin files are organized as follows:

  • css – directory contains CSS files
  • images – directory contains images
  • js – directory contains theme-specific JavaScript files

Fallback mechanism


Understanding fallback mechanism is very important when you want to customize the theme, so let's see a simple example.

Let's say we have a design package named "helloworld" with custom sub-theme named "new". Package files are organized as follows:

  • app/design/frontend/helloworld/new/
  • skin/frontend/helloworld/new/

Let's also assume that your custom sub-theme contains a CSS file called "menu.css" located in skin/frontend/helloworld/new/css/menu.css

If your custom theme requests "menu.css" but Magento can't find it in your custom sub-theme in skin/frontend/helloworld/new/css/menu.css, Magento will try to find that file in the next theme in the hierarchy. Next theme in the hierarchy is the "default" theme in "helloworld" package so Magento will search in skin/frontend/helloworld/default/css/menu.css.

If the file is not there, Magento will continue until it locates the file. Next theme in the hierarchy is the "default" theme in "base" package: skin/frontend/base/default/css/menu.css. The "default" theme in the "base" package is the final fallback point in the hierarchy.

Let's take a look again at the entire fallback hierarchy:

  1. Look for the requested file in custom sub-theme: skin/frontend/helloworld/new/

  2. If not found, look for the file in the "default" theme in the design package: skin/frontend/helloworld/default/

  3. If not found, look for the file in the "default" theme in "base" design pack skin/frontend/base/default/

The first theme in hierarchy is the theme that you assign through the admin panel (in System > Configuration > Design). The last theme in hierarchy is the "default" theme in "base" design package.

Thanks to the fallback mechanism there is no need to copy all the default theme files to your custom sub-theme when you want to make some changes in your theme. You only copy over the files that you want to edit. Other files will be inherited from the "default" theme in the package and from the "base" package.

The most important advantages of the fallback mechanism:

  • selected functionality can be shared between many themes
  • less code to maintain
  • custom themes are update-proof: you don't edit original files, so your changes are not overwritten after theme updated

Examples of custom sub-theme


Let's see some examples.

Example 1:

You have just installed a custom design package named helloworld with the default theme (named "default") inside. Let's say that you want to change the font color of the product name on product page. Package files are organized as follows:

  • app/design/frontend/helloworld/default/

  • skin/frontend/helloworld/default/

The correct way to customize the "default" theme is to create your own sub-theme in which you will override selected elements of the default theme.

1.Let's call the new theme my_world. Create the following folder inside the helloworld package: skin/frontend/helloworld/my_world/

The name of that folder is the name by which Magento will recognize your theme.

2.Create a copy of the CSS file skin/frontend/helloworld/default/css/styles.css

And paste it into your sub-theme directory: skin/frontend/helloworld/my_world/css/styles.css

Note that the directory structure inside the sub-theme must replicate the directory structure of the default theme:

  • skin/frontend/helloworld/default/css/styles.css

  • skin/frontend/helloworld/my_world/css/styles.css

3.Open skin/frontend/helloworld/my_world/css/styles.css style sheet and add these lines at the end of the file to override the default color of the product name:

Go to: ↑ Table of Contents 59 .product-view .product-shop .product-name h1 { color:#f00; }

4.Enable the new sub-theme in the admin panel. Go to System > Configuration > Design > Themes and enter my_world (the sub-theme name) in the default field:

theme_design

Finally, refresh Magento cache. From now on your customization will override the default styling of the helloworld package.

Example 2

In the previous example we created custom sub-theme named my_world in the helloworld design package to override one of the skin files of the default theme. But you can also override template files located in app/design/frontend, not only skin files.

Continuing with the previous example, let's override the contact form template to add simple image banner above the form.

  1. Create the following folder for the "my_world" template files in the "helloworld" package:

app/design/frontend/helloworld/my_world/

The name of the folder has to be the same as the name of the folder which you created for the skin files (skin/frontend/helloworld/my_world/)

  • Go to: ↑ Table of Contents 60

  • The file which is responsible for the contact form is located here: app/design/frontend/helloworld/default/template/contacts/form.phtml

Create a copy of that file and paste it into your sub-theme directory (remember that the directory structure inside the sub-theme must replicate the directory structure of the default theme): app/design/frontend/helloworld/my_world/template/contacts/form.phtml

Note that if the form.phtml file doesn't exist in the helloworld package, you can copy it from the base package (keeping the directory structure intact). base package contains all the files that control Magento's default behavior. If the requested file is not found in your custom sub-theme, Magento will try to find that file in the "default" theme from the package. If the file is not found, Magento will call the file from the "base" package.

Thanks to the fallback mechanism, in our example Magento will try to find the file in the following order:

  1. app/design/frontend/helloworld/my_world/template/contacts/form.phtml

  2. app/design/frontend/helloworld/default/template/contacts/form.phtml

  3. app/design/frontend/base/default/template/contacts/form.phtml

  4. Open app/design/frontend/helloworld/my_world/template/contacts/form.phtml file and insert image banner before the beginning of the contact form.

  5. If you didn't enable the new sub-theme in the previous example, you need to do it now. Go to System > Configuration > Design > Themes and enter my_world (the sub-theme name) in the default field. Finally, refresh Magento cache to display changes you have made.

  6. Go to: ↑ Table of Contents 6

Summary


  • Themes in Magento are grouped together into design packages.
  • By default Magento comes with the package named "base" which contains all the files that control Magento's default behavior.
  • Every design package in Magento comes with a default theme named "default" which is the main theme of the design package.
  • Design package can contain variations (sub-themes) of the "default" theme. They inherit all the files from the "default" theme (from the same package) and from the "base" package.
  • The correct way to customize the theme in Magento is to create your own sub- theme. You should never edit original design package files. Files that need to be changed can be copied to your custom sub-theme.
  • This way you can override any file of any design package. And you can be sure that when something goes wrong you can simply delete your custom sub-theme without breaking the original files.
  • Magento use fallback mechanism to make custom themes easier to maintain and upgrade-proof.
  • The first theme in the fallback hierarchy is the theme that you assign through the admin panel (in System > Configuration > Design). The last theme in hierarchy is the "default" theme in "base" design package.
  • If the requested file is not found in your custom sub-theme, Magento will try to find that file in the "default" theme from the package. If the file is not found, Magento will call the file from the "base" package.
  • The directory structure inside the sub-theme must replicate the directory structure of the default theme.

Import Static Block & CMS Pages


This tab is responsible for the installation procedures.

Import Static Blocks


After the theme is installed, you can import the set of predefined static blocks in System > Configuration > MT HERLA > Theme Settings > Theme Installation.

import_static

  • Click the Import Static Blocks to import all static block provided with this theme. List of all blocks indentifiers can found later in this chapter. You can also see more information about static block management in Magento refer to 4.6.2 Static blocks.

  • After importing, some of the blocks are disabled. You will need to enable them in order to show their content in your store. You can replace the default content of each block with your own content.

  • To reset (re-import) selected static blocks, delete blocks which you want to reset, and then import blocks again. This way you will only import blocks which are missing.

Important:In case you need the original content of some static blocks, XML file with all static blocks can be found in the following directory: \app\code\local\MagenThemes\mtherla\etc\import.

  • In order to see your changes, you need to refresh Magento cache after making any changes in your static blocks.
  • Overwrite Existing Blocks – if set to Yes, imported blocks will overwrite existing blocks with the same identifiers (if any blocks with the same identifiers already exist). You can use this option when you want to restore the original content of all blocks.

Note: To change this option select Yes or No and then save the configuration. Without saving, the option will remain unchanged after you refresh the page.

List of Block Indentifiers


There are more than 10 predefined CMS blocks (static blocks) – content placeholders displayed in almost every part of the store, ready to show any content you need: text or HTML.

Below you can see a list of block identifiers of all built-in static blocks available in this theme.

list_static

Import Pages


After the theme is installed, you can import predefined CMS pages.

import_page

  • Click the Import Pages button to import CMS pages provided with this theme.

  • Names of all provided pages are prefixed with the name of the theme. Pages can be edited in CMS > Pages. Home page configuration is described in this chapter: 7. Home page

  • To reset (re-import) selected pages, delete pages which you want to reset, and then import pages again. This way you will only import pages which are missing.

Note :in case you need the original content of CMS pages, XML file with all pages can be found in the following directory: \app\code\local\MagenThemes\mtherla\etc\import

  • Overwrite Existing Pages: If set to Yes, created pages will overwrite existing pages with the same identifiers (if you have any). You can use this option when you want to restore the original content of all pages.

Note: To change this option select Yes or No and then save the configuration. Without saving, the option will remain unchanged after you refresh the page.

HomePage


After the theme is installed, you can import sample versions of the home page.

This section helps you create and manage Home Pagem. Nagative to CMS > Pages > Responsive magento themes MT Herla and follow some quick steps.

Home Page Layout


For every CMS page in Magento you can select page layout - the number of columns: one, two, or three columns.

  • You can change the layout of the home page in Design section.

  • Select one of the options in the Layout field and click Save Page button:

homepage_layout

Home Page Content


You can edit the content of the home page by going to CMS > Pages and open the active home page. Content can be found in the main field of the Content tab:

home_page

Note: Always turn off WYSIWYG editor when you want to edit HTML or Magento's CMS tags in the page/block content. Otherwise WYSIWYG editor will break the content. Refer to 4.6.1 WYSIWYG editor for more details.

Static Blocks


Static Block and Widgets


Static Block is the easiest way of showing up different types of data (banner ads, or any html content) on various pages in your Magento template. The static block content can be created and modified Magento Admin panel. And it also can be display on any single or multiple pages. Now you can easily create a static block and display it via Widgets just following the below steps:

Create a Static Block


Static blocks in Magento are simple portions of content that can be displayed throughout the site. To manage static blocks, go to CMS > Static Blocks section in the admin panel.

  • To create a static block, go to CMS > Static Blocks, click Add New Block button:

add_new_block

  • Then follow these steps:

general_infomation_block

Field Description
Block Title The name of block
Indentifier Enter an identifier of one of the static blocks
Store View Select the Store View to which this block will apply
Status Select Enabled in the Status field. Disabled means that the block is not displayed in the frontend
Content Insert your Content (it can be text or HTML)

Note: Make sure the identifier is lower-case and separated by underscores to follow Magento’s standards.

  • Don't forget to select Show/hide Editor to hide HTML off.

  • When complete, please click the Save Block button above.

Here's an example:

banner_setting

Use Widget CMS Static Block


This widget allow you to display a static content on any position on your website. Add a widget instance by:

  • Go to CMS > Widgets, click button Add New Widget Instance.

  • Select Type: CMS Static Block, select Design Package/Theme: mtherla/default, then click Continue button.

  • Enter Widget Instance Title, Choose store view to display product on Assign to Store Views, order of your widget at Sort Order.

  • Choose which page and position to display by click on button Add Layout Update, select page to display on at Display On select box. In field Block Reference, select which position you want to display widget.

  • Click tab Widget Options to select a block you want to display:

select_block

*More infomation about Widgets in chapter 9. Widgets

Listed Below are some Static Block examples available on the homepage. You can easily change the Static Block's Content in CMS > Static Blocks and use corresponding Widget to display that on the front-end. Read back chapter 9.1 Staitc Block and Widgets

Main Slide Right


banner_1

Main Center


banner_2

Main Bottom


banner_3


footer_top


footer_bottom

Widgets


Widgets are the most exciting features in the magento. You can use that to display different content block within your page, such as Latest Products/New Products/Best Seller Products/Brands or any CMS Static Block.

List of some popular widgets on this theme and how to add a new widget are available in this chapter.

Add a new widget


Add a new widget showing featured products (or bestseller, new, sale off, recent reviewed products):

  • Go to CMS > Widgets, click button Add New Widget Instance.

Widget_Instance

  • Select Type and Design Package/Theme: mtherla/default, then click Continue button.

setting_widget

  • Enter Widget Instance Title, Choose store view to display product on Assign to Store Views, order of your widget at Sort Order.

add_new_widget

  • Choose which page and position to display by click on button Add Layout Update, select page to display on at Display On select box. In field Block Reference, select which position you want to display widget:

layout_update

  • Click tab Widget Options to enter parameters of the widget:

widget_option

Widget Title: The title of this widget instance to show on frontend.

Cache Lifetime (Seconds: Expiration time that module show be cached.

Widget Title: Type of widget

Category: Which categories of products you want to show, you can choose multiple categories by holding SHILF key and click on a category. Leave it empty to select all categories.

Product Collection: The product collection.

Limit: number of products to show.

Column: number of product columns per row

Products


With this block you can display products which are marked as new in your store.

To mark the product as new, go to Catalog > Manage Products, select the product and in Set Product as New from Date and Set Product as New to Date fields, enter the date range in which the product will be promoted as a new product.

More information about displaying the New Product block, you can read back chapter 9.1 Add a new widget .

products

List of all settings available in the admin panel can be found in CMS > Widgets > Productslist:

product_list_config

Product Scroller


product_scroller

Product Scroller is a quick and easy way to publish product slide show on your Magento commerce website. With this module, you can can display products from any category (only single category is allowed). The module config file gives vital information about the module. Please Go to CMS > Widgets > Products Scroller to open the Product Scroller module settings:

product_scroller_config

Most Viewed


Most Viewed Products is an useful module that allows the customers to see top best seller product. It can be said that this magento module provides an ease to the visitors, and thus attract more visitors to your online store. Lets get Most Viewed Products to increase your sale.

most_view

For displaying most viewed products list in Home page or any other CMS pages in Magento, you should see all the settings of this module found in CMS > Widget > Most Viewed:

most_view_config


Showing related products on your Product page is a great way to promote cross-sells. This Related Product Widget is designed to let you easily engage your visitor with more products related to the one they are viewing.

related_product

In the Widget list, you find a widget named Related Product View or add a new widget to show your related products. All setting for this will be presented like an image below:

related_product

This setting allows you to choose which categories of products you want to show. You can choose multiple categories by holding SHILF key and click on a category. Leave it empty to select all categories.

category

Brands


logo_brand

Brands module lets you display your brands in a more useful way. This module can be placed on any CMS Page, also on the homepage. Each Brand is a simple inside a link. You can see the configuration of Brands in CMS > Widgets > Brands.

  • You can specify the Attribute Code of the attribute which contains the information about brands in your store. Search for that code in Catalog > Attribute> Manage Attribute.

  • Create and upload logo images (jpg, png or gif), all of them named as per the entries in the brand attribute [Catalog > Attribute> Manage Attribute] :

manage_label

MT Revolution Slider


This chapter describes the slideshow displayed on the home page. List of all settings available in the admin panel can be found in 10.1.2 Slideshow configuration. & 10.2 Slideshow Displaying.

slider

Slideshow Management


Create a new Slider


Go to MT > MT Revolution Slider > Add New Slider:

add_new_slide

  • There you can set and edit basic settings about slider like slide transitions, slide change speed, shadowing, responsivity, slide navigation etc. A list of the Slider Setting can be found in Revolution Slider:

edit_slider

Create & Edit Slide


The next step is creating/editing slides. You get there by just clicking on Slides in the Revolution Slider Form window.

add_slide

The New Slide tab automatically appears, as shown on the following screenshots.

  • General Slide Settings

The General Slide Settings let you change many of the items that control how your slide is displayed, such as the title, Transitions, Slot Amount, Rotation, Thumbnail and Full Width Centering, etc.

general_slide_setting

Field Descriptions
Slide Title The title of the slide, will be shown in the slides list
State The state of the slide. The unpublished slide will be excluded from the slider
Transitions The appearance transitions of this slide
Slot Amount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy
Rotation Rotation (-720 → 720, 999 = random) Only for Simple Transitions
Transition Duration The duration of the transition (Default:300, min: 100 max 2000)
Delay The time one slide stays on the screen in Milliseconds
Thumbnail Slide Thumbnail. If not set - it will be taken from the slide image
Full Width Centering Apply to full width mode only. Centering vertically slide images
Visible From/Until If set, slide will be visible after/till the date is reached
  • Edit Slide:

With each Slide, MT RevSlider allows you add a name, a background image, many types of layer (Image, Text, Video...) with dozens of standard slide transitions. You also create as many slides as you like. Written instructions and screenshots are outlined in Create & Edit Slide.

slider_edit

Slideshow Displaying


Slideshow widget allows you to display images, description, links, and to configure various transition effects, timing, auto sliding.... Widget Revolution Slider setting below:

slideshow_widget

Mega Menu


This chapter describes Main Menu, Mega Menu and all the related features.

Structure of the menu


The menu can be displayed in two styles: classic menu and wide menu.

Note: in Magento you can limit number of cetegory levels displayed in the menu. Refer to 4.5.3 Depth of the menu for more details.

  • Classic menu:

    Classic menu is a standard drop-down menu which can display any number of category levels.

classical_menu

  • Wide menu:

    Wide menu can display 4 levels of categories.

wide_menu

Category levels from the screenshot above:

1st levelAPPLE

2nd levelIphone

3rd levelIphone 05

4th levelDonec Congue

More information about Category Management in Magento can be found in chapter 4.5 Categories.

Custom Category Blocks


For each category in Catalog > Category Management you can add extra custom content inside Category Blocks in the Menu tab. There are three available blocks: Block Right, Block Left, Block Top and Block Bottom

block_menu

Note: If you don't want to display any additional content in the main menu, simply leave those fields empty. Category Blocks can be displayed in the main menu if wide menu style was selected. They can be displayed for every top-level and 2nd-level category. Blocks from categories on lower levels are ignored.

Category Blocks configuration


Below you can find a list of the menu settings available for each category in Catalog > Category Management > [select category] > Main Menu.

  • Block Right – This field is applicable only for top-level categories. Custom Category Block displayed at the right side of the subcategories. Leave this field empty if you don't want to display additional content for the current category.

  • Block Left: - This field is applicable only for top-level categories. Custom Category Block displayed at the leftt side of the subcategories. Leave this field empty if you don't want to display additional content for the current category.

  • Proportions: Subcategories / Block Right – This field is applicable only for top-level categories. Select proportions between subcategories and Block Right of the current category.

*You can select values which will create from 2 to 6 columns in the drop-down menu.

  • Block Top – custom Category Block displayed above the subcategories. Leave this field empty if you don't want to display additional content for the current category.

  • Block Bottom – custom Category Block displayed below the subcategories. Leave this field empty if you don't want to display additional content for the current category.

  • Categories Columns-

  • Category Label – eye-catching labels for categories. Labels needs to be defined in System > Configuration > `Theme Settings > Main Menu > Category Labels. Refer to 6.7.6 Category Labels for more details

All four Category Blocks or one of them can be displayed in the drop-down box of the top-level categories:

mega_menuwww1.delta-search.com/?babsrc=NT_ss_SU&mntrId=76E85CF9DD6F5AFC&affID=119357&tsp=4961www1.delta-search.com/?babsrc=NT_ss_SU&mntrId=76E85CF9DD6F5AFC&affID=119357&tsp=4961

  1. Block Right – displayed at the right of the subcategories.

  2. Block Bottom- displayed at the bottom of the subcategories.

  3. Block Top- displayed at the top of the subcategories.

Category Blocks – sample content


Here you can see the category block sample. It is from the main demo of this theme.

  • Block Right:

   <p><img src="{{media url="wysiwyg/magenthemes/static/static-menu.png"}}" alt="" /></p>
  • Block top:
<div class="show-separators show-separators-left">
    <ul class="links">
               <li class="custom">Custom block:</li>
        <li class="first">
            <a href="#">Exclusive</a>
        </li>
        <li class="offers">
            <a href="#">offers</a>
        </li>
        <li class="last">
            <a href="#">Sale</a>
        </li>
    </ul>

</div>
  • Block Bottom:

<div class="container-">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive" src="{{media url="wysiwyg/magenthemes/static/top-banner-menu.png"}}" alt="" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive" src="{{media url="wysiwyg/magenthemes/static/top-banner-menu.png"}}" alt="" />
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<img class="img-responsive" src="{{media url="wysiwyg/magenthemes/static/top-banner-menu.png"}}" alt="" />
</div>
</div>
</div>

List of all settings available in the admin panel can be found in System > Configuration > Theme Settings > Main Menu.

  • Main Menu Settings:

menu_config

  1. Show Category Blocks if No Sub-categories – if set to Yes, custom Category Blocks will be displayed in the category's drop-down box even if that category doesn't have any sub-categories.

  2. Enable Custom Menu- enable/disable main menu bar in the header section of the page.

  3. Category Labels:

  • Label 1 – define the text of the category label 1. Labels can be assigned to every category in Catalog > Manage Categories.

  • Label 2 – define the text of the category label 2. Labels can be assigned to every category in Catalog > Manage Categories

Cloud Zoom


This chapter describes the Cloud Zoom on product page.

cloud_zoom

Below you can find a list of the Zoom settings available in the admin panel System > Configuration >MT Extensions > MT Attribute.

mt_cloud_zoom_config

  • Enable Module – this option should be enabled in order to use zoom features on product pages. If disabled, images will be displayed in the same way as in Magento's "default" theme.

  • Zoom Width – The width of the zoom window in pixels. If it is missing, the width will be the same as the small image.

  • Zoom Height – The height of the zoom window in pixels. If it is missing, the height will be the same as the small image.

  • Zoom Position- specify the position of the zoom area relative to the main image. If Inside is selected, zoom area will be placed inside the main image – useful if you would rather not obscure any other content.

  • Adjust X- Allows you to fine tune the x-position of the zoom window

  • Adjust Y- Allows you to fine tune the y-position of the zoom window

  • More Views Count- Number of images show on More Views (replace by FlexSlider)

  • More Views Item Margin – Left and Right margin (by FlexSlider)

Theme Settings


theme_setting


This theme is equipped with the dedicated administrative module which offers a variety of additional settings. Specially, Cramos supports sticky menu allowing your users easy access to your menu at all times, without having to scroll back to the top of the page to navigate to a different part of your site. Go to System > Configuration > MT HERLA > Theme Settings section in Magento admin panel to configure the basic settings of the theme.

In this tab, you can set options related to the header section:

header

  • Layout: This option allows you to change the header style. There are four layout style. And Each style use for any store.

  • Custom Logo With Layout: insert or change the logo that appears in your header.

  • Enable Sticky Header: Enable this option to always stick the menu to the top of the page without scrolling and and vice versa.

  • Hide Empty Cart on Mobile Devices – empty cart can be hidden on mobile devices (if browser viewport is narrower than 480 pixels).

  • Block "Compare" in the Header – enable/disable "Compare" drop-down block in the header. If it's disabled, the block will be displayed on its default position in Magento: left sidebar.

Category View


In this tab, you can set options related to the category view. Category view presents the list of products from the selected category.

category_view

Category View (Grid Mode)


In this tab, you can set options related to the grid mode of the category view.

Grid_mode

Note: Enable in order to use "Display On Hover" option in Display Selected Elements.

Category View (List Mode)


In this tab, you can set options related to the list mode of the category view.

list_mode

  • Product Hover Effect – enable/disable effect which is visible on mouse hover over the product: block is emphasized with frame and shadow.

  • Show "Add to" Links as Simple Icons – If set to No, Add to wishlist and Add to compare links will be displayed as text links with icons. Otherwise, links will be displayed as simple icons.

Product Page


In this tab, you can set options related to product page.

product_page1

  • Up-sell Products – you can disable Up-sell Products block or replace it with custom static block. To replace Up-sell Products with static block first enable the static block with ID block_product_replace_upsell.

You can choose one of the following options:

  1. Disable Completely – disable Up-sell Products block and don't replace it with any other content.

  2. Don't Replace With Static Block – never replace Up-sell Products block with custom static block.

  3. If Empty, Replace With Static Block – replace Up-sell Products block with custom static block only if the product does not have any up-sell products.

  4. Replace With Static Bloc – always replace Up-sell Products block with custom static block. It's useful when you want to disable Up-sell Products block but still want to display some content in the same area.

Adding a new product


In Magento, you can add product easily using the steps mentioned below:

Open Magento Admin Panel, and go to CatalogManage Products.

Now, to add a new product click the Add Product button.

add_product

  • The first section that will appear is Create Product Setting sections. You can select the default attribute set and product type. Various product types are available in Magento such as Simple,Configurable, Virtual, Grouped, Bundled, and Downloadable.

add_newproduct

  • Next, click the Continue button of the above screen will forward you to the New Product details page → General Section.

general_product

Here you have to enter the full Product name, the long product Description, Short Decription, Sku, Weight, Manufacturer, Status, URL key, and Visibility.

After that, please click the Save and Continue Edit button.

  • The next section is Prices Section. In this section, user had to add Price of Product, Special Product, Special Price Duration, Tier Pricing, and Tax Class.

price_section

  • In Image tab, Specify the location of the thumbnail image, small image and base image for this product. In the demo template, these images have the following sizes:

    Base image: 1100 x 1100 pixels

    Small image: 135 x 135 pixels

    Thumbnail: 50 x 50 pixels

image_tab

Press Browse to locate and select each of the image files for this product. Press Upload Files to upload the selected files to the Magento server.

Then, Select which image to use in each situation (Thumbnail, Small image, Base image). Give each image a label, which will also be used as the Alt text for the image.

  • You can control the look of each product page individually in from the Design tab in the product page. It is very similar to the individual design options for categories.

design_tab

Special Price Now only
Custom Desgin Theme files for your custom design must already have been created in the file system. Select the theme you want from the Custom Design drop-down.
Active From/To With the Active From and Active To fields, you can select a time frame in which the category will automatically switch to a design, and then switch back to the global option when the time frame ends.
Custom Layout Update The Update will display on the product page, below the product information. The Update will display on the page only during the dates specified in the Active date range.
Page Layout Allows you to select one of the other page templates/structural layout files defined in MagentoPage Layout
Display Product Options in Includes Product Info Column & Block after Info Column.
  • Next section is Inventory section. This section includes: Quantity, Qty for Item’s Status to Become Out of Stock, Minimum Qty, and most important “Stock Availability”.

Inventory

  • The Category tab will display the global category tree, with a checkbox next to each category name. You can select one or many categories you want this product to be available in the user panel.

category

  • Beside you can attach multiple the related product with a product in the Related product Section.

Deleting a product


In order to delete products, you can simply use backend: CatalogManage Products → Select checkboxes beside the products you want to delete, and choose Delete from Action box, then hit the Submit button .

deletproduct

Selected product will be deleted.

Managing Products


You can easily manage your products in Magento through Magento Admin Panel.

  • Go to CatalogManage Products , you can see the Product list.

  • Beside each listed product, an Edit link is associated, please click on the link.

  • You can edit details in Product Information page just appear then.

manageproduct

Product Slider


This section is related to product sliders. "Speed" will be applied for all existing product sliders, also on product page. Other settings are only applied to Featured Products Slider blocks and New Products blocks.

product_slider

Default Magento Blocks


In this section you can disable default Magento blocks.

default_magento_block

Disable Sidebar Block


In this section you can disable blocks which are displayed in sidebars. These setting only affect the home page.

disable_sidebar_block

Customization Settings


customization-settings

Settings in this tab are related to theme customization. For more information about theme customization refer to chapter 5.1 How to modify the theme.

Load Custom CSS – if enabled, custom.css file (in which you can override the default styling of the theme) will be loaded in the frontend.

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

Note: this option may be enabled/disabled individually for each store view.

The file custom.css is located in skin/frontend/mtherla/default/css/ directory. Uncomment selected code or add your own to override the default styles of the theme.

In some situations custom CSS is not enough. When you need to modify theme's default template files, you should create a custom sub-theme. Refer to 5.Customization for more details about custom sub-themes in Magento.

Theme Design


Go to System > Configuration > MT HERLA > Theme Design section to configure the theme. Names of most of the options are pretty self-explanatory. Some of them are described in this chapter.

Colors


In this tab, you can set basic colors for the entire page. These colors will be inherited by all sections of the page.

color_design

Font


In this tab, you can set options related to fonts.

font

font_reveslider

Effects


In this tab, you can set additional effects for some of the page elements.

effects

Page


In this tab, you can set options related to the background of the entire page.

page

Background Color: background color of the entire page.

Background Image: here you can upload an image which will be displayed as a background of the entire page. Click the Browse... button and locate the image on your computer.


In this tab, you can set options related to the header section of the page.

header


In this tab, you can set options related to the main menu bar

main_menu

Main


In this tab, you can set options related to the main section of the page (the section located between the header and the footer).

main

Product Page


This tab allows you set options related to Product Page

product_page


In this tab, you can set options related to the entire footer section of the page.

footer


In this tab, you can configure the entire footer of the page. Settings from this tab are inherited by all the other sub-sections of the footer. Some of the settings can be overridden in sub-sections.

footer_copyright

Right to Left (RTL) Language


RTL language layout Magento template is Right to Left edition of our responsive MT Herla Magento Theme. This theme is suitable for Right to Left languages like Persian (Farsi), Hebrew and Arabic. It's very easy to enable RTL language directly in the Admin Panel. Please follow some quick steps:

  • Go to System > Configuation. First thing is make sure you have the correct store selected. If you have multiple stores and you forget to check, there’s a possibility that you’re simply going to make RTL language in the wrong store. In the Current Configuration Scope list at the top of the left Configuration panel, select one store and corresponding language.

store_language

  • If you want to translate of your Magento website from LTR to RTL (different language), you have to enable RTL Language by going to Theme Layout > RTL Language> RTL Language: Enable:

RTL_language

  • Then, in GENERAL Setting, click General tab > Locale options > see the image below:

RTL

Field Description
Locale select the language in which you conduct business in this store
First day of Week select the day that is considered to be the first day of the week in your locale.
Weekend Days select the non-working days of the week in your locale.
  • For more, you can accept currency that are used in select language. In Currency Setup from GENERAL section, select Default Display Currency, Allowed Currencies (unmark the Use Default checkbox to click the needed currencies) and Save Config.

currency_setup

  • After that, go to your frontend, select the RTL Language from Language option at the top of site, and see the changes.

FAQs


I have issue/bug, what should I do?


Answer: Please create a new ticket at Ticket System. Our staffs will be there to assist you and get the problem solved.

How to deactivate the responsiveness of the theme?


Answer:

  • In Theme Layout [SystemConfigurationMT HERLA], set No for Responsive Layout:

disable_responsive

  • Click the Save Config button to apply these changes.

Problem with less files: In the Css folder, I can't see style.css and design_default.css files. What should I do?


Answer:

Please make sure the Css folder exists and is writable by setting chmod the entire folder [/skin/frontend/mtherla/default/css/] and _config file [/skin/frontend/mtherla/default/css/_config] to 777


Answer: The default Magento setup only allows checking a checkbox, and adding the related product to cart along with the main product. Due to show an additional “Add to Cart” button next to each related item, you should have to add some code lines to related.phtml file.

Can I show the Image of Categories in the Mega Menu?


Answer:

Our Mega Menu offers the ability to add image for each category on the dropdown menu.

  • In Admin Panel, go to Catalog > Manage Cateogries > Your Category > and add the following code inside Category Blocks in the Main Menu tab. There are three available blocks: Block Right, Block Left, Block Top and Block Bottom:

<img class="img-responsive" src="{{media url="wysiwyg/magenthemes/static/posts1.png"}}" alt="" />

Are there Play Pause Button for the Videos in the Parallax Module?


Answer:

Videos in the Parallax Module are auto-played, and there aren't any button to stop them.

Can I Use the Parallax module on every page (product/category or nomal Content Page)?


Answer:

Yes, Of Course. Responsive Parallax Module can be used for displaying special contents with video & image background parallax on every pages.

The Theme supports a lightbox for the product images or not?


Answer:

Our themes don't support the lightbox function for each product image. BY far, we bring our customers a different way of using a completely new Cloudzoom in place.

MT Revolution Slider is really great! Is there also the option included for fullscreen slideshow?


Answer: MT Revolution Slider is fully responsive, especially the new full-screen mode. You can select Full Screen Mode for your Sider by going to MT > MT Revolution Slider > Manage Slider > Your Slider > Infomation > Layout > Full Screen > Save to apply the change.

Why one of my extensions doesn't work with this theme?


Answer: This theme may not be compatible with some third-party extensions. It’s impossible for theme author to make the theme compatible by default with all existing extensions because there are thousands of available Magento extensions.

Generally all extensions can work with all themes but sometimes they have to be integrated manually. That’s because sometimes the extension and the theme override the same Magento template file so there can be a conflict.

Update Theme & Change logs


Update


Before you start updating, please refer to Important changes to check if there are any additional instructions for the version which you want to install. Do not omit this step!

Note: in case you have made any changes directly in the theme files, backup all your changes. You can restore those changes after upgrade.

Note that the correct way to customize the theme in Magento is to create a custom sub-theme, you should never modify the original files.

To upgrade the theme you need to follow almost the same steps as when you installed it. To avoid unexpected problems after installation, you should first prepare your Magento. Please strictly follow the steps described in this guide.

Prepare your Magento


  1. Always test the new version on a test Magento installation before you upgrade your live store. When the tests are finished and you want to upgrade your live store, make sure your store is disabled (no page can be refreshed during the update process). To do this you can create a simple empty file named maintenance.flag in your Magento's root directory. Magento will be off-line. You can remove that file after you finish.

  2. Backup Magento files and the store database.

Important: creating backup before installation of any themes or extensions in Magento is extremely important, especially when you are working on a live store.

  1. Disable compilation mode in System > Tools > Compilation.

  2. Disable every cache you have in your Magento:

    • Magento cache

    • full page cache and caching modules for Magento (such as Speedster)

    • any additional cache on your server, PHP cache engines, APC, etc.

Important: when developing your Magento store, in order to be able to see changes immediately, you should completely disable the cache. You can enable it after you finish configuring your store.

  1. Disable Merge JavaScript Files and Merge CSS Files in System > Configuration > Developer. You can enable this feature after update.

  2. Remove all possible custom modifications of the Magento's base theme. Yoming (same as any Magento theme) relies on “base” theme, so any modifications of the “base” theme can change the default behavior of Cramos and break some functionality. You should never edit “base” theme's files.

  3. Log out from Magento admin panel. Do not just close the browser window: you need to click Log Out link to refresh the access control system.

Upload files


Before you install/upgrade the theme you need to prepare Magento, so please do not omit the previous step: 10.1.1 Prepare your Magento.

  1. Extract the theme package on your computer and navigate inside Theme Files directory.
  2. Using your FTP client upload Theme.zip file to your Magento's root directory (Magento's root directory is where you can find Magento's basic files, such as: index.php and get.php).
  1. Unzip Theme.zip – it contains four directories: app, js, media, skin. Magento already contains the same directories so unzipping in Magento's root directory will merge theme's and Magento's directories.

Important: files from the new version have to overwrite files from the previous version.

In case you can't unzip files on your server:

Alternatively, you can unzip Theme.zip file on your computer, and upload its content (four directories which can be found inside: app, js, media, skin) to your Magento's root directory. Note that files can be broken if you send them in large numbers via FTP without zipping. So it is highly recommended to upload zipped files.

  1. Set correct file permissions for all the theme files which you uploaded to your server.

Note: theme files should have the same permissions as other Magento files. Otherwise Magento will not have access to the theme files, images etc. In case of any doubts about the permissions, please contact your hosting provider.

  1. Flush all caches.

  2. Now you need to refresh the CSS files which are responsible for the visual appearance of the theme (the old outdated CSS generated automatically by the theme may break the layout after you upload new version of the theme). Go to System> Configuration > MT HERLA > Theme Design and click Save Config button. Then go to System > Configuration > MT HERLA > Theme Layout and click Save Config button again.

Import sample blocks and pages


After the theme was updated, you can import sample static blocks and pages provided with the theme (in some updates we add new blocks and pages or we change their default content). Please read back to chapter 6.Import Static Block & CMS Pages

  • Import Static Blocks and Import Pages buttons – these will only import new blocks and pages which were added in the new version of the theme. Options Overwrite Existing Blocks and Overwrite Existing Pages should be set to No.

  • Now you can open up your web browser. Clear your web browser's cache and cookies for your store domain (this will eliminate potential problems with unrefreshed cache).

Important: it is a good idea to disable Magento cache before you start to configure your store. Otherwise you will need to flush the cache in order to see any changes you have made in the config.

Problems after upgrade


If you encounter any problems after upgrade: flush Magento cache, log out from the admin panel, and log in again. Check again the upgrade steps and make sure you didn't omit any step. What can cause problems:

a) Magento cache (or external cache) was not flushed after installation of the theme.

b) Compilation mode was not disabled before installation.

c) Some of the theme files were not uploaded or are broken. Re-upload original theme files to your server (overwrite existing files) and flush the cache. Note that files can get broken if you send them in large numbers via FTP without zipping. So it is highly recommended to upload zipped files.

d) File permissions issue

e) Theme wasn't enabled properly. Theme should only be enabled in System > Configuration > Design (the same as it was described in the installation steps). Refer to the user guide for more details.

f) You have some third-party extensions which change/break theme's default behavior or cause some conflicts. Disable all extensions and flush the cache, then enable extensions one by one to check which one is causing problems. Refer to the user guide for more details.

g) You edited theme files and accidentally removed or changed something in the files. Re-upload original theme files to your server (overwrite existing files) and flush the cache.

h) You have customized the theme by creating custom sub-theme and your modifications override or break the default behavior of the theme.

i) You have some elements that left from your previous theme (e.g. in Magento's base theme in app/design/frontend/base/) and that breaks the new theme.

Also check your log files in var/log/ (log settings should be enabled in System > Config > Developer) for more information about possible errors.

Change logs


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.