PrestaShop 1.5
Child pages
  • Characteristics of a front-office theme
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Table of contents

Characteristics of a front-office theme

The theme's folders

A PrestaShop front-office theme is built using the following standard folders, within the main theme folder:

  • /cache: contains temporary files that are generated and reused in order to alleviate the server's load.

  • /css: contains the style sheets.

  • /img: contains the theme's images.

  • /js: contains the theme's JavaScript files.

  • /lang: contains a sub-folder per translation, one for each language.

  • /mobile: contains the mobile version of the theme.
    Note: if you do not have time to build a specific mobile version of your theme, you can at first just rely

The main folder for the theme should have a unique name. It must be put in PrestaShop /themes folder in order to work.

The following are not theme folders, but PrestaShop folders. They are also greatly useful to explore in order to fully customize your installation of PrestaShop.

  • /mails: you should change the mail template, and make them better match the theme's style.

  • /modules: you can change the templates for the modules, in order to have them better fit the theme.

  • /pdf: you should change the templates for the invoice, delivery slip, etc., and make them better match the theme's style.

Preview image

When displaying the theme in the theme selection page of the back-office, located in the "Themes" page under the "Preferences" menu, PrestaShop displays a specific image file. This file's characteristics are thus:

  • Filename: preview.jpg
  • Size: 180*202 pixels
  • Format: JPEG (do not use GIF or PNG).

You should make that preview image very recognizable: making a screen capture of the theme's home page is the best way to catch the administrator's eyes.

Even the default PrestaShop theme has its own.

Translation files

The translation files are stored in the /lang folder.

Each file must be named with the ISO 639-1 code for its language: for instance, for French, use fr.php.

Handling translations

All of your theme's text string should be enclosed in a Smarty function, like so:

{l s='My Text'}

This will enable anyone to translate the theme into his own language, using the internal translation tool, which you can find in the PrestaShop back-office, under the "Tools" tab and its "Translation" sub-tab. In the "Modify translations" section, use the drop-down menu, choose "Front Office translation", then click on the flag of the language you wish to translate strings into. All the front-office strings will then be displayed.

h3 Transmitting data to a PrestaShop theme

The following graphic explains how data is transmitted from PrestaShop's core to its theme. Using the l() method enables the theme to display its text in the chosen language, if it has been translated beforehand.

Cached files

PrestaShop's CCC tool caches the theme's CSS and JavaScript files in a specific folder: /cache, right in the theme's main folder.

The cached CSS files are grouped into one file per page and per media.

Image files

The theme's images are to be stored in the /img folder, within the theme's main folder.

In order to improve readability, the /img may contain sub-folders for specific groups of images, such as /icons or /jquery.

Style-sheets (CSS) files

All of the theme's CSS files should be stored in the /css folder (except when cached).

A theme usually features one CSS file for all the common rules within every pages of the theme. That file should be named global.css.

Each controller has its own CSS file, which contains all the rules that are specific to its page. For instance, for the product page, handled by the Product controller, the default theme has the product.css file.

JavaScript (JS) files

All of the theme's JS files should be stored in the /js folder (except when cached).

Unlike CSS, there is no "common" file for JavaScript code.

Not all controllers have their own JS file. Each has its own needs, and therefore some have their own JavaScript files, some do not.

Mobile version of the theme

You can (and should) provide a mobile version of your theme. PrestaShop 1.5 is built to automatically use

All of its files should be in the /mobile folder, within the theme's main folder.

The /mobile sub-folder has its own set of CSS, JS and image files, respectively stored in the /mobile/css, /mobile/js and /mobile/img folders.

 

  • No labels