Customizing PrestaShop Theme Part 2

(For more resources on PrestaShop 1.3, see here.)

Let's move on with our next step.

Of course, exploring every tab in the back office would be advantageous, but we will specifically touch only those points that will affect your theming process. We will now look at how we can modify the following:

  • Logo
  • Top of page
  • Adding FEATURED PRODUCTS block
  • Footer
  • Title
  • Placing the other modules useful for your store on other section of your pages.

Before going further, I would like to emphasize two important points. They are:

  1. Always work on a copy of your default theme:
    • If you have not copied the default theme file, I would advise that when you start your development work, you copy the default theme file so that you have a backup or a comparison to work with.
    • We will be working on the copy of the default theme, as in some cases, we will still change a few lines of codes to modify the theme. This means that if you ever make a huge blunder, you will at least have the original to start with again. If the worst ever happens, you can always upload the original file again to overwrite your errors, but that will be a big waste of time.
  2. Keep a quick reference list of any modifications made to any file:
    • It may sound a bit tedious, but you will find this advice useful to heed. There are a few ways of making modifications to your theme, sometimes through modification of your other files (which are not in the theme folder).
    • You may copy the file and put it into the theme folder to make the changes, or it is also possible to merely modify them by overwriting the file in its location.
    • Whichever way you chose, when you need to modify files which are not in your custom theme folder, you should make a quick note of what changes you have made and where have you made them.
    • Why? Because when there is a new version of PrestaShop, you will need to upgrade your PrestaShop site, thus the modifications you have made will be lost. The modifications in the theme folders will remain even if you update the version of your PrestaShop site.
    • By keeping a list of the modifications you've made, it will be much easier to track back to where to re-apply them after you have upgraded your PrestaShop installation.
    • Never procrastinate on making this quick list because you will always find that it is a waste of time to find and trace those changes later; even just six months down the road.

Copying the default theme file

When you download PrestaShop, by default, you will have a copy of the PrestaShop theme folder.

Go to the PrestaShop_1.3.1/themes/PrestaShop folder. Copy this entire folder and save it on your computer. You may rename the theme accordingly, for example, theme1. Compress this into a ZIP file.

Upload the renamed folder into the themes directory on your hosting through your cPanel or FTP.

You will now have two themes in your /themes folder which are PrestaShop and theme1.

You can now log in to your PrestaShop Back Office | Preferences | Appearance and switch to your theme1 that you just installed and click on the Save button.

On this page, you may also control what logo, favicon, and the navigation pipes you want to use throughout your website.

Now, let's start with the modification of these theme elements to complete the look of your new theme.


A logo is an important element of a company's or store's image, and it can contribute to the brand's marketing success. Therefore, getting a good quality logo is fundamental for the business.

Getting a unique and attractive logo design can be daunting, especially for those who are not born with a flair for design. However, fortunately, there are various resources that you can use to get ideas or even create a very professional looking logo that you can use in your new online store.

Some online resources for logo designs can be found at:

  •—This is an online resource that allows you to freely create a logo, but you have to pay to download your new creation, which basically uses their online inputs. Quite attractive and interesting looking logos can be found and designed here.
  •—This one describes itself as A free graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work. It allows you to choose the image you would like through a few simple steps. You only need to enter the words or company name using a form and you'll have your own custom image created on the fly. The logo you designed is downloadable for free.
  •—This is a Web 2.0 logo generator. Free to use and download. It requires you to fill in a few fields and generates the image file quite easily. However, the background is limited to RGB flat choices and you only have 23 images that can be chosen from to insert.
  • - A full featured free online logo design tool with a clean and easy interface and thousands of logo templates

Another element, which is quite important here, is the favicon. The Favicon is the little icon representing the website you are visiting which gets displayed in the address bar of every browser.

Usually, the favicon and the logo are the same thing, except for their sizes and the formats.

They are not necessarily the same though. You may find some online resources that you can use to generate a favicon for the store. Make sure you have prepared the favicon icon before you try to replace the current favicon.

If you are unsure of how to go about making a favicon, you may generate it online (using, or Save the file on your hard drive and then upload it to your PrestaShop store. Uploading it is shown in the next section.

Time for action—Replacing the default logo and favicon on your site

  1. The logo and the favicon can be replaced through Back Office | Preferences | Appearance, as shown in the following screenshot:



  2. Browse the file you want to use from your computer.
  3. Upload the files and click on the Save button.
  4. You need to refresh your back office browser before you replace the logo and the new favicon.ico file.
  5. You also need to clean up your browser's cache and refresh the browser to see the favicon in the frontend of the website.



  6. Upon saving and refreshing your browser, the updated images will be displayed.

What just happened?

In this simple exercise, you have just uploaded the logo that you had created, and PrestaShop has, by default, placed it in the correct directory in your new theme1 directory through the back office panel.

If you did not choose the new theme, for example, theme1 in Preferences | Appearance under Themes, the logo you upload will go to the wrong directory.

The Center Editorial Block

The Center Editorial Block is where you see the main image at the center column, as we indicated previously in the front office.

This is an important block, as this is where your visitors first arrive when they visit your store. It gives a first impression to your site visitor, and therefore, you need to consider what to include in it very carefully.

Time for action—Modifying the Center Editorial block

The Centre Editorial Block can be modified through Back Office | Modules | Tools | Home text editor.

In this section, you can also edit the Centre Block image, which is referred to as Homepage's logo, and this title can be quite misleading as it may be confused with the actual logo. However, we have covered this matter in the previous article and did a mapping of each field here to the front office page of the store.

You only need to upload the image you want to replace it with and continue with editing the Homepage logo link, which is the link for this image (Homepage's logo). You may just leave it set to your current website address if you want (for example, You can also leave it blank if you don't want the image to be a link.

Furthermore, you will see Homepage logo subheading, which is the small letters you see on the default theme page that appear under the image.

Let's replace the Homepage's logo image, Homepage logo link, and a new Homepage logo subheading:

  1. Click on the Update the editor button.
  2. Review your changes in your front office browser.

  3. You will need to refresh the page once to see the effect.

It is possible to work with different image sizes, but the width of the image will "disturb" your column settings. If you are not going to make any unnecessary changes, then it is best to use images of the safe maximum width for the center column which is 530 pixels. If you exceed this width it will push your right column outside the standard browser view. Now let's have a look at what you have achieved so far.

What just happened?

You have modified your Center Editorial Block by inserting a new Homepage's logo image, Homepage logo link, and a new Homepage logo subheading.

Top of pages block

We will look at the header section of the page. The default layout comprises the following in the header section:

  1. Currency block (links to the available currencies used on the site).
  2. Languages block (links to the available language translation of the pages interface).
  3. Permanent link block:
    • Contact (icon that links to the contact form page)
    • Sitemap (icon that links to the sitemap page)
    • Bookmark (icon that helps you bookmark a particular page on the site)
  4. Search block
  5. User links block:
    • Your Account (icon that links to the login page or registration page). When logged in, it links to the account page that lists everything the customer can do with their account. It is only when the viewer is logged out that it links to the authentication page
    • Cart (icon that links to the shopping cart summary page )
    • Welcome, Log in (links to the login page or registration page)



Time for action—Modifying the Top of pages

To get these elements back on the pages, you will need to install and enable the relevant modules. These simple steps will need little modifications unless you want to add a new currency and a new language.

Let's enable these modules through these simple steps:

  1. Currency block—go to Modules | scroll down to Blocks | Currency block.
  2. Languages block—go to Modules | scroll down to Blocks | Language block.
  3. Search block—go to Modules | scroll down to Blocks | Quick Search block.
  4. Permanent link block—go to Modules | scroll down to Blocks | Permanent links block.

By default, these modules tend to appear on the pages in the order you installed and enabled them. The first one will appear the leftmost while the last one will be the rightmost. You can shift the arrangement by installing them according to what you want to appear on the leftmost or the rightmost sides. Notice that the Permanent link block is on the right as we enabled it last. There is an easier way to do this as well, which we will cover in the next section.

You can modify this by working on the position of the modules within the Top of pages hooks.

There are two similar hooks, which can be quite confusing, that is, the Top of pages and Header. The blocks are positioned or "transplanted" in a Top of pages hook and not Header of pages.

The Welcome, Log in, Cart, and the User login links can be enabled through Back Office | Modules | Blocks | User info block. Upon installing and enabling the module, you will have the Welcome, Log in, Your Account, and Cart link displayed on your front office. By default, all those are automatically hooked to the Top of pages once they are enabled. If it is not, you can have it hooked through transplanting the module to the hook, as shown in the next screenshot. This can be done by following these simple steps:

  1. Go to Back Office | Modules | Position | Transplant a module.



  2. Choose the Module you want to transplant from the drop-down menu.
  3. Choose the hook from Hook into, the one you want the Module to go into.
  4. Click on the Save button.

The arrangement of the blocks can be done by moving them around within the hooks, which we will see next.

Go to Modules | Positions. There you can arrange the position of the modules within the hooks by dragging each of them to the required position. As you can see, there are the two similar hooks which may be confusing, namely, the Header of pages and the Top of pages.

Compare it with what you have at the front office in the next screenshot.


The Quick Search block does not appear despite it being hooked at the Header of pages. The other blocks which are hooked to the Top of pages are displayed in the front office. The same thing with the User info block; you only see the one which is hooked to the Top of pages and not the one in the Header of pages.

The Top of pages hook is used to display a module at the top of the page. The Header of pages hook is used to put code in the <head> tag of the website. If you want to move a module or delete it from the top of the page, you should use the Top of pages hook, not the Header of pages hook. Modules that are in the Header of pages hook should not be removed, since they are required for the module to function correctly. For example, if you remove the Quick search block from the Header of pages hook, the search autocomplete will not work, since the code for it is missing. The resulting JavaScript error will also cause other problems on the website such as the Categories block not displaying any categories.

To move the modules to the left or right, you need to move them up within the hook. The lower it is within the hook, the more to the right the module will appear, whereas the upper within the hook will be displayed on the left. For example, the Currency block is first in the list, and it is displayed on the left of the Top of pages section on the webpage.

What just happened?

You just learnt the differences between the hooks Top of pages and Header of pages in PrestaShop. You also get to modify the blocks you want to use on the top of the page and how to move them around within the hook.

(For more resources on PrestaShop 1.3, see here.)


The FEATURED PRODUCTS block is the one below the Center Editorial block.



This block can be enabled through Modules | Tools | Featured Products on the Homepage v0.9.The default number of featured products is ten. You can add more if you have a lot of items to feature by changing this amount.

What you want to do now is to add the products (and their images) to this featured block.

The location of the images file would be in the image folder / PrestaShop/img/p/.....jpg
When you upload the image files on the product page, it will be saved into the particular folder which is not in the theme folder. Therefore, if you change to another theme, the product images will remain.

To ensure that a product is displayed on the FEATURED PRODUCTS block, it is imperative to have it appear on the home and on the particular category.

Time for action—Adding the FEATURED PRODUCTS block

The function of the FEATURED PRODUCTS block is to highlight certain products on your home page. We will now install the FEATURED PRODUCTS block:

  1. Go to Back Office | Modules | Featured Products in the home page module.
  2. After you installed and enabled the FEATURED PRODUCTS block, you will need to configure it.
  3. When you click on >>Configure, you will be directed to the following page:

The default number of featured products that will be displayed in the FEATURED PRODUCTS block in your front office is four, but as previously mentioned, in the back office it is stated that the default number of featured products allowed is 10. This setting can be modified at any time, should you ever decide that you want to change the number of featured products.

What just happened?

You have just enabled the FEATURED PRODUCTS block.

Time for action—Adding an item as a Featured Product

To add FEATURED PRODUCTS to your front office home page, perform the following steps:

  1. Go to Back Office | Catalog | Categories | and scroll down to Products in this Category.
  2. If you are using the default theme, you will see a list of product items that you can edit.
  3. Click on the pencil icon next to one of them (the edit icon on the right).
  4. You will be directed to the particular product page. Here, you will see a number of tabs within the page. The next screenshot illustrates what you will see in the back office:



  5. By default, this part opens with the Info tab as the landing page. This is quite a long page and you will need to scroll down to the Catalog section.

  6. In the Catalog section, mark the Home checkbox, as shown in the preceding screenshot. Here you can also enable the box setting where the new item should be categorized.
  7. Scroll down further, and click on the Save button. The item will now display in the FEATURED PRODUCTS section of your front office home page.

It is not necessary to change the default category to Home for the product to appear as a featured product. By enabling Home, it is sufficient for it to be displayed in the FEATURED PRODUCTS block.

It is better to make another category (apart from Home) as the default category for the product because the default category is used in the breadcrumb bar and friendly URL for the product. If you disable Home, it will only appear on the product page and not in the FEATURED PRODUCTS block (that is, on the home page).

As mentioned previously, in the default theme, there will be a maximum of ten items displayed in the FEATURED PRODUCTS block at any one time. In order to increase FEATURED PRODUCTS items, you need to configure it accordingly. This will allow you to have more products, and you will have to add more items and information in your product listing. We will cover how to add a product listing to your store in later sections.

To remove a product currently displayed on your online store home page, you need to disable the box next to Home in the Catalog section of the particular product's admin product page.

When you add an item to display on the FEATURED PRODUCTS block, by default, the last item will appear to the right of the block. If you want to re-arrange the position of the product featured, you can perform the following steps:

  1. Go to the Back Office | Catalog | and scroll down to Products in this Category.
  2. Go to the Position column and when you move your cursor on it, the four arrow will appear, drag the product that you want to sort to the position you prefer.



What just happened?

You just learnt how to add the products to the FEATURED PRODUCTS block on the home page.

Time for action—To edit, display, or delete a Featured Product

At some point you might change your mind and want to edit the information of your FEATURED PRODUCTS block; you can do a few things such as editing, deleting, and turning on and off the display. Editing and deleting is pretty straightforward - you just need to click on the edit icon and the delete icon respectively.

You can display the product or turn it off by clicking on the button on the right under the Displayed column. If you turn off, a product it will not be displayed in the FEATURED PRODUCTS box. It will appear in Category or Manufacturer listing when someone clicks on, say, Laptops (if it is listed under Laptops category) or the manufacturer's name.

Time for action—Adding a new product in your FEATURED PRODUCTS block

There are a few key things you may want to set prior to adding new products to your FEATURED PRODUCTS block:

  • Information on the manufacturer (optional, but necessary if you use the Manufacturers module in your store)
  • An image for the product

Now let's perform the following steps:

  1. Go back to Back Office | Catalog | and scroll down to Product in this Category.
  2. Click on the Add a new product button. It will open a new page, which has two tabs (Info and Images), as shown in the following screenshot:



  3. Fill the necessary fields. Go to the Default Category enable the box next to Home. This was similar to the process when we wanted to include the products into the FEATURED PRODUCTS block section.

The FEATURED PRODUCTS block will show all the images that are at its maximum value in its configuration.

For this example, let us assume that you have six products which are set to be featured at the FEATURED PRODUCTS block. And, you had configured the FEATURED PRODUCTS block to display eight items. It is best that you match the number of items in the row (in this case four items per row), so that it does not look incomplete as there will be blank spaces in the block as shown in the following screenshot:

What just happened?

You learnt how to add more new products to the Featured Product block.

(For more resources on PrestaShop 1.3, see here.)


Now we will work on the footer block. Go to the Back Office | Modules | Blocks | Footer links block. You will notice in your front office that a few links are enabled by default. They are the Specials, New Products, Top Sellers, Contact Us, and Powered by PrestaShop. These will be covered later in this article.

The links shown in the following screenshot are controlled by configuring the footer module through the back office. The checked items are those added to the default footer links and they will be shown on your front office browser. To display the rest, just tick the check box on the left.

So, how do you add a new link, which is not in the configure list, of the footer?

Time for action—Adding new pages on the Footer Link block

Let's add a new page to your footer.

  1. Say you want to have a page on privacy policy, which you will call Privacy.
  2. Go to Tools | CMS, and click on the Add new button.



  3. You will then be directed to a new page where you can create a new content page.



  4. Fill out the information, and click on the Save button.
  5. You will see this new page on the list once the creation is successful. However, this page is not linked to any blocks yet. If you want this page to be linked to in the footer, you will need to enable it in the Footer Link module.
  6. Go back to Back Office | Modules | Blocks | Footer links block, enable the boxes, click on >>Configure and check the box next to the Privacy Policy and then click on the Update button.

  7. You will be able to see it on your footer link at the front office.

What just happened?

We just added a new link to the footer block.


The title is what you see on top of the browser. It is an important part of your website, especially if you want your website to be found easily through search engines. Therefore, you must consider what should appear there carefully.

Time for action—Modifying your page title

In order to modify your page's title:

  1. Go to Back Office | Preferences | Contact.
  2. Enter the title to your store in Shop name field. This will appear on the top bar of your browser. This will also be the name that appears in your e-mails.

This choice of title is an important part of search engine optimization and some search engines look for this information when they rank your pages.



This is how it appears on the front office.



If you want to change the title for this index.php page within your store, you will need to make adjustments to the Meta-Tags as follows:

  1. Go to Back Office | Preferences | Meta-Tags.



  2. Choose the page index.php, and click on the edit icon on the right (the pencil icon).



  3. Enter the Page's title. In this example, we have entered in Shop till you Drop!. Then click on the Save button.

The next screenshot shows what happens in the frontend.



By default, for the products page, the page title will show the main page title and the product name.

The shop name and product name is displayed in the title bar if a meta title isn't specified. The meta title changes the title bar only, not the product name or heading, which is always the product name.



If you want to change the page title to something else, you will have to edit the meta title of the product page. You can change the title of the products by performing these simple steps:

    1. Go to the Back Office | Catalog | and scroll down to the Products in this Category.
    2. Choose a product, and click on the pencil icon.
    3. Click on Click here to improve product's rank in search engines (SEO) to change the Meta title.



Let's assume that you want to add something other than the product name to the title of the product page.

  1. Enter the Meta title, and click on the Save (or Save and Stay, if you want to continue editing this page after saving) button. The next screenshot illustrates what you will see in the front office:

What just happened?

You modified the page title of the main page and the product page.

Modules block

Now that you are getting familiar with the modules tab, you may be interested to know how to modify the modules name or what appears on the front office in the module block. For example, you may want to change the name of the INFORMATION block to FAQS.

Time for action—Modifying block names

  1. Go to Back Office | Tools | Translations.
  2. In the Modify translations section, all parts of the translation are listed in a dropdown menu. You need to select Modules translations.



  3. Next, click on the particular language flag icon. For example, click on the American flag for English. You will have to browse through the listing for the expressions you want to change. Imagine that you are looking to change the INFORMATION block to FAQS, which initially looks like the following screenshot:

  4. Go to prestashop-blockinfos-9 expressions. Enter the word you want to replace; in this case, Information is replaced by FAQs.



  5. Finally, click on the Update translations button.

What just happened?

Here we learnt how to change the name of a block. In the previous exercise, you modified a block name from INFORMATION to FAQS.

Have a go hero—Removing the "Powered by PrestaShop" at the footer link

We have not really started looking into the PrestaShop files. Nevertheless, this is a minor edit that you can easily perform without much technical knowledge.

You may need to remove the Powered by PrestaShop located at the footer link. Removal of this link is often requested by clients. You will need an editor (such as Notepad or Dreamweaver) to open and edit the correct file to remove the Powered by PrestaShop line, as you cannot do it through the back office panel.

There are two ways of "removing" the Powered by PrestaShop line.

The first method involves editing or removing the line. This can be done by looking up and removing the relevant lines within the blockvariouslinks.tpl file.

The file is located at: /modules/blockvariouslinks/blockvariouslinks.tpl.

Copy this particular file to your themes folder. You should have this kind of link to the blockvariouslinks.tpl after you have copied it to the theme file (in this case, the theme folder name is theme1; you have to find it in your own theme folder).

For the theme1 that I have, the file path should look something like this:


You will have to look up your own theme file accordingly.

Look for this code in the blockvariouslink.tpl file:

<li class="last_item">{l s='Powered by' mod='blockvariouslinks'} 
<a href="">PrestaShop</a>&trade;</li>

After removing it, save the file.

Another method of "removing" the link involves not deleting the lines but commenting them. This is common for those familiar with the HTML method of commenting on files. This is particularly useful when you need to look back at your files later as you will find it much faster to decipher the code in your pages.

To comment out lines in HTML, you can insert the starting comment tag, which is <!-- (that's the 'lesser than' sign followed by an exclamation mark and two dashes) and the ending tag, which is -->. The browser does not display any text placed between these tags.

However, a better solution in PrestaShop is to use the Smarty comment tags {* and *} instead of the HTML tags <!-- and -->. By using Smarty comments, the code is ignored when the HTML is generated.

When you use <!--and -->, the code is still visible when you view the source of the website and is unnecessarily downloaded.

Although it is allowed by PrestaShop to delete the whole line, commenting it out is a good choice, both as a reference for future editors and as a way to maintain the information intact in acknowledging the developers' effort in their free contributions to your final work.

In the end, the line would look like this.

<li class="last_item">{l s='Powered by' mod='blockvariouslinks'} 
<a href="">PrestaShop</a>&trade;</li>

You can also modify or delete the code we mentioned and instead replace it inserting
<!--Powered By PrestaShop--> or {*Powered by PrestaShop*}


We have covered the following modifications of the default theme through back office in this article:

  • Modifying the logo
  • Modifying the Center Editorial block
  • Modifying the header
  • Modifying the Featured Product
  • Adding a new item to the Featured Products block
  • Modifying the footer
  • Modifying the titles
  • Changing a block's name
  • Removing "Powered By" by editing the code

Further resources on this subject:

You've been reading an excerpt of:

PrestaShop 1.3 Theming - Beginner's Guide

Explore Title