Prestashop Tutorial


Note: All the code edited here is collected by making the Nero Online Shop (for accessories and fashion items). The whole process is documented in a diary, presented in this blog.

Prestashop is not the leading eCommerce CMS out there. WordPress with Woocomerce is used in 45% of online shops. Magento is probably more powerful. So why Prestashop?

It is in the middle of the two popular eCommerce solutions. Magento is a bit difficult and Woocomerce is amazing for a plugin, but Prestashop beats it simply because it is built only for online shops. It has everything automated, and is not hard to learn, with a help of a large online community. Once You start digging into it, You will be amazed at how much is covered to make Your life easier.

What is not covered is what will give You headaches. To change something will cost a lot, to buy custom themes or modules, which are almost always overpriced, and not a lot of them are free. There is an alternative in changing the code, and that’s the way I prefer, because it is not only free, but it works the best. After trying out numerous themes, I’ve found out that there is at least some minor fault with every one, or they are just modifications of the default theme. Thus, the default theme: default-bootstrap, works best, and good news is that because everything is Open Source, it can be modified to our liking.

The main code is in .tpl files, which are coded using mixed php and framework code, and are easy to read.

All modifications are listed in the sections below.

At the end, we will give out our module for FREE. Look at the end of the article to see what it is.

CSS code

For editing CSS files, it is recommended to use some program that understands it and labels the code with different colors so it is more readable. I’m using Adobe Dreamweaver, but there are plethora of good and free programs to use.

Set the whole site to 100%

Go to your theme’s home directory and edit global.css (for default-bootstrap it is in /theme/default-bootstrap/global.css).

Go to line 989 and change . container from 1170px to 100%.

Set background for top menu to 100%

Edit global.css and add a line:

header { background: url('') top !important; }

Lower the line with the logo (reduce spacing)

Edit default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css

Comment out the line with block_top_menu, like this: #block_top_menu { margin-top: -20px; }

Destroy (or hide) the border of top horizontal menu

Edit /themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

Line 17: border-bottom set to 0px
Line 18: comment out the whole line
Line 66: 0px
Line 67: 15px 15px

Set text outline in Slider

Edit homeslider.css and set lines 40 and 48 to be:

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Set text outline for category view

Edit category.css, lines 6 and 7 and change to:

color: #353535;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;

Change line 18 to: color: #7f7f7f;

Change header background color

Edit global.css, line 8375. In this example we will change it to white: replace #f2f2f2 with “white”.

Change header-line color

Edit blockcontact.css, blocklanguages.css, blockuserinfo.css and change text from #fff to “black”, and add shadows like in the above example.

Remove the condition of the product

Edit /default-bootstrap/css/product.css and add the line:


Change background of sub-menu in top horizontal menu to black

Edit superfish-modified.css, line 26, and set: background: #333;

Reduce space around the top menu

Edit blocktopmenu.css and change padding from 25 to 20.

Change font color of sub-menu

Edit superfish-modified.css, line 144: color: #fff;

line 146: #a09f9f,

line 87: from #333 to #fff

For HTML color codes, consult here: HTML Color Picker

Change spacing for top menu

global.css: line 5738: change from 15px to 0px, lines 5727 and 5728 to 2px

For top-menu, change the looks so that only top and bottom horizontal lines appear

Edit line 17 and line 18 in superfish-modified.css:

border-bottom: 2px solid #333;

border-top: 2px solid #333;

Remove vertical border from top menu and adjust it

Edit superfish-modified.css, line 41: set 0px, margin-bottom 0px

Align table’s cells to top, instead middle

Edit global.css, line 35, from middle to topContinue: Prestashop Modules‹ How to install other Language and/or Keyboard layoutPrestashop Username/Password Reset Tool ›Posted in Blog

Prestashop Modules

Bug: Cannot login to add-ons

Solution: Disable Overrides in Debug under Advanced > Performance

Allow only Cash On Delivery as payment type

Go to Modules > Payment and enable COD module, and disable Check.

Show only New Products block on front-page

Go to modules adn disable specials block, top-sellers block, best-selling, featured products block.

Change the square images in the middle of the page

In our example those are changed to Menner, Womenner and Reda Milano logos. This can be done by configuring blockcms module.

Add Google’s ReCaptcha

This can be seen by following the guide presented here: ADD Recaptcha to Prestashop for Free.

Now You only need to set your site key and secret key in the module and your contact page will be secure.

Add image instead of payment logos

I wanted to change the images of Visa, MasterCard and American Express to the free delivery. It appears that this is easy to do, just configure “Payment logos” module, and change image path there.

Country selection

Prestashop is set to work by default with USA, and I wanted my shop to be only for Serbia. This can be adjusted in Modules > Payment > Country restrictions, and I checked Serbia there.

Receive emails when something happens

When you get a sale or a question, you want to be informed via email. There is a free module that works perfectly, its called “Email alerts”, so just install it and configure.

Limit the products on the front page

8 is too much, we want new products module to display only 4, i.e. one row. Go to modules and configure New Products module, and set the number.

Change phone number

This one is a bit tricky, because it appears in two places: header and contact information block. Edit those two.


Remove the banner at the top

Go to Themes > Theme Configurator and set Display Top banner to No.

Live Edit for modules

Its located in Modules > Positions, and on the right there is a button called Live Edit. Just be careful not to remove something you need, because it is not as easy to return it, and there is no undo. It is better practice, when possible, to just disable module than to Unhook it (that’s what trash button in Live Edit does).

Disable two banners of the slider

Positions > displayTopColumn, unhook Theme configurator

Hide Store Locator Block

Positions > displayLeftColumn, unhook Store Locator block


Set Free Shipping and only One-page checkout

We are going for one-page checkout only (no user registration), free shipping and shipping only to one country, Serbia in this example.

  • Go to Shipping > Preferences and set Handling charges to 0
  • Shipping>Preferences Handling charges 0
  • Preferences>Orders One-page checkout & Enable guest, disable Terms of service
  • Localization>Zones Add Srbija
  • Localization>Localization Add srpski and change Configuration
  • Localization>Currencies disable USD
  • Localization>Taxes disable all same in Tax Rules
  • Shipping>Carriers disable Nero and add Post Ekspres
  • Shipping>Preferences set default
  • Change Localization>Countries Serbia from Zone:Europe to Serbia, Display tax label: No
  • Countries > disable United States

Unlimited number of products

If you do not wish for Prestashop to manage the quantities for your products, this can be changed by going to Preferences>Products: disable Stock Management.

Disable showing taxes in shopping cart

Localization > Taxes:

display tax in shopping cart: No,

Enable tax: No.

Transate emails

Localization>Translations: Email templates translation: Core emails > order_conf and others.

Disable English in front-office, but set it in back-office

Once you disable English for your front office, the back office will go to the other language as well. It is recommended for the back-office to be in its native language. To do so, go to My Preferences in the top right, and choose English.

Enable custom code

To use javascript or embed video in product descriptions, you will need to enable iframe. This can be done in Preferences > General: Enable iframe.

Add video to home page

This can be done in Custom CMS block, now that we have enabled iframe. The size of youtube video that fits here is 350 x 197 pixels.

Salesman priviledges

We don’t want our salesman to fiddle with our modules, and this is allowed by default.

Administration > permissions: disable all modules for salesman

Disable automatic updates

Updates are sometimes a good thing, but quite often than it should, they mess things up. If something is working, don’t change it. Go to Administration > preferences: disable automatically check for updates.

How often is your website down?

This can be seen by adding a script to google drive. This is by far the simplest and the most reliable method, not to mention that its free. To download the script and for the instructions, visit the Website Uptime Monitoring.

Increase the length of Short Description

Prestashop has set us the limits for our short description, giving us the guidance of how to describe our products. Still, I needed more, and I do not want to be limited. You will receive the error that you need to increase short_description. This can be done by:

preferences > products > max size to 1000

Increase a number of products per page

Default is 12, which is a bit small number. I think the best value is 3 x 6 products on page. This can be set in:

preferences > producuts > pagination: 18

Set the products ordering by add date showing new products first

preferences > products > product add date, descending

Set the product image size

The default image size for the product, when zoomed, is 800 x 800 pixels. It is a bit small, because you cannot see the details, and some might not like the 1:1 ratio, when their camera is making 16:9 or 4:3 photos. I do like the 1:1 ratio, but want to increase the size:

preferences > images > thickbox to 1000 x 1000


Due to the complexity, instead of showing what to modify, we provide you with the complete source files. Make sure that after you upload them you go to the Performance and choose to Force compile, otherwise you won’t see the changes.

No registration, only instant guest checkout


Remove contact us link from header

Comment out div contact-link: themes/default-bootstrap/modules/blockcontact/nav.tpl

Remove New Arrivals tab on home page

Comment out all


Remove subcategory product images

category.tpl – comment out images div
category.css – comment out height line 56

Increase allowed length of description

default-bootstrap>category.tpl change {if Tools::strlen($category->description) > 350} to 1000

Leave a Reply