Structure of a Default Theme in Prestashop

Creation of a new template is quite labor-intensive. There’s good news, however: this process appears to be a piece of cake if you know the structure of a default theme in Prestashop – the one you see on your fresh website right after installing the store. We’ll guide you through it. You’ll find out where to find the files of the main theme and how to create a basic structure of the website.

The main theme that you see after installing the store is located in this folder:

themes/default

This folder contains:

• TPL files of this template
• The folder /css – CSS STYLES
• The folder /img – IMAGES
• The folder /js –  JAVA SCRIPT
• The folder /LANG – LANG translations
• The folder /modules contains templates, styles or scripts of the modules
• The folder /MOBILE – the shop’s mobile theme
• The folder /pdf – pdf documents
• Preview.jpg is the theme preview which will be displayed in the back office

So you want to develop a new template. The first thing you should start with is to create the basic structure of the website. We will describe a default 3-column layout.

The files HEADER.TPL and FOOTER.TPL are the header and the body of our HTML structure. To avoid errors you need to constantly keep in mind that the main column is closed in the footer.

For better semantics we will use HTML5 tags. By default they are not used in the theme at the moment and instead there are DIV blocks. Do not forget to change DOCTYPE to DOCTYPE HTML in this HTML5 template.

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Vlad

Our HEADER contains the logo of the website as well as the right-hand column heаder_right which outputs additional blocks of the website such as search, header links,  сurrenсies, languages, shopping cart, user info – they are modules. The last block in the header is our site’s main menu sf-menu.

The id= “columns” contains left, right and central columns as well as the break HEADER.TPL which continues to FOOTER.TPL that contains our right column and the footer.

So, the markup of the structure is ready. Let’s check the CSS files now. At the moment we are interested in global.css and grid_prestаshоp.

Global.css contains the majority of styles as well as the reset so here we will need to make the main changes. As we are making a 3-column layout we need to prepare styles for each column. You might have noticed that each block has its own class which indicates its width grid_9 and this width is defined in grid_prestаshоp.css.

This grid system works as follows: if the maximum number of columns is 9, then we can divide grid_9 into 3 blocks: grid_2 (left-hand column), grid_5 (center column) and grid_2 (right-hand column). So this makes the total amount of columns as 9.

The right-hand column in the header has the class grid_6 which means that it takes 2/3 of the header and additionally has the class OMEGA which indicates the location of this block and the alignment in the right part of the site. The Omega class resets our right margin, so the Alfa class resets our left margin respectively.

Such system allows us to easily change the width of the site. For example if we change the width of grid_9, then all the blocks having this class will be of the same width, so we will not need to rewrite it for each block. That is the advantage of this system. The same way it can be applied when creating an adaptive markup.

The class clearfix decorates the blocks to undo previous changes.