How to edit theme
- Features of using Themler Themes on PrestaShop
Theme appearance
- How to change Logo
- How to change Favicon
- Mobile Options
How to change Headline
How to manage Top Menu
How to manage Horizontal Menu
How to add Vertical Menu style
Localization
Edit Theme
After the theme has been successfully installed in the site, it is necessary to install Themler and Themler Preview modules under PrestaShop back office >> Modules tab >> Modules. In the Search form, type "Themler". Themler and Themler Preview modules will appear. Press Install for those modules.
Then the Themler tab will appear on the PrestaShop back office ribbon.
Click on the Themler tab to see the theme list. Press the Customize with Themler button under the imported theme. You will be redirected to the Themler application.
Features of using Themler Themes on PrestaShop
In order to avoid issues with applying changes to the theme, please make sure that one of the options below is enabled under the PrestaShop Advanced Parameters >> Performance:
Themler theme uses overrides. Therefore overrides should be enabled under the PrestaShop Admin Panel >> ADVANCED PARAMETERS >> PERFORMANCE:
To avoid caching issue it's better to disable "Smart cache for CSS" under ADVANCED PARAMETERS >> PERFORMANCE >> CCC:
If you have specified Shop and SSL Domains with www under PrestaShop SEO & URLs Preferences, you should access the PrestaShop admin panel with www too. Otherwise it will cause Themler to crash when you load it.
This will also occur when Shop and SSL Domains have been specified without www.
The same is related to accessing admin panel with and without HTTPS. If SSL enabled on all pages you should access PS admin panel by HTTPS. Otherwise Themler crashes with cross-origin error.
Theme Appearance
The Theme Appearance section can be found under the Preferences >> Themes tab in the PrestaShop admin panel.
Logo
Using this option, you can change the image that is displayed in the Logo control added in Themler.
Icons >> Favicon
This option allows you to change the favicon of the site that will be displayed in the browser bar.
Mobile
The Header logo for mobile option is not supported because Themler themes use the Bootstrap framework for mobile devices and there is no separate mobile theme with the configurable logo that can be controlled from within the PrestaShop back office.
This is also the case with the Enable the mobile theme option because the theme is responsive by default.
Headline Text
The Headline control text can be edited under the Preferences >> Store Contacts >> Contact details >> Shop name.
Top Menu
The Top menu is hard-coded in the theme and you cannot edit these blocks through the PrestaShop admin. All adjustments should be made through Themler.
Install Horizontal Menu
The Horizontal menu module is a special Themler module that should be activated from the PrestaShop back office. Go to Modules >> Modules and type "Top horizontal menu modification" in the Search bar. Install this module. Press Configure option to edit the menu items. Also, the Home menu item can be disabled under the Configure option.
Then also search "Top horizontal menu" and disable it to avoid design conflicts with the default PrestaShop menu module.
Vertical Menu style
The Vertical menu style is applied to the Categories block and CMS block PrestaShop modules when they are added in the Left column blocks or Right column blocks positions under Modules >> Positions within PrestaShop.
Localization
Themler themes can work with native PrestaShop translations, however translations will not be applied fully. This happens because the Themler theme consists of different controls - most of them are included in the project as separate files (themes\theme_name\includes\xxx.tpl) and some of them add new functionality.
Unfortunately, PrestaShop translation files require theme files with predefined names. Therefore, the translation file does not "see" theme inclusions and can't translate control's labels, titles, etc.
The issue with missing translations can be solved by adding custom translations manually under the PrestaShop admin panel >> Localization >> Translations:
This is were you can manage Shop front-end translations. Simply find the nodule without translations and add new:
Note: If the list with translations is completely empty, please make sure that the translation file in the theme is not empty. For example: \themes\MyTheme\lang\de.php
If the translation file is empty, please copy & replace the appropriate translation file from the default PrestaShop theme (usually default-bootstrap theme).
How to add translation for "Home" item in Horizontal Menu:
- go to the PrestaShop Modules >> Modules
- find Top horizontal menu modified module installed with the theme
- click Configure
click Translate:
choose language
- you will be taken to the blocktopmenu_mod translations
- find the "Home" expression and add translation:
How to keep my custom translation and move them to another theme/shop
All custom translations are added to the translation files in the theme directory, for example. \themes\MyTheme\lang\de.php. If you want to move your custom translations to another website, you should copy the translation file to the \themes\MyTheme\lang\ folder on another server.
Please note that if the new theme contains controls with different IDs you will need to add translations for the new controls again.
For example:
old theme:
language_1.tpl
new the:
language_2.tpl
These .tpl files are different. And translations added for language_1.tpl
will not be applied to language_2.tpl
control.
[How to edit theme](#edit)
[- Features of using Themler Themes on PrestaShop](#features_of_using)
[Theme appearance](#appearance)
[- How to change Logo](#logo)
[- How to change Favicon](#favicon)
[- Mobile Options](#mobile)
[How to change Headline](#headline)
[How to manage Top Menu](#tmenu)
[How to manage Horizontal Menu](#hmenu)
[How to add Vertical Menu style](#vmenu)
[Localization](#localization)
<a id="edit"></a>
###Edit Theme
After the theme has been successfully installed in the site, it is necessary to install Themler and Themler Preview modules under **PrestaShop back office** >> **Modules tab** >> **Modules**. In the Search form, type *"Themler"*. Themler and Themler Preview modules will appear. Press **Install** for those modules.
!prestashop-modules.png!
Then the Themler tab will appear on the PrestaShop back office ribbon.
!ps-edit-theme.png!
Click on the **Themler** tab to see the theme list. Press the **Customize with Themler** button under the imported theme. You will be redirected to the Themler application.
<a id="features_of_using"></a>
#### Features of using Themler Themes on PrestaShop
1. In order to avoid issues with applying changes to the theme, please make sure that one of the options below is enabled under the PrestaShop **Advanced Parameters** >> **Performance**:
!ps-smarty-cache.png!
3. Themler theme uses **overrides**. Therefore overrides should be enabled under the PrestaShop Admin Panel >> ADVANCED PARAMETERS >> PERFORMANCE:
!ps-disable-overrides.png!
4. To avoid caching issue it's better to disable **"Smart cache for CSS"** under ADVANCED PARAMETERS >> PERFORMANCE >> CCC:
!ps-ccc-2.png!
2. If you have specified **Shop and SSL Domains** with **www** under PrestaShop **SEO & URLs** Preferences, you should access the PrestaShop admin panel with **www** too. Otherwise it will cause Themler to **crash** when you load it.
!ps-www.png!
This will also occur when Shop and SSL Domains have been specified without **www**.
The same is related to accessing admin panel with and without **HTTPS**. If SSL enabled on all pages you should access PS admin panel by **HTTPS**. Otherwise Themler crashes with cross-origin error.
<a id="appearance"></a>
###Theme Appearance
The Theme Appearance section can be found under the **Preferences** >> **Themes** tab in the PrestaShop admin panel.
<a id="logo"></a>
####Logo
Using this option, you can change the image that is displayed in the Logo control added in Themler.
!prestashop-logo.png!
<a id="favicon"></a>
####Icons >> Favicon
This option allows you to change the favicon of the site that will be displayed in the browser bar.
!prestashop-favicon.png!
<a id="mobile"></a>
####Mobile
The **Header logo for mobile** option is not supported because Themler themes use the Bootstrap framework for mobile devices and there is no separate mobile theme with the configurable logo that can be controlled from within the PrestaShop back office.
This is also the case with the **Enable the mobile theme** option because the theme is responsive by default.
<a id="headline"></a>
###Headline Text
The Headline control text can be edited under the **Preferences** >> **Store Contacts** >> **Contact details** >> **Shop name**.
!prestashop-shop-name.png!
<a id="tmenu"></a>
###Top Menu
The Top menu is hard-coded in the theme and you cannot edit these blocks through the PrestaShop admin. All adjustments should be made through Themler.
<a id="hmenu"></a>
###Install Horizontal Menu
The Horizontal menu module is a special Themler module that should be activated from the PrestaShop back office. Go to **Modules** >> **Modules** and type *"Top horizontal menu modification"* in the Search bar. Install this module. Press Configure option to edit the menu items. Also, the Home menu item can be disabled under the Configure option.
Then also search *"Top horizontal menu"* and disable it to avoid design conflicts with the default PrestaShop menu module.
<a id="vmenu"></a>
###Vertical Menu style
The Vertical menu style is applied to the **Categories block** and **CMS block** PrestaShop modules when they are added in the Left column blocks or Right column blocks positions under **Modules** >> **Positions** within PrestaShop.
<a id="localization"></a>
### Localization
Themler themes can work with native PrestaShop [translations][1], however translations will not be applied fully. This happens because the Themler theme consists of different controls - most of them are included in the project as separate files (<tt>themes\theme_name\includes\xxx.tpl</tt>) and some of them add new functionality.
Unfortunately, PrestaShop translation files require theme files with predefined names. Therefore, the translation file does not "see" theme inclusions and can't translate control's labels, titles, etc.
The issue with missing translations can be solved by adding custom translations manually under the **PrestaShop admin panel** >> **Localization** >> **Translations**:
!ps-localization.png!
This is were you can manage Shop front-end translations. Simply find the nodule without translations and add new:
!ps-localization2.png!
**Note:** If the list with translations is completely empty, please make sure that the translation file in the theme is not empty. For example: <tt>\themes\MyTheme\lang\de.php</tt>
If the translation file is empty, please copy & replace the appropriate translation file from the default PrestaShop theme (usually *default-bootstrap* theme).
#### How to add translation for "Home" item in Horizontal Menu:
1. go to the PrestaShop **Modules** >> **Modules**
2. find **Top horizontal menu modified** module installed with the theme
3. click *Configure*
4. click *Translate*:
!ps-localization3.png!
5. choose language
6. you will be taken to the **blocktopmenu_mod** translations
7. find the "Home" expression and add translation:
!ps-localization4.png!
#### How to keep my custom translation and move them to another theme/shop
All custom translations are added to the translation files in the theme directory, for example. <tt>\themes\MyTheme\lang\de.php</tt>. If you want to move your custom translations to another website, you should copy the translation file to the <tt>\themes\MyTheme\lang\</tt> folder on another server.
Please note that if the new theme contains controls with different IDs you will need to add translations for the new controls again.
For example:
old theme:
`language_1.tpl`
new the:
`language_2.tpl`
These .tpl files are different. And translations added for `language_1.tpl` will not be applied to `language_2.tpl`control.
[1]: https://www.prestashop.com/en/translations