31,19 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Themes in PrestaShop are unique and powerful tools to brand your store for a particular corporate image. Using custom themes you can control the look and functionality of your web store, thereby making your site extremely flexible. Although it might sound like an easy task to build a theme, it is quite challenging to create a custom theme that fits your business needs.
This book's prime focus is guiding the readers without much technical know-how, thus enabling them to create a new theme that fulfills the needs of their PrestaShop store. By understanding practical ways to develop your theme for PrestaShop speedily, you can invest more time on developing attractive and unique raw materials. It will simplify the challenging task of creating a unique, new PrestaShop theme through easy-to-follow, practical steps.
This book shows how to develop professional themes for your PrestaShop store using some simple steps. The book starts by exploring the various ways of changing the looks (including modules) of your PrestaShop store. It shows you how certain back office administration adjustments can affect the appearance and theme of your store. It then takes you through understanding the code modification of a default theme that results in a new look for your existing theme. The book also covers understanding the PrestaShop architecture and essential syntaxes that control the look of a PrestaShop store. You will also learn about the files that hold the key to themes.
By the end of this book, you will have grasped the knowledge to make advanced changes by tweaking the right CSS and module files in order to achieve highly specific outcomes.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 266
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
PrestaShop 1.3 Theming Beginner’s Guide
PrestaShop 1.3 ThemingBeginner’s Guide
Copyright © 2010 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: July 2010
Production Reference: 1160710
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849511-72-8
www.packtpub.com
Cover Image by Duraid Fatouhi (<[email protected]>)
Credits
Author
Hayati Hashim
Reviewers
Adrian Nethercott
Bart Sallé
Acquisition Editor
Dilip Venkatesh
Development Editor
Wilson D’souza
Technical Editor
Sakina Kaydawala
Copy Editor
Leonard D’Silva
Indexer
Monica Ajmera Mehta
Editorial Team Leader
Aanchal Kumar
Project Team Leader
Lata Basantani
Project Coordinator
Shubhanjan Chatterjee
Proofreader
Lesley Harrison
Graphics
Geetanjali Sawant
Production Coordinator
Arvindkumar Gupta
Cover Work
Arvindkumar Gupta
About the Author
Hayati Hashim, graduated from the Queensland University, Australia and later pursued her Masters Degree in Multimedia majoring in e-Learning technologies from Multimedia University, Malaysia. Her latest field of interest is related to mobile learning and applications. She currently manages a multimedia company, Pixel Bytes Sdn Bhd, which offers video, web and multimedia services. She works mostly on open source platforms and has trained students in multimedia, web design, development, e-learning, and e-commerce projects. She loves science fiction movies, reading, painting, photography, travelling, and especially enjoys playing online games, although she hardly gets her hands on them, as this is the way she finds inspiration. This is her first book.
Throughout the progress of writing this book, I have also learned and been assisted by many individuals who deserved special acknowledgements. It is an impossible effort without the tremendous support of the Packt editorial team. There are times when I got swamped with other commitments, work, and family matters, but all of you have certainly kept me motivated to complete it.
I would also like to thank the reviewers (Adrian and Bart) for their constructive feedback throughout the review process. This book would never have been the same if it wasn’t for your invaluable feedback and comments.
Special thanks to my beloved husband and son, who supported me all the way and continuously inspired me in my pursuit. This is also to my beloved mother and in the memory of my late father.
About the Reviewers
Adrian Nethercott, born in Australia, has had an interest in computers since he was introduced to them in primary school, where he was chosen as computer monitor. In high school, he studied computers and business and won subject awards for Computer Studies, Accounting, and Business Communications and Technology. He continued his study at James Cook University and completed a Bachelor of Information Technology with Honors’ Class I, the highest possible class. For two years, he continued studying for a PhD in Information Technology before deciding that he would rather create websites than do research.
Adrian then worked for three months at Charleville State High School where he redesigned and maintained their Joomla! website. Shortly after, he started working at NQ Web Design, a professional website design company, where he was introduced to PrestaShop. After working there for 15 months, he decided to leave the job and start his own website development company, Nethercott Constructions. He has now been working with PrestaShop for 18 months and is a moderator on the PrestaShop forums under his nickname “Rocky”. He has created a website for Nethercott Constructions where he presents a portfolio of websites he has done and offers PrestaShop modules for sale. In the future, he plans to create more PrestaShop modules and a PrestaShop desktop client that will make maintaining PrestaShop websites easier.
I would like to thank my girlfriend Emma-Jane and my parents for their love and support.
After several jobs in the IT sector, Bart Sallé discovered the fascinating world of web design. What started as a hobby soon grew to a successful company. His skills increased from web design to web development (PHP and Typoscript).
Now, after several years, he produces high quality products, based on open source software.
Bart Sallé is a specialist in Typo3, Joomla (/Virtuemart), Wordpress, OS-Commerce, and PrestaShop.
His company website can be found at www.os-solutions.nl
His personal site website can be found at www.bartsalle.nl
Preface
The fitting elements of digital design can make or break websites. In an e-commerce site, creating a convincing theme to support your online store makes valuable impact to your business. Customers or site visitors are the centre to the design of any e-commerce site. He/she may not know much about your company and the products or services it sells, yet he's/she's faced with the information presented on the website to make a buying decision. The personality of the web pages must be perceived as the "face" of the company or the store which gives the visitor anticipation, enticing him/her to further explore the web store. Whether you are a web developer hired to design a PrestaShop store or the owner of the store, this book will guide you on how to create new themes or modify the outlook of your PrestaShop store according to your needs.
PrestaShop is a professional e-commerce shopping cart software, which is free and easily downloadable online. It has been released under the Open Software License v3.0 (http://www.opensource.org/licenses/osl-3.0.php).
According to the official PrestaShop website, "it was built to take advantage of essential Web 2.0 innovations such as dynamic AJAX-powered features and next-generation ergonomy."
PrestaShop considers the usability aspect where users are guided in a manner they can navigate through the e-commerce site and browse a catalog "intelligently and effortlessly", resulting into higher conversion rates from site visitors to paying customers.
The PrestaShop developer prided the software as "lightweight and speedy", which is an advantage to customers with low connection speeds. This is an important feature as Internet connectivity can still be an issue and affect a customer's experience in an online store.
PrestaShop is also user friendly both to the merchant (having a friendly back office administration) and the site visitors/prospective customers, as you will see later.
Although PrestaShop is currently designed as single shop software, where it isn't possible to feature multiple shops on one site, one of its greatest advantages is multi-user administration, where a shop owner may have a few levels of administrators to assist him with managing the online store. This feature is useful in the situation where an online store owner wants someone to assist him with updating information on his product lines featuring new sales or uploading images of new stock.
With the many winning features for functionality and ease of use, PrestaShop is also easier to style than most e-commerce software. The PrestaShop theme is a packaged file that controls the look and feel of the PrestaShop store. It enables site owners or developers to build a visually appealing site that matches the concept of the product or service the store sells.
Through a good choice of themes, site developers may create a more convincing e-commerce site for their customers, allowing them to better present or showcase their products or catalogs.
As with any other similar platform where design and the information are separated, the theme is the utmost important package that can be considered as the backbone that makes up a PrestaShop store.
An effective website will have to consider a few key elements, which include being visually attractive, presenting meaningful information and providing ease of navigation.
This book is dedicated to those who want to change and modify their PrestaShop's default theme to suit their needs and also to build a new theme using the simplest methods.
As theming is also affected by the use of modules and certain effects such as animated images this book will also guide you with tips to make your site unique by employing some of the available techniques.
What this book covers
Chapter 1, Customizing PrestaShop gives a brief introduction to PrestaShop; it will explain the relationship between the PrestaShop front page look and its back office administration, and it will brief you on the basic structure diagram of a PrestaShop theme. It will then give an overview of the back office tabs for modifying the PrestaShop's theme.
Chapter 2, Customizing PrestaShop Theme Part I 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.
Chapter 3, Customizing PrestaShop Theme Part 2 helps you in setting up your key elements such as the title, header, footer, logos and so on, which complete the look of the store you are designing.
Chapter 4, Adjusting Style Sheets helps you understand and review your themes CSS files—modifying the elements of your PrestaShop web pages in terms of the colors, fonts, and layout by making simple changes to the relevant code.
Chapter 5, Applying Images elaborates about getting and using images to complete the look of the theme for the online store.
Chapter 6, Steps for Creating Themes covers the process of creating a theme step-by-step. It is divided into sub-topics, which are visualizing your theme, color scheming, developing raw materials, getting the layout you want, deciding on what modules you want to use, positioning the modules, customizing categories, adjusting the style sheets, and packaging the theme.
Chapter 7, Tips and Tricks to Make PrestaShop Theming Easier explores tips and tricks on how to make it easier to develop themes. It also explains ways to use third party modules for PrestaShop theming.
Chapter 8, Deploying Your New Themes explains how to deploy the themes on a production site and how to validate the code and test it on various browsers.
What you need for this book
You will need the following:
Who this book is for
This book is meant for beginners to PrestaShop who want a hassle-free way to come up with their own themes. If you are a designer who enjoys creative works but does not want to spend too much time exploring the code, this book is for you. This book is also useful for those "layman" online store owners, who want to make their own modifications to their PrestaShop stores.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "Try changing the background–color."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Click on the Save button".
Note
Warnings or important notes appear in a box like this.
Tip
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book on, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Tip
Downloading the example code for the book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it
Chapter 1. Customizing PrestaShop
Just like in any bricks-and-mortar retail business, an online store will have a shop front or a display area and a back-of-house area where the administration activities and management of business is carried out. For online businesses, the pages that appear on your customers' browser are your shop front. In PrestaShop, we will refer this as your front office. Your back-of-house area will be your PrestaShop's back office administration panel.
For this chapter, we will firstly give you a brief rundown of what skill sets you should have to fully benefit from this book. We will later learn how the PrestaShop back office administration panel affects your theme, which in turn affects what your site visitors will see on their browser.
Now that you have successfully installed the PrestaShop program, you must have noticed that PrestaShop comes with a default template that is ready to be customized.
Let's then get to the business of understanding this default template. This will allow you to change the layout and the look of your online shop. Later you will even be able to build your own themes.
As you progress, you will realize that you may execute things differently to get the same result. You may also work on the FTP or the hosting where you "tweak" the scripts on the servers.
What you need to know
As this book is geared towards beginners who have little knowledge of scripting and hardcoding of markup languages, we will explain the steps visually. To be able to maximize the benefit of the book, you absolutely need to have the following:
Note
If you are new to PrestaShop, get the information on how to install it from http://www.PrestaShop.com/wiki/Installing_And_Updating_PrestaShop_Software/
Note
Other free editors can be obtained at a number of sites such as:
http://www.pnotepad.org/
http://notepad-plus.sourceforge.net/uk/site.htm
http://www.crimsoneditor.com/
http://www.pspad.com
Note
W3C's website: www.w3.org/
Note
Learn about CSS at: http://www.w3schools.com/css/default.asp
XHTML at: http://www.w3schools.com/xhtml/default.asp
and Smarty at: http://www.smarty.net/docs.php
Note
To expedite, you may want to subscribe to Stockphoto and icons available on the net as resources, for example, www.istockphoto.com, www.deviantart.com, http://www.sxc.hu/ are popular royalty free image distributors that you can use for a low fee.
Getting familiar with PrestaShop
The reason why it is important that you have those basics clear is that it will make it much easier to understand what can be done to modify the theme. However, if you knew everything, you wouldn't need a beginner's book. We do not expect you to be at an intermediate or an advanced level; this beginner's book will show you step by step how to modify the default theme and develop a new theme for your online shop.
For a start, let's look at the default theme named "PrestaShop" that comes in the PrestaShop software pack.
The PrestaShop sample sites
Let's have a look at a few example of sites that have been developed using PrestaShop. There are many nicely built sites, which are drawn out of using just the default themes. Some use more additional third party modules, which helped make a more unique look, for example, using a top menu bar, moving boxes on the featured block, and so on.
Let's have a look at a few sites we have chosen as examples:
You can view more of these on the PrestaShop website in the live showcases section.
Time for action—Overviewing the back office administration panel
Let's get familiar with the basics of the PrestaShop back office administration that relates to the theming of the shop front or front office of your PrestaShop store.
Now, using the default theme in PrestaShop, have a look at your current storefront and how the theme is governed by the back office control. By looking at this, you can tell which back office item you need to modify, replace, or set according to your needs.
Basically, the layout can be seen here in the following screenshot:
Now this is how your back office administration panel, which controls these blocks, should look. The default theme has three columns (left, center, and right columns). Each column comprises a number of blocks which are moveable. For example, within the Right Column, there are cart_block, new products block, top seller block, and specials block. These blocks can be displayed within the left block as well. We also have a header user and footer block where you can install blocks for a number of modules.
Next, we will look at the back office, as shown in the following screenshot:
There are ten tabs, which are named Catalog, Customers,
