Free Sample
+ Collection

PrestaShop 1.3 Theming – Beginner’s Guide

Beginner's Guide
Hayati Hashim

Develop flexible, powerful, and professional themes for your PrestaShop store through simple steps
$23.99
$39.99
RRP $23.99
RRP $39.99
eBook
Print + eBook

Want this title & more?

$21.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849511728
Paperback312 pages

About This Book

  • 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

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 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.

Table of Contents

Chapter 1: Customizing PrestaShop
What you need to know
Getting familiar with PrestaShop
Time for action—Overviewing the back office administration panel
Making the most basic change to the default theme
Time for action—Making simple changes to affect look of the store
Planning for your online store new theme design
Summary
Chapter 2: Customizing PrestaShop Theme Part I
The default layout
Modules
Time for action—Installing and enabling modules
Positioning modules
Time for action—Installing the Home text editor module
Time for action—Installing, enabling, and configuring the Categories block
Time for action—Moving the modules within the column
Time for action—Moving the blocks
Summary
Chapter 3: Customizing PrestaShop Theme Part 2
Copying the default theme file
Logo
Time for action—Replacing the default logo and favicon on your site
The Center Editorial Block
Time for action—Modifying the Center Editorial Block
Top of pages block
Time for action—Modifying the Top of pages
The FEATURED PRODUCTS block
Time for action—Adding the FEATURED PRODUCTS block
Time for action—Adding an item as a Featured Product
Time for action—To edit, display, or delete a Featured Product
Time for action—Adding a new product to your FEATURED PRODUCTS block
Footer
Time for action—Adding new pages on the Footer Link block
Title
Time for action—Modifying your page title
Modules block
Time for action—Modifying block names
Summary
Chapter 4: 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
Chapter 5: Applying Images
Editing CSS to modify background images
Time for action—Viewing image information
Time for action—Finding the appropriate images
Time for action—Basic CSS editing for modifying background images
Repeated background image
Time for action—Repeating images horizontally
Time for action—Repeating images vertically
Time for action—Repeating images horizontally and vertically
Time for action—Using image with no repetition
Compressing properties
What to replace to get a fresh theme
Changing the background images for your new theme
Time for action—Adding a background pattern
Time for action—Changing the block header background image
Adding a new logo
Time for action—Replacing logo using the header.tpl file
Positioning background image
Modifying the home page logo
Time for action—Deleting the home page logo
Time for action—Replacing the home page logo
Replacing icons
Time for action—Replacing selected icons
Time for action—Replacing the default icons with another icon set
Summary
Chapter 6: Steps for Creating Themes
Understanding PrestaShop architecture
Visualizing what you want to achieve
Time for action—Choosing a color scheme
Time for action—Creating a new theme directory
Developing the raw material
Time for action—Modifying the layout of the main pages
Time for action—Changing the navigation by using third party modules
Time for action—Adding an item on the top menu bar
Time for action—Omitting some information from the Featured Products block
Time for action—Replacing the block header tabs and block background images
Time for action—Changing the block content color
Validating the theme
Packaging the new theme
Making a two column theme
Get Smarty
Knowing jQuery
Summary
Chapter 7: Tips and Tricks to Make PrestaShop Theming Easier
Adding more interactivity to your PrestaShop site
Time for action—Adding YouTube or other video element
Time for action—Installing and enabling the YouTube module
Time for action—Positioning the YouTube module
Time for action—Configuring the YouTube module
Time for action—Setting the player for the YouTube module
Adding carousels in your PrestaShop site
Time for action—Using the jQuery carousel
Time for action—Positioning the jcarousel within the home page
Time for action—Changing the attributes
Gallery view
Time for action—Adding gallery view
Time for action—Replacing images in the gallery
Adding interactivity in the Featured Products block
Time for action—Adding a moving box in the Featured Products block
Using top navigation menu bar
Time for action—Adding a horizontal menu
Time for action—Using multiple languages on the Wiznav top navigation bar module
Time for action—Changing the color and text of the menu bar
Time for action—Putting Categories in the horizontal top menu
Footer module
Time for action—Inserting an image in the footer module
Page peel
Free third party module files used
Summary
Chapter 8: Deploying Your New Themes
Installing a theme on a production site
Time for action—Deploying from the same host
Time for action—Deploying from another computer
Installing a third party theme "element" to your site
Time for action—Modifying the global.css for the element theme
Checking the browser's compatibility
File structure of a theme
Summary

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

In Detail

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.

Authors

Read More

Recommended for You

PrestaShop Module Development
$ 29.99
PrestaShop 1.5 Beginner’s Guide
$ 26.99
PrestaShop 1.3 Beginner's Guide
$ 26.99