Creating a Prestashop 1.4 theme from scratch – Overview

One of my friends recently decided to setup an online e-commerce enabled shop for kids’ toys & other items in India. He came to me asking to setup & maintain the website for him – a request I could not deny.

We sat together and brain-stormed about the domain name and finally came up with kids-delight.com. We registered the domain and completed other formalities of setting up DNS entries and a hosting space for the domain.

The first question, I asked him, was whether he wanted a custom developed website or a customized open-source framework. As the available time & budget are limited, he chose the open-source version of the website. We had to choose the best set of features from the available ones, instead of creating our own set as in custom developed website.

I am primarily into .NET development and quickly realized that I need to deviate from it for a while. The reason behind it was that most of the popular open-source e-commerce frameworks out there on the web are PHP based. There are some frameworks based on .NET like nopCommerce. After going through many reviews & comparisons on the web, I decided to go with Prestashop, which is based on PHP. Prestashop has a pretty attractive feature set with the easiest, yet powerful, configuration, maintenance and customization features. Once Prestashop was chosen, I decided to use the upcoming 1.4 (currently at RC2) version rather than the stable 1.3.6. I believe that, at the pace at which it is evolving, the final 1.4 release will be available by the time Kids Delight is ready.

As I was pretty new to PHP, I decided to take this opportunity to learn and practice PHP and related technologies. I downloaded the binaries and was able to install it in the hosting space in no time. Within a minute, the shop was ready with sample data. I was impressed with the ease of installation. The default theme that comes free with the Prestashop installation is good.

I am not that kind of a person who can be satisfied so easily . The Kids Delight website sells kids’ toys and learning tools and so the website design should reflect its purpose. The target audience are parents of the kids who will most probably at their younger age (25-35 years old). The website design should be decent, simple but bright. The default theme is a good starting point but does not, in any way, attract the target audience, in my opinion. I searched the web for ready-made free or commercial themes for Prestashop, which reflects the purpose of Kids Delight. I could not find anything. It is time to develop a new theme! I decided to create a design with white and bright orange colors.

I searched the web for tutorials for creating custom themes. I could find two resources (http://www.daveegerton.com/prestashop-guides/Prestashop-Designers-Guide.html and http://www.techietips.net/creating-prestashop-13-theme.html). These two resources are pretty short in the subject coverage and were of less help to me (being a novice PHP programmer). I was stubborn and decided to dwell into the framework myself and learn, taking the above two resources as starting points.

Before I develop a new theme, while learning PHP, Prestashop framework and the Smarty template engine(used by Prestashop for theming), I thought of writing a series of posts describing my experiences and creating walkthroughs for many programmers who are new to PHP & Prestashop, but want to try them.

I will not be explaining the design details like color theory, website design/layout principles, designing a layout in Photoshop, image slicing techniques etc., I assume that, you have a design ready to be implemented. As of now, I do not have any table of contents or an agenda as to what to write. The main overview of what you can expect from this post series is “How to create a custom Prestashop theme and all required modules for a given design and how to install and configure it on the Prestashop website framework”. In the coming days, I will learn the framework and write my experiences while updating this post with the table of contents and their links – the final outcome will be evident on the Kids Delight website.

Table of Contents

1. Overview
2. Environment Setup
3. Initial Steps
4. Framework Overview
5. Creating a Module
6. DelightTheme Module
7. Standard UI Module
8. Styling a Module
9. Putting it Together
10. CCC in Prestashop
11. Testing the Theme
12. Packaging the Theme
13. Conclusion

Disclaimer

The content of this post is a property of http://www.kids-delight.com (hereafter mentioned as KD), protected by applicable copyright, patent, trademark and other intellectual property laws and is presented here upon authorization from KD. Except as expressly authorized herein, you may not reproduce, transmit, sell, display, distribute, publish, broadcast, circulate, modify, disseminate or commercially exploit the content in any manner (including electronic, print or other media now known or hereafter developed) without a written consent from KD. Use of the content in violation of these Terms of Use, or any applicable law, rule or regulation (whether of the Indian Government or other countries), or the rights of any third party is prohibited. You agree not to use the content for any unlawful purposes and comply with any and all requests from KD to protect respective rights in the content. You may use the content only for your personal training purposes. You may download the content to your computer and print out a hard copy for your reference and internal use and display, but you will not remove any copyright or other notices contained in the content. We expressly prohibit the use of devices (including software) designed to provide repeated automated access to the content for any commercial purpose except for those expressly authorized by KD. We reserve the right to take any and all measures necessary to prevent such access, including denial or termination of your access to the Site. If you have any questions about any materials posted on the Site, we urge you contact KD (http://www.kids-delight.com).

Incoming search terms:

• prestashop 1 4 themes
• prestashop 1 4 theme
• free prestashop 1 4 themes
• prestashop themes 1 4
• prestashop 1 4 themes free
• themes prestashop 1 4
• prestashop theme 1 4
• theme prestashop 1 4
• free prestashop themes 1 4
• prestashop framework