PrestaShop 1.3 Theming - Beginner's Guide: Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps

Let's have a look again at your current storefront and how the theme is governed by the back office control panel.

By looking at the screenshot, you can tell which back office items you need to modify, replace, or set according to your needs.

The basic layout outline can be seen in the following screenshot:

Besides the back office control over appearance, as shown in the previous chapter, our theme is also affected by the modules that control the functionality of your store. At this stage, we will be working on the existing modules in PrestaShop. This is where you decide whether your site visitor will see the product categories, the top selling products, your product listing, the specials, your featured products, and so on. If you run an e-commerce store with a payment option that links automatically to a payment gateway, you may want to study a bit more about each of these modules as well.

You will also notice that the default theme uses a three column layout with a header...

The Modules tab allows you to control the modules you want to use in the store. You will be able to transplant the modules and move them around according to the site navigation you want, considering some limitations at this stage. You can move them up or down in the columns. You may also position them in the left or the right column or you may disable them. You also have the option of adding a new module or choosing ones that are available from the PrestaStore. PrestaShop has some already installed modules, and the number of newly developed ones is growing every day.

Now let's move on to Back Office | Modules, as shown in the following screenshot:

We will go into the listing and get some ideas on each one. However, we will focus in greater detail on the modules that affect theming directly.

Among the existing modules in this version (PrestaShop 1.3.1), which are readily available for installation, some of them are:

In order to make the modules work, you will have to check if it is installed and enabled. When you see the word Install on the rightmost portion of each module, it indicates the module is yet to be installed. In PrestaShop, when a module is installed, it is automatically enabled.

The following screenshot shows an example of the installed and uninstalled states.

By simply clicking on the Install button, we have installed and enabled the modules. Note that some modules will require further configuring, while others work fine automatically once they are installed. The green tick indicates enabled modules.

Before we start installing and enabling modules, let's learn two important terms that you need to understand in PrestaShop's modules. They are as follows:

Hooks

A hook is a place where the module code can be inserted. In the back office, hooks are shown in a block that comprises a few modules installed within it. As an example, the right column blocks is a hook, which is like a housing for the four modules (Cart block, New products block, Top seller block, and Specials block) as shown in the following screenshot. It is possible to change the order of these modules that have been placed within the hook.

Transplanting modules

Transplanting a module is enabling the module to be displayed in a different hook.

For example, once you have installed and enabled a New products module, it will be hooked to the right column, as a default position. When you transplant another New products module, you will have to specify where to hook it.

If you transplant another one...

You will note that some modules are automatically set and need little configuring to be able to be used and viewed by the site user.

One of the key modules in the center column, that you will need to work on, is the Home text editor module, as shown previously (this was referred to as the editorial block). Now, let's get started with installing this module.

The Main title appears at the bottom of the home page logo. It is also set as the Homepage logo's alternate tag, not the title...

You will need to install the chosen blocks using the following steps:

Having the Maximum depth of the Categories block of 3, you may have the following within your Categories block:

There are a few ways to position a module through the PrestaShop back office. This also depends on the expected navigation of your web page. As mentioned, modules are, by default, positioned in particular sections of the page (or hook).

Here you will see a list of hooks (blocks) that you have installed and the modules within them.

Let's take an example of the right column block. You can see a list of modules, which are within the hook in the following screenshot:

Here you have the Cart block, the New products block, and the Top seller block. In this list, click on the up and down icons to change the module's display order. More details on this will be provided in the next section.

The default positions of the blocks when they are first installed are shown in the following screenshot. Now, let's try moving the blocks to a different location.

We will try to do the following:

We need to perform the following steps:

Specifically, using the layout settings of the PrestaShop default theme, we covered how to make the following through minor adjustments from the back office without much technical knowledge being required:

In the next chapter, we will cover how to set up the key elements in your store through configuring the module blocks including setting up the editorial block, the Featured Products block, and the Catalog function from the back office. You will also work on the other key module blocks, the top, header, footer, logo, and so on. All these complete the look of the store and will be covered when working on the back office administration. Also, we will get a sneak-peek at customizing the theme files.