Customizing PrestaShop Theme Part 1

Exclusive offer: get 50% off this eBook here
PrestaShop 1.3 Theming – Beginner’s Guide

PrestaShop 1.3 Theming – Beginner’s Guide — Save 50%

Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps

$23.99    $12.00
by Hayati Hashim | July 2010 | Beginner's Guides e-Commerce Open Source

This article by Hayati Hashim, author of PrestaShop 1.3 Theming Beginner's Guide, covers the ways to modify the general layout of the PrestaShop’s theme. Here, you will be guided on editing the theme and playing around with the modules. You will get to know terms such as hooks, transplanting, and positioning.

Specifically we will cover:

  • Installing and enabling module blocks
  • Adding the module blocks in the columns
  • Transplanting modules and hooking modules
  • Moving modules within columns
  • Updating the editorial block in the center column.

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

The most basic level is using the back office panel to customize the layout. Using this knowledge, we can make some quick and easy changes without having any technical knowledge.

If you need more advanced changes than what can be achieved here, you will need to edit the theme and the CSS files, which will be explained in the next article on Customizing PrestaShop Theme Part 2.

It must be noted that all design changes that you can do in this back office can also be achieved through customization on the theme files (which involves editing of the file's markup) too. Although knowledge of this theme editing approach encased that of the back office setting, it is useful to know that there are reasons to choose the latter option with no "hacking" of scripts even if you are an advanced user as there could be some issues when you have to update to the next PrestaShop version. You will have to update some of these modified files as these changes may not be automatically included in the newer version.

We have to decide what kind of layout we would want, just like the interior design space of a building that you are erecting, you need to visualize the spaces and how users will navigate your retail outlet.

You will also need to know what kind of resources can help the successful function of your store, customers in real brick-and-mortar stores do not have to ask a lot of questions as they are prone to browsing the items while having the advantage of feeling, smelling, holding, or trying the items at the same time. While this is true for a real store/shop, the online store does not have this advantage. So, consider features/functions that can be a "replacement" to this disadvantage, such as a 30 day return policy.

In a real shop, customers may ask questions at the customer service desks. The same thing can be done with your online store; you can add a lot of information that your customers may need while balancing it with a good design, navigation, and browsing experience. This will ensure that the customer finds the information and this reduces the need to repetitively answer the same queries. This is one of the main reasons why an online store exists, which means that information can be obtained easily 24x7.

Therefore, in an online shop, you will have to decide on what kind of features you want to introduce, for example, one block for product information, another for customer service information where they can get information on return policy, how to make payment, and so on.

This is just a background that is needed to decide the functions of your store. We will not be discussing about what makes a good navigation or whether one way can be more effective than another. We will learn about how you can use the knowledge about theming for PrestaShop-based stores to build your online store or if you are a web designer, your clients' online stores suitable with the stores' concepts. You will also learn how to go about in applying the necessary modules to complement your theme setup.

Before we start this article, you should get acquainted with the back office panel. This will help you understand what we are exploring here.

In this article, we will be sticking with the default PrestaShop theme and learn how to:

  • Install, uninstall, enable, and disable module blocks in the center, left, and right columns.
  • Transplant and position modules by moving them to columns and within the columns.

The default layout

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, 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 in the top block and a footer at the bottom. Through the back office panel, all the default blocks on the left and right columns can be moved or transplanted interchangeably.

Some of the blocks in the header (top blocks) can be moved into the left column or right column. The featured product block and the editorial block, which are at the center column, are pretty much stuck in this position.

Modules

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:

  1. Advertisement – 1 module: Google Adsense.
  2. Products module – 6 modules: Cross selling, RSS products feed, Products Comments, Products Category, Product tooltips, Send to a Friend module.
  3. Stats Engines – 5 modules: Artichow, Google Chart, Visifire, XML/SWF Charts, ExtJS.
  4. Payment – 8 modules: Bank Wire, Cash on delivery (COD), Cheque, Google Checkout, Hipay, Moneybookers, Paypal, PaypalAPI.
  5. Tools – 14 modules (but only 12 modules listed): Birthday Present, Canonical URL, Home text editor, Customers follow-up, Google sitemap, Featured Products on the homepage, Customers loyalty and rewards, Mail alerts, Newsletter, Customer referral program, SMS Tm4b, and Watermark.
  6. Blocks – 23 modules: Block advertising, Top seller block, Cart block, Categories block, Currency block, Info block, Language block, Link block, Manufacturers block, My Account block, New products block, Newsletter block, Block payment logo, Permanent links block, RSS feed block, Quick Search block, Specials block, Suppliers block, Tags block, User info block, Footer links block, Viewed products block, Wish list block.
  7. Stats – 25 modules: Google Analytics, Pages not found, Search engine keywords, Best categories, Best customers, Best products, Best suppliers, Best vouchers, Carrier distribution, Catalog statistics v1.0, Catalog evaluation, Data mining for statistics, Geolocation, Condensed stats for the Back Office homepage, Visitors online, Newsletter, Visitors origin, Registered Customer Info, Product details, Customer accounts, Sales and orders, Shop search, Visits and Visitors, Tracking - Front office.

You should also see an Icon legend on the right that reads the following:

Apart from these three options of installing, enabling, and disabling, you may also add new modules using the button on the top-left corner of the module tab.

There are also plenty of third party modules that can be used to make the store more interactive and attractive. Discussing about them is not within the scope of this article.

PrestaShop 1.3 Theming – Beginner’s Guide Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

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

Time for action—Installing and enabling modules

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.

Have a go hero—Choosing the modules to install

It is best to start with a blank page. So, what we will do now is disable all the modules by clicking the green check button so it will turn into the disabled state again.

When you begin to modify your default setting in PrestaShop, you may want to know how each installation affects your store. It is best to reset the installation to the maximum by disabling modules to avoid confusing yourself.

To make things easier, you can also uninstall them all. This can be done speedily by checking all the modules, which are already installed and go to the bottom of the page of the modules to uninstall them. Click on the Uninstall the selection button, and they will be uninstalled.

Don't panic when you get a blank page on your front office. You may only be seeing a blank page plus the logo, which is controlled by another admin tab.

Positioning 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:

  1. Hooks
  2. Transplanting

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 within the same column (the right column), you will have two of the New products modules there. You can also transplant a New products module within the left and right column if you want to, but that will not look right.

You need to install a module to be able to transplant it. A disabled module can still be transplanted and moved up or down within a column. It just won't be displayed in the front office. We will go into this in greater detail after we learn more about installing the modules.

Time for action—Installing the Home text editor module

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.

  1. Go to Back Office | Modules and scroll down in the Tools block.
  2. Look for Home text editor v1.5.
  3. Click on the Install button for this module, and click on >>Configure. You will get the center block and the text that you may want to edit and configure accordingly. You will see the following:
    • Main title
    • Subheading
    • Introductory text
    • Homepage's logo
    • Homepage logo link
    • Homepage logo subheading
  4. The next screenshot shows the default page before it was edited:

 

 

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 tag. It will be displayed when hovering over the image in IE6. In IE7 (and above) and other browsers, it will not be displayed on hovering.

The Subheading appears below the Main title. It is the Homepage logo subheading that appears below the Homepage's logo.

The Introductory text is the one that will appear at the bottom of the Subheading.

The following image shows the relationship between what is affected by the editorial input you keyed in on your home page editor in the back office. The text on the left and right column is annotated to a front office view of a browser to relate the link with the fields you need to fill out in the back office.

Have a go hero—Adding more blocks

Now that you have installed, enabled, and configured the Home text editor module within the center column, let's proceed with adding more blocks on the other parts of the site. You will need to do the following:

  1. Decide which other modules we want.
  2. Install and enable the modules for the left and right columns.
  3. Configure the Modules blocks.
  4. Transplant and hook the modules.
  5. Learn about moving the blocks to different columns.
  6. Learn about moving the blocks within columns.

We will go into greater detail about configuring each one of the modules, installed in the next article.

Now that you have decided on which modules to add on your website, we will work on one example, namely, the CATEGORIES block installation. Once you know how to go about doing this, it will be a breeze, as some of these activities can be quite repetitive and PrestaShop's administration navigation is pretty simple to understand.

Time for action—Installing, enabling, and configuring the Categories block

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

  1. Go to the Modules | Blocks scroll down and find the Categories block just like the Home text editor module, which we installed some time back.

  2. Once you have enabled the installed Categories block, you will see the block appear in your front office, as shown in the following image:

  3. Configure the block. In this case, we will be able to decide how many categories we want to display in our category block.
  4. You will get to set the Maximum depth of the sublevels displayed in the block.
  5. This specifies how many categories you have in your category box. By default, there are three sublevels and the module block is positioned on the top left of your web page.
  6. You can also choose the Dynamic mode on this sublevel.

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

  • a category
  • a sub-category
  • a sub-sub-category

This actually relates to the next tab, which is in the Catalog tab, and we will cover this tab in the next article, Customizing PrestaShop Theme Part 2.

The next screenshot shows what is seen in your CATEGORIES block in your front office:

This categorization is mostly common sense and logistically connected to how you want to categorize items in your store.

The CATEGORIES block can show such a three parent category, as shown in the preceding screenshot, or with a child category, as shown in the following screenshot:

Next, we will install Top sellers block, New products block, Cart block, Info block, and a Newsletter block. We will see that all these blocks are moveable or transplantable elsewhere in the page. Using this back office function, you will still be limited to moving each of them to either the left or the right column, but not the center column.

PrestaShop 1.3 Theming – Beginner’s Guide Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps
Published: July 2010
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

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

Time for action—Moving the modules within the column

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).

  1. Let's go to Back Office | Modules.
  2. Click on the Positions tab.

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.

Time for action—Moving the blocks

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:

  • Add a NEW PRODUCTS block to the left column and delete the NEW PRODUCTS block on the right column.
  • Shift the CART to the top position on the right column and move the TOP SELLERS to the second position on the same column.
  • Move the NEWSLETTERS block to the right column.

We need to perform the following steps:

  1. Click on the Positions button. This will direct us to the Back Office | Modules | Positions page.

    This page will show us all the modules already installed on the left, right, and center columns. It will also allow you to see which modules can be moved or set exceptions.

    Our first task is to transplant a NEW PRODUCTS block on the left column.

  2. Click on the Transplant a module button, and you will get to a page where you choose the modules you want to transplant from the drop-down list.

     

     

  3. From the Module list, choose New products block.
  4. From the Hook into drop-down list, you may select where you want to transplant the module into. In our case, choose the Left column blocks.
  5. In the Exceptions field, type the name of the file(s) of the pages in which you do not want the module to appear. If, at this stage, you are not sure what to exclude, leave it blank; you may come back to review this setting later.
  6. Click on the Save button. You will get a message that says Module transplanted successfully to hook.

    It is best to install the module, hook it into the section and enter the exceptions the first time you transplant a module. If you leave it for a later stage, the changes may not be very obvious or sometimes seem ineffective. It is better to delete the module. Go to transplant and hook it again with the exceptions keyed in.

  7. Preview the changes in your front office.

The next task is to delete the NEW PRODUCTS block from the right.

  1. Go to the Positions tab.
  2. Look up the Right column block list.
  3. Delete the New products block by clicking the close icon on the right.
  4. You should get the message Module removed successfully from hook.

Our next task is to shift the CART to the top position on the right column and move the TOP SELLERS block to the second position in the same column.

  1. Go to the Positions tab.
  2. Move the cart by dragging the Cart block to the top deck of the Right column block list when you see a four headed arrow as you move the mouse over the module you want to re-position.

  3. Once you have dragged the module to the top, it will appear above the Top seller block in the front office.

Our next task is to move the NEWSLETTERS block from the left column to the right column.

  1. Go to the Positions tab.
  2. Click on the Transplant a module tab.
  3. Then repeat the same steps as we did when choosing the Module as the Newsletter block and Hook into as the Right column blocks.

     

     

  4. Click on the Save button.
  5. Again, you should get the message that says Module transplanted successfully to hook.
  6. You will see that the Newsletter block module is already listed within the right block.

  7. Now, delete the Newsletter block in the left column by clicking the delete button.
  8. Preview your changes in the front office.

What just happened?

You performed a few fundamental tasks in building your online store. You learnt how to position your modules including moving blocks within columns and moving them from one column to another.

On top of positioning the module blocks on hooks, you also learnt that we can put exceptions on where the modules should appear.

If you do not want to show any particular module, for example, the New Product blocks in the side columns of the order.php page, you may insert this on the page.

You may do this with on other modules in the left and right columns. After completing this stage, you will need to look at the other page elements which will be discussed in the next article.

Have a go hero—Configuring the module on your page

With what we have explored in the previous section, see if you can configure and edit the editorial block in the centre column. Get an image for the centre piece that is related to your store. Replace the current image with this new image.

Sometimes, the editor does not show the change that has been made, even though the front page has already shown the updated image. Always refresh your browser after you update the editor to view your front page changes when you make any adjustments.

The PrestaShop default theme image on the center is sized 530x238 pixels. You will need to adjust the size of your own image accordingly. The sample image we used is 550x394 pixels. Be careful with the width of the image as it may interfere with the three-column layout.

You may also edit the link to the image on this editorial block by modifying the Homepage logo link in this editor.

Edit the contents of the editorial block, which appear on the front page of your site. Editing the Introductory texts is possible using the WYSIWYG editor. You can do almost anything here for example, insert an image, embed media (Flash, Shockwave, Real Media, Windows Media, QuickTime, and so on), indent a paragraph, change the font, and so on.

Summary

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:

  • Installing and enabling module blocks
  • Adding the module blocks in the columns
  • Transplanting modules and hooking modules
  • Moving modules within columns
  • Updating the editorial block in the center column.

In Customizing PrestaShop Theme Part 2, 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.


Further resources on this subject:


About the Author :


Hayati Hashim

Hayati Hashim's undergraduate study was at Queensland University, Australia and she earned her Master's Degree in Multimedia at Multimedia University, Malaysia. She is currently the Managing Director of Pixel Bytes, a web, multimedia, and e-learning company. She has been involved in most of the company’s web development projects. Hayati has also written and presented a paper on "Using online platform in internationalising Malay language" and has done exploratory research study on mobile learning in a local tertiary institution. She has also taught students on various aspects of multimedia, web design, development, and e-commerce projects. Her latest field of interest is related to mobile application. She works mostly on open source platform and has been involved in the web development  that includes Moodle, Joomla!, Zen Cart, and PrestaShop.

Books From Packt


PrestaShop 1.3 Beginner's Guide
PrestaShop 1.3 Beginner's Guide

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart

PHP 5 E-commerce Development
PHP 5 E-commerce Development

TYPO3 4.2 E-Commerce
TYPO3 4.2 E-Commerce

Magento 1.3 Sales Tactics Cookbook
Magento 1.3 Sales Tactics Cookbook

Zen Cart: E-commerce Application Development
Zen Cart: E-commerce Application Development

Microsoft Office Live Small Business: Beginner’s Guide
Microsoft Office Live Small Business: Beginner’s Guide


Your rating: None Average: 4.6 (5 votes)
hello a question by
hello a question please. i have to modify index page, with a unique column in which see categories, subcategories, cart on top of header and others customizations. In your book do you explain also how to modify the image of index page and how to insert module where I want, also explaining how to do with css? thanks in advance

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
x
d
W
4
B
M
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software