Prestashop
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%.
Edit global.css and add a line:
header { background: url('https://i.imgur.com/tkY5gPZ.png') 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; }
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:
#product_condition{display:none;}
Edit superfish-modified.css, line 26, and set: background: #333;
Edit blocktopmenu.css and change padding from 25 to 20.
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
global.css: line 5738: change from 15px to 0px, lines 5727 and 5728 to 2px
Edit line 17 and line 18 in superfish-modified.css:
border-bottom: 2px solid #333;
border-top: 2px solid #333;
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.
Theme
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
Settings
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
Code
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
order-carrier-opc-advanced.tpl, order-opc-new-account.tpl
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
modules/blocknewproducts/views/templates/hook/tab.tpl
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