Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
PrestaShop 1.3 Theming - Beginner's Guide
PrestaShop 1.3 Theming - Beginner's Guide

PrestaShop 1.3 Theming - Beginner's Guide: Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps

eBook
€22.99 €25.99
Paperback
€32.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Table of content icon View table of contents Preview book icon Preview Book

PrestaShop 1.3 Theming - Beginner's Guide

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:

  • PrestaShop installed and configured correctly: You will need PrestaShop installed on either your localhost or your webserver. This book is based on version 1.3. You should be able to download the latest version at http://www.PrestaShop.com/en/downloads. Being familiar with the backend is not a prerequisite, as we will be covering that later.

    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/

  • You will need a Notepad or another editor for HTML. You may also choose any editor you wish. A more expensive option would be to purchase Dreamweaver.

  • You should also have access to the FTP of the installation and backend access to the administration panel. If you used a third party to host your PrestaShop, you will have to ask them to have it installed. Most webhosting companies already have PrestaShop as one of the e-commerce options and it can be installed through a number of auto installers such as Softaculous Premium, or Installatron. You only need to upload the PrestaShop program to a new directory in the public HTML or a sub-directory. It can be installed easily by accessing this new directory (for example, www.yourd omai n.com or www.yourdomain.co m/prestas) through your browser and then following a few simple steps to complete the installation.

  • An understanding of W3C's requirement for a table-less layout: PrestaShop uses a convention that meets the W3C's requirements for a table-less layout. Therefore, it is important to have an understanding on how this works in order to develop the new themes.

    Note

    W3C's website: www.w3.org/

  • XHTML and CSS: Most development of new themes can be done without knowledge of XHTML or CSS, as there are plenty of What You See Is What You Get (WYSIWYG) editors that allow the flexibility of designing without the coding knowledge. However, understanding them is useful in developing better themes that can be more efficient and load better. Through this understanding, you may also make the themes Search Engine Optimization (SEO) friendly. After all, there is no point having pretty looking web pages that cannot be found by your prospective visitors.

  • Web developer tools such as Firebug or the Web Developer extension for Firefox. Download Web Developer extension at: http://www.chrispederick.com/work/web-developer/. You can also use Firebug, which is one of the most popular web development tools, and is available at http://www.getfirebug.com.

  • A knowledge of image editing as you will be required to create themes based on what wants to be projected through the concept of the themes, for example, suitable color schemes for icons used if you plan to develop your own unique themes. You will also need this knowledge to edit images you have captured, for example, the showcased products.

    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:

  • http://www.Homology.comUsing "carousels" for products and footer links, the designer has also managed to make a unique look.

  • http://www.peugeotsport-store.com/—An example of a minimalistic approach in changing the default theme but the end result is good. Here, the designer maintained the three columns of the default template and played around keeping a limited color on the blocks and integrated a flash file at the home page center column.

  • http://www.dakoyo.fr—This site is also using the three column layout, just like the default theme. There is a use of flash slide in the home page center column, and the image gallery viewer does make a lot of difference, even if most of the basic structure is retained.

  • http://www.lookforlook.com—By changing the home page logo picture with a flash slide show, a "carousel" on featured products, and using a top menu bar, a footer, and so on, the theme looks very different from the default theme.

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, Orders, Payment, Shipping, Stats, Modules, Employees, Preferences, and Tools.

They are all important and useful if you know how to manipulate them to improve the efficiency of your store's administration and operation. However, to modify your store theme, just a few of them will be necessary and we will get an overview of those here.

The tabs in the back office that control the look of your shop are:

  1. Preferences

  2. Modules

  3. Catalog

  4. Tools

Preferences

The most important tab, when it comes to modifying the default theme, is probably the Preferences tab. Go to Back Office | Preferences, and you will see something like the following screenshot. This is the Preferences landing page, which is also referred to as General.

You will see a few things, such as the following:

  • PrestaShop directory —This is where the default directory is located in your server. It can be blank if the default directory is at the root of your public HTML folder, whereas, in the example, a new directory named prestash was created when installing the software.

  • Enable Shop —You set the enable or the activated state for your shop or if it is already deactivated.

  • Maintenance IP —You specify the IP address allowed to access the Front Office even if the shop is disabled.

  • Enable SSL —Enabled or disabled depending on If your hosting provider allows SSL, you can activate SSL encryption (https://) for customer account identification and order processing.

  • Increase Front Office security —This states, Enable or disable token on the Front Office in order to improve PrestaShop security

  • Friendly URL Enable only if your server allows URL rewriting (recommended). This feature will require a creation of an .htaccess file.

  • Back Office help boxes Enable yellow help boxes which are displayed under form fields in the Back Office. This can be set to yes or no.

  • Terms of service —When you design the site, you need to decide if customers are required to accept or decline terms of service before their order will be processed. Terms of service are used to prevent legal problems.

  • Offer gift-wrapping —If you enable this, gift-wrapping suggestions will be offered to the customer, and the customer will be able to leave a message to be printed alongside the order.

  • Gift-wrapping price —This sets a price for gift-wrapping.

  • Gift-wrapping tax —This sets a tax for gift wrapping.

  • Offer recycled-packaging —If you like, you can also suggest recycled packaging to customer.

  • Cart re-display at login —If enabled, the contents of the user's last shopping cart will be recalled and displayed upon the next time the user logs in.

  • Round mode You can choose the rounding of prices, rounding always superior, inferior or classical rounding.

  • Automatically check updates to modules New modules and updates are displayed on module page.

  • Timezone —You can also set the timezone of the store. Currently, it is quite exhaustive, and includes almost every available zone such as Africa, America, Asia, Europe, Pacific, Australia, Chile, Indian, Canadan and the GMT, PST, and so on.

  • v1.1 theme compatibility —If enabled, the shop will use a PrestaShop v1.1 theme (SSL will generate warnings in the customer's browser).

Although most of these are not directly related to your theme development mission, it is useful to know some of the key options and tabs that make PrestaShop work.

Next, the Preferences tab comprises the settings controlling the sub-items, which we will briefly explain as follows:

  • Contact: Go to Back Office | Preferences | Contact. Here you will get to set the Shop name, Shop e-mail which will be used to contact the administrator, you can fill in your shop Registration information here, along with the Shop address, Country, Phone, and Fax number. However, the only required fields are the top two, that is, the Shop name and the Shop e-mail address.

  • Appearance : The sub items in the Appearance section are for selecting your Header logo and Favicon. This is the most important stub to control the appearance of your site. Click on Back Office | Preferences | Appearance | Themes and you can see the thumbnail of the theme applied to your shop. By default, we only have one theme choice, that is, prestashop. If you have more than one theme installed, you will see more thumbnails next to the default theme. You will be able to change the Header logo and Favicon through this tab as well.

    If you have added a new theme, it will be displayed next to the PrestaShop theme thumbnail in the Themes section, as shown in the preceding screenshot. For PrestaShop 1.3 and above, a new item is added on this page where a link Live from PrestaStore! is provided for purchasing readymade themes.

  • Meta-Tags : Click on each of the "edit" icons (the pencil-like icon on the right) and edit the meta tags of each page. If you need to add a new meta tag for a different page, just add a new page and proceed with editing the page title, meta description, and meta keywords.

  • Products : The Products sub tab is important as it sets how the products are featured on your store. Here you can choose how your products are displayed in the front office.

  • Email: Use this setting to determine how the e-mails are sent by the back office (through the PHPmail() function or through an SMTP server).

  • Image: This can be used to customize the different sizes used by PrestaShop to display your images and regenerate all your thumbnails.

    Here, the next action will be to either add a new type of thumbnail, and set the width and height of it, or you can edit the existing thumbnails (for example, small, medium, and so on) and decide which type of thumbnails (to refer the thumbnail and specific height and width of each type of thumbnails) should be applied to either Products, Categories, Manufactures, Suppliers, and Scenes.

  • Database: This sub-item sets the server, database, prefix, username, and password. This is related to the config/settings.inc.php file. This configures the connection settings between PrestaShop and its MySQL database.

  • PDF: The PDF sub-item sets the encoding for any PDF invoices and the font used in the PDF invoices. The language setting by default is English.

  • Localization: Strangely, the Localization sub-item only allows you to specify the weight unit of the store. In most cases the weight unit will be kg.

  • Search: The Search setting allow site visitor to search for words which are based on your configuration here. For example, if you're looking for "a large box of dark chocolate", it will only search for "large" and "chocolate", as the other words are less commonly searched for Depending on this configuration setting, you can set the minimum word length to be two characters, as the value three means that only words of four characters or longer, whereas the value two allows the user to search for three character words.

Catalog

The next important tab would be the Catalog attributes.

The Catalog comprises the controlling tab for the categories and products you are showcasing in your store. In this tab, you will have a number of sub-items that will require you to key in data. This tab controls a number of modules as well, such as the CATEGORIES block and the FEATURED PRODUCTS block. We will explore this in more detail in Chapter 3, Customizing PrestaShop Theme Part 2.

  • Tracking provides a snapshot of what is empty, disabled, and out of stock categories.

  • Manufacturers tab is where you can edit information of their products, add new manufacturers, or insert their logos

  • Suppliers tab is similar to manufacturers, except that the suppliers' information fields do not include address information like the manufacturers' do.

  • Attributes and groups tab is where you can find out the attributes of a group. For example, you can add colors as one of the attributes.

  • Features tab will allow more information to be provided to the visitors for valuable comparison on the products' features.

  • Image mapping allows a pop-up to appear displaying a brief description of the product when customer hovers over the image with the mouse. When clicked, it opens to the product's full product page. This relates to Preferences | Image, which we explained in the previous section where image thumbnails are generated according to the size specified.

It is best if you have some images ready for the product's photo or edited images when working on this.

Modules

This is perhaps the tab where you will do the most work, as this is where you can install or enable the modules to customize your pages according to your needs. This is also where you may decide on the location of the modules within your site pages. We will cover the modules and how to move them around (transplanting, positioning, and moving them within columns and within the pages) in Chapter 2, Customizing PrestaShop Theme Part I in greater detail.

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 can move them up or down of the columns, you may also position them in the left or the right column, and you may disable them.

In the version prior to PrestaShop 1.3, you also have the option whether you want to add a new module or purchase one from the PrestaStore. However, after v1.3 was released, this has been disabled.

The list of the existing modules that are readily available in PrestaShop 1.3.1 are:

  1. Advertisement – 1 module

  2. Stats Engine – 5 modules

  3. Products module – 6 modules

  4. Payment – 8 modules

  5. Tools – 14 modules

  6. Blocks – 23 modules

  7. Stats – 25 modules

In order to make the modules work, you will have to check if it is installed and enabled. PrestaShop buttons are simple; when you see the Uninstall button, which is towards the rightmost portion of each module, it indicates the module has already been installed. If you see a 'tick' next to the installation button, it means that the module is already in the enabled state. Some will need to be configured where >>Configure is shown next to the module title and descriptions.

The one that controls the images that appear on your main page can be found at Modules | Tools | Home text editor v1.5. All you need to do is make sure it is installed and enabled. By clicking >>Configure, you will be taken to a page where you may modify it according to your requirements.

Tools

A number of tools are provided to simplify your task in making your PrestaShop store work. The following explains in brief what each sub-item in the Tools tab does:

  • LanguagesThis tab is where you set the language interface. The default languages included in the PrestaShop pack are English and French. You can add new languages and set the default language option here.

  • Translations —Here you can modify translations, import or export language packs, or copy data from one language to another.

  • Tabs —Here you get to see a list of all the tabs you used in your store's back office admin. It also indicates the parent or child tab. You can add or delete new items here, or move them to the left or right according to your preferences.

  • Quick Accesses —Here you decide whether to make a page open in a new window or not. This is more for the admin tools.

  • Aliases —This can be used to assist with searching when a site visitor keys in a particular word. It is particularly useful for items which may be typed in wrongly, but yet you have the product in your listing.

  • Import —You can efficiently upload categories, products, attributes, customers addresses, suppliers, and manufacturers data in a .CSV file to expedite your logistics.

  • Subdomains —Cookies are different on each sub domain of your website. If you want to use the same cookie, please add the sub domains used by your shop. The most common is subdomain www.

  • DB backup —Back up your files often to make sure you don't lose information if something happens to your hosting.

  • CMS —This one is particularly useful in theming, as it is also makes the pages linkable to the modules or buttons you create on your home page. The listing in this CMS relates to the Footer link module. When configuring the Footer link module, links you checked (selected) in the particular module will appear at the bottom of your page in the footer block (if you are using the default theme).

  • Generators —This is useful for generating .htaccess and a robot file, especially related to SEO. You need to have access to your server host to create the necessary thing before generating this.

Making the most basic change to the default theme


Let's see what we can do by changing the main images (the centre and the logo), and the background color.

Time for action—Making simple changes to affect look of the store


  1. Let's start with replacing the logo and the home page logo using the back office administration page.

  2. You will need to upload the image in Preferences | Appearances.

  3. Go to Back Office | Modules | Tools | Home text editor v1.5.

  4. Replace the home page logo at the center column by configuring the module.

Now, let's try modifying the blocks. We will:

  1. Change the position of the CATEGORIES block in the left column.

  2. Disable the FEATURED PRODUCTS block

  3. Change the information in the categories.

In the following screenshot, some of the modules on the right were shifted to the left column and some columns on the right have been disabled or moved up or down. We will explain the way to do this in detail in the next chapter.

If you get into trouble, don't worry. We are just getting familiar with the PrestaShop back office control panel.

What just happened?

In this section, you have just begun a simple "theming" operation, where one of the essential elements is changing the logo on the top left of the web page. You subsequently started exploring the Modules tab as you need to replace the image in the center column. Through the Modules tab at the back office panel, you can easily upload the home page logo which is the central editorial image you see in the center column.

To sum up this action, what you have done is simply made a little amendment through the back office tabs and this is probably the easiest way to manipulate the default theme through the site element's consideration. Thus, by making simple changes, you can save a lot of time and still create a fresh looking theme unique to your store.

Have a go hero—Changing looks through simple CSS editing

Now, let's see how modifying the CSS can give a different look and feel to your page. The easiest way to review how the colors change is through online modification with the web developer tools for Firefox such as Web Developer Add-ons or Firebug.

For the Web Developer extension, go to Tools | Web Developer | Information | Display Element Information. Then move the mouse over the elements you may want to change and see what needs to be changed, and for Firebug, go to Tools | Firebug | Inspect Element.

If you want to work on the CSS file, you will need to go to Tools | Web Developer | CSS | Edit CSS, and it will be shown on your left split pane.

It is possible to edit a line from the global.css file and change the background color from white to blue to see the change on your browser. Try changing the background–color to blue, as shown in the following code

body {
	background-color: blue;
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	color: #5d717e;
	text-align:center
}

The following screenshot is what you will see on your browser when you use the Web Developer extension to find out how the website looks when you change the background color to blue.

Alternatively, you can also use Firebug and view the same element edited, as shown in the following screenshot:

As an example, using Firebug the item being pointed to is the FEATURED PRODUCTS block, which is highlighted by a blue border. You can see the HTML and CSS scripts at the bottom-left pane, whereas on the bottom-right pane you can see the style used for the element, which is #center_column div.block h4.

Try it out for yourself now. Let's try changing the background color of the website. Choose any website, and you can activate your Firebug or use the Web Developer extension tool.

You can choose any of the web developer tools to work with, whichever you are more comfortable with, although the majority of the web developers use Firebug. I used both, but I found Firebug very handy.

You can play around further to look at the possible changes in the look of your PrestaShop site, by modifying the colors of the other elements, but as you can see, there will be more steps in order to change the color of the blocks, the borders, and the fonts. Changing the colors will require a bit more of CSS know-how plus getting the right combination of colors in your scheme. This knowledge of using the Firebug or other similar web developer tools is priceless when it comes to web development or web designing. We will discuss this in greater detail in a specific chapter pertaining to modifying your web elements in terms of color and background images.

Pop quiz

  1. How can you navigate to change the image at the center column editorial block or the home page logo through your Back Office?

    1. Preferences | Appearance

    2. Modules | Tools | Block

    3. Catalog | Categories

  2. What are the Firefox extensions that we learned to use to edit the theme files?

    1. Firebug

    2. Smarty

    3. css

Planning for your online store new theme design


Now, based on the default theme layout, decide on what you want to use in your e-commerce site and list them down based on the available modules. You will also need some dummy data, that is, images of a number of products from a few categories, name of a few manufacturers, pricing, and attributes. This is important for you when you want to develop the site speedily. You don't need to be very accurate, as you may always change your blocks and modules, but it will make it easier later.

Summary


In order to make changes to the default template or develop themes in PrestaShop, you will need to know the basics of this powerful platform.

Getting familiar with how to modify the default theme will enable you to start working on building new themes from scratch.

Specifically, we covered:

  • The prerequisites of PrestaShop theming

  • The parts in the back office administration that will affect the theming process.

Now that we've learned about the functions of the parts, let's move on to learn about how you can start modifying your store and start building the right look for it. In the next chapter, we will learn more about the module blocks. Knowing how to enable, configure, and understand the module blocks will help you in your theming task.

Left arrow icon Right arrow icon

Key benefits

  • Control the look and feel of your PrestaShop store by creating customized themes
  • Learn the tips and tricks to make theming in PrestaShop easier
  • Create your own PrestaShop theme in a few simple steps
  • Learn how to use PrestaShop back office panel to make simple changes to your theme as well as tweaking the right lines of code to customize the look of your store
  • A beginner's guide packed with step-by-step exercises to simplify your task of developing a new theme for PrestaShop stores

Description

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.

Who is this book 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 work 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 do their own modifications for their PrestaShop store.

What you will learn

  • Explore the various ways to modify the default PrestaShop theme
  • Customize and tweak your theme s layout
  • Edit an existing PrestaShop theme to meet your business needs
  • Control the look of every part of your store by making the right modifications to the code
  • Make your store interactive by using third-party modules and JavaScript
  • Find the resources to make your task in developing the theme easier
  • Build your own PrestaShop theme in simple steps so that you can invest more time into creative aspects
  • Test the theme on various browsers and package it for easy deployment to your store
Estimated delivery fee Deliver to Bulgaria

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Jul 26, 2010
Length: 312 pages
Edition : 1st
Language : English
ISBN-13 : 9781849511728
Languages :
Concepts :
Tools :

What do you get with Print?

Product feature icon Instant access to your digital copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Redeem a companion digital copy on all Print orders
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Bulgaria

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

Product Details

Publication date : Jul 26, 2010
Length: 312 pages
Edition : 1st
Language : English
ISBN-13 : 9781849511728
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just €5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total 108.97
PrestaShop 1.3 Beginner's Guide
€37.99
PrestaShop 1.5 Beginner's Guide
€37.99
PrestaShop 1.3 Theming - Beginner's Guide
€32.99
Total 108.97 Stars icon

Table of Contents

8 Chapters
Customizing PrestaShop Chevron down icon Chevron up icon
Customizing PrestaShop Theme Part I Chevron down icon Chevron up icon
Customizing PrestaShop Theme Part 2 Chevron down icon Chevron up icon
Adjusting Style Sheets Chevron down icon Chevron up icon
Adjusting Style Sheets
Getting to know the basics of PrestaShop theme
Time for action—Getting to know the PrestaShop CSS files
A brief background to Cascading Style Sheets
Time for action—Modifying the maintenance mode
Modifying colors in your theme
Time for action—Deciding on a color scheme
Time for action—Changing the main page background color
Changing the blocks background colors
Time for action—Changing the default blocks' background color
Time for action—Changing the exclusive blocks' background color
Time for action—Changing the background color of the CATEGORIES block header
Changing the color in the FEATURED PRODUCTS block
Time for action—Changing the color of the background for the FEATURED PRODUCTS block
Time for action—Changing the color of the tab for the FEATURED PRODUCTS block
Time for action—Changing the background color of the footer
Time for action—Changing the header user block background color
Modifying text
Time for action—Changing the color of the text in the block header of the default blocks
Time for action—Changing the color of the text of the header on the MANUFACTURERS block
Time for action—Changing the color of the text in the exclusive blocks (CART, SPECIALS)
Time for action—Changing the color of the text in the top user information block
Time for action—Changing the color of the text of the footer
Time for action—Changing the color of the text in the center column
Time for action— Changing the color of the text in the FEATURED PRODUCTS block
Time for action—Changing the color of the text in the CART block
Time for action—Changing the size of the text in the default block
Time for action—Changing the size of the text and font style on the center column blocks
Time for action—Changing the size of the text and font style on the footer blocks
Changing the color of the border
Time for action—Changing the color of the border for the default block
Time for action—Changing the color of the border in the footer
Modifying the paragraph
Time for action—Modifying lines in the center column
Saving your changes
Summary
Applying Images Chevron down icon Chevron up icon
Steps for Creating Themes Chevron down icon Chevron up icon
Tips and Tricks to Make PrestaShop Theming Easier Chevron down icon Chevron up icon
Deploying Your New Themes Chevron down icon Chevron up icon

Customer reviews

Rating distribution
Full star icon Half star icon Empty star icon Empty star icon Empty star icon 1.5
(2 Ratings)
5 star 0%
4 star 0%
3 star 0%
2 star 50%
1 star 50%
Guiom Feb 24, 2012
Full star icon Full star icon Empty star icon Empty star icon Empty star icon 2
Ce livre est bien conçu mais il n'est pas indispensable au développeur expérimenté qui trouvera plus de réponses auprès de la communauté.
Amazon Verified review Amazon
CAMILO Aug 02, 2015
Full star icon Empty star icon Empty star icon Empty star icon Empty star icon 1
Terribly outdated. lost my money completely. It lacks a lot of resources regarding hooks and template coding. (not very good for developers) It spend a lot of pages on very basic css instructions, jquery and useless and outdated modules
Amazon Verified review Amazon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is the digital copy I get with my Print order? Chevron down icon Chevron up icon

When you buy any Print edition of our Books, you can redeem (for free) the eBook edition of the Print Book you’ve purchased. This gives you instant access to your book when you make an order via PDF, EPUB or our online Reader experience.

What is the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela