Mastering Magento Theme Design

Mastering Magento Theme Design
eBook: $32.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print + free eBook + free PacktLib access to the book: $87.98    Print cover: $54.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Table of Contents
Sample Chapters
  • Create an advanced responsive Magento theme based on the Bootstrap 3 framework
  • Configure your custom theme with the Magento Admin Panel
  • Create your theme from scratch using practical live coding examples

Book Details

Language : English
Paperback : 310 pages [ 235mm x 191mm ]
Release Date : April 2014
ISBN : 178328823X
ISBN 13 : 9781783288236
Author(s) : Andrea Saccà
Topics and Technologies : All Books, CMS and eCommerce, Open Source

Table of Contents

Chapter 1: Introducing Magento Theme Design
Chapter 2: Creating a Responsive Magento Theme with Bootstrap 3
Chapter 3: Customizing Our Custom Theme
Chapter 4: Adding Incredible Effects to Our Theme
Chapter 5: Making the Theme Fully Responsive
Chapter 6: Making the Theme Socially Ready
Chapter 7: Creating a Magento Widget
Chapter 8: Creating a Theme Admin Panel
Chapter 9: Customizing the Backend of Magento
Chapter 10: Packaging and Selling the Theme
Appendix: Conclusions and Credits
  • Chapter 1: Introducing Magento Theme Design
    • The basic concepts of a Magento theme
      • The Magento base theme
        • The hierarchy of files and the fall-back system
    • The structure of a Magento theme
      • Design packages and design themes
      • Directory 1 – app
        • The layout subdirectory
        • Templates
        • Locales
        • Creating new translatable entries
      • Directory 2 – skin
        • Structural blocks and content blocks
        • CMS blocks and page
      • Magento variables
      • Widgets
    • Creating the theme
      • Starting with the app folders
      • Creating the skin folders
      • Creating the necessary files
      • Disabling the cache
      • Activating the theme
    • Tips and tricks
      • Template path hint
      • Disabling the WYSIWYG editor
    • Summary
  • Chapter 2: Creating a Responsive Magento Theme with Bootstrap 3
    • An introduction to Bootstrap
    • Downloading Bootstrap (the current Version 3.1.1)
    • Downloading and including jQuery
    • Integrating the files into the theme
      • Declaring the .js files in local.xml
      • Declaring the CSS files in local.xml
      • Removing and adding the style.css file
      • Adding conditional JavaScript code
      • A quick recap of our local.xml file
    • Defining the main layout design template
      • Defining the HTML5 boilerplate for main templates
    • Developing the header
      • Creating the top header
        • CMS block links
        • The right part of the top header
      • Creating the main header
        • Logo
        • The top cart
    • Creating the navigation bar
      • The top menu bar
      • Search
    • Developing the footer
      • Creating the CMS blocks from the admin panel
      • Adding the newsletter block
    • Summary
  • Chapter 3: Customizing Our Custom Theme
    • Developing the home page
      • Configuring the structure of the home page
      • Creating the slider row
      • Creating the CMS block for the carousel
      • Creating the CMS block for the banners
      • Creating the CMS home page from the admin panel
      • Customizing the look and feel of the home page with CSS
      • Creating the content row
    • Customizing the left sidebar
      • Removing the default blocks from the sidebar
      • Creating a vertical navigation menu on the sidebar
    • Customizing the main content
      • Adding a block with some products of a specific category
    • Customizing the other pages of the theme
      • The products grid
      • The product page
      • File paths and handles for the other sections of the theme
    • Summary
  • Chapter 4: Adding Incredible Effects to Our Theme
    • Introducing CSS3 transitions
      • Multiple property changes
      • The CSS3 transition properties
    • Creating an animated cart in the header
      • Customizing the topcart.phtml file
      • Customizing the CSS of the cart
      • Styling the cart's content with CSS
    • Creating a stunning CSS3 3D flip animation
      • Planning the hover animation
      • The HTML code of list-home.phtml
      • Creating the CSS animation
    • Creating a custom product images gallery
      • Planning the work
      • Integrating prettyPhoto into Magento
        • Downloading prettyPhoto
        • Integrating prettyPhoto JS and CSS
        • Customizing the media.phtml code
        • Initializing prettyPhoto
      • Creating a nice image swap effect for when you hover the cursor over a thumbnail
    • Adding a custom font to our theme
      • Sources to find free and premium web-safe font
        • Google fonts
        • Font Squirrel
        • Adobe TypeKit
      • Integrating a Google font in our theme
    • Adding a custom icon font to our theme
    • Summary
  • Chapter 5: Making the Theme Fully Responsive
    • Our goal
    • Using specific CSS3 media queries
      • Large devices (.container width – 1170 px)
      • Medium devices (.container width – 970 px)
      • Tablet devices (.container width – 750 px)
      • Smartphones
    • Optimizing the theme for multiple devices
      • Testing the responsiveness of a website
      • Optimizing the top bar of the header
        • Fixing the logo row
        • Fixing the menu bar
        • Fixing the main content column
        • Fixing the products grid
        • Adjusting the footer
    • Tips and tools for responsive coding
      • Hiding the unnecessary blocks for lower resolutions
      • Flexible images
      • Initial scale meta tag (iPhone)
    • Adding mobile icons
    • Summary
  • Chapter 6: Making the Theme Socially Ready
    • Getting started with social media integration
    • Integrating the social plugin in the product page
    • Integrating the code in the product page
      • Facebook's Like button
      • Twitter's Tweet button
      • Pinterest's Pin button
      • The Google+ button
      • The + button
    • Adding the Facebook Like box to the left sidebar
      • Installing the Like box on your site
    • Summary
  • Chapter 7: Creating a Magento Widget
    • Getting started with Magento widgets
    • Developing a widget
      • Creating an empty module
      • Adding the widget to the CMS page
    • Creating a widget with options
      • Adding options to our widget.xml
      • Creating the frontend widget block
    • Adding the widget in the admin panel
    • Summary
  • Chapter 8: Creating a Theme Admin Panel
    • Creating the theme options module
      • Activating the module
      • Creating the module helper
      • Creating the configuration file config.xml
      • Creating the options file system.xml
      • Getting started with options fields
    • Overviewing the System.xml fields
      • Creating an input text
      • Creating textarea
      • Creating a dropdown with Yes/No values
      • Creating a dropdown with Enable/Disable values
      • Creating a dropdown with custom values
      • Creating a File Upload option field
    • Creating the advanced admin options panel
      • Creating a custom dropdown field
    • Interfacing the admin panel with the theme
      • Customizing the frontend
        • Getting the value of an input text field
        • Conditional options
        • Accessing a Yes/No dropdown
        • Getting the uploaded image file
    • Advanced options features
      • A dependent field
      • Adding JavaScripts inside the comment tag
    • Creating a visual color picker in admin
      • Validate options
      • Defining default values for options fields
    • A quick recap of the theme's option panel
    • Summary
  • Chapter 9: Customizing the Backend of Magento
    • An overview of the admin design
    • Changing the default admin panel
      • Installing the module to change the folder path
    • Creating a custom Magento admin theme
      • Creating the custom.css file
      • Checking the CSS overriding
      • Changing the logo
      • Using a different logo name or extension
      • Creating CSS3 gradients without images
      • Changing the background color of the header
      • Customizing the navigation
      • Customizing the footer
      • Customizing other objects
    • Creating a custom login page
      • Creating the custom login.phtml file
      • Creating the login form
      • Styling the login form
      • Adding the alert message if the data is incorrect
      • A quick recap of the complete form.phtml file
    • Customizing the retrieve password form
    • Installing the Magento Go admin theme
    • Summary
  • Chapter 10: Packaging and Selling the Theme
    • Collecting and placing all the folders and files under one folder
    • Creating the live demo preview
      • The performance of the sever
      • Sample products
      • Searching for royalty-free photos for the theme
        • iStock
        • BIGSTOCK
        • PhotoDune
      • The Envato asset library
    • Creating the documentation of the theme
      • A simple example of the ThemeForest documentation
      • The Documenter tool
      • Some tips to write better documentation
    • Packaging the theme
    • Selling the theme on ThemeForest
      • My personal experience
      • Theme pricing
    • Inserting the theme on the Magento Connect site
    • Support and updates
      • Fixing the bugs and adding new features
      • Supporting final users
    • Summary
  • Appendix: Conclusions and Credits
    • Official Magento resources
      • The Magento commerce website
      • The Magento design guide
      • Magento Front End certification
      • Magento 2
    • Useful websites on Magento
      • Excellence Magento blog
      • Fabrizio Branca blog
      • Bubble codes by Johann Reinke
      • Inchoo's blog
      • Tuts plus Magento tutorials
      • Smashing magazine
    • Free resources for design, UI, and web design
      • Responsive design
      • UI – UIX resources
      • Animations
      • Fonts
      • Social media
      • Photo stocks resources
      • Free resources
      • Selling your theme
    • Conclusions
    • Thank you

Andrea Saccà

Andrea Saccà is a web designer and a frontend developer based in the infamous, central area of Rome, Italy. He is also one of the first Magento Certified Front End Developers and he will be speaker to the first Meet Magento Italy 2014.

After his studies in Graphic and Web Design in Rome, he worked for a few renowned web agencies as a web designer, and in 2012, he started his freelance career. After two years of freelancing, he started his own web agency, 1604lab ( in Rome. You can visit the twitter page for his website at @1604lab.

He is a multiskilled web designer and a developer who specializes in creating an effective online presence for all kind of businesses, start-ups, and individuals, for customers all over the world.

Andrea is a passionate and hard-working individual with a strong ambition, and yes, he's a bit of a geek too! In his free time he likes snowboarding, playing guitar, going to the cinema, and drinking some beer with his friends.

You can follow Andrea on twitter at @andreasacca, and on his personal blog at

Sorry, we don't have any reviews for this title yet.

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.


- 1 submitted: last submission 24 Jun 2014

Errata type: Typo | Page no: 16

Under CMS pages section, the line "They are available via their own URL address that can be defined with his content from the admin as well"

Should be "They are available via their own URL address that can be defined with this content from the admin as well"

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Frequently bought together

Mastering Magento Theme Design +    Oracle 11g R1 / R2 Real Application Clusters Handbook =
50% Off
the second eBook
Price for both: $64.10

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • Create a custom Magento theme from scratch
  • Make your theme mobile-ready by integrating Bootstrap into it
  • Optimize your theme to be fully responsive and ready for multiple devices
  • Integrate sharing buttons into your theme
  • Add CSS3 and jQuery animations to enhance your theme's appearance
  • Create a widget and a theme options panel to allow the fi nal user to customize your theme in minutes
  • Change the look of the Magento backend to adapt it to your company's brand identity
  • Make money by packaging and selling your theme

In Detail

This book explores Magento theme design, from basic theme structures to an advanced options panel, and provides you with the advanced knowledge that you need on the frontend of this great CMS.

The book starts with an overview of best practices for Magento theming and explores the field of theme development, starting from the home page all the way through to mobile optimization,  analyzing advanced Magento applications such as widgets and modules. You will learn how to change the look and feel of the Magento backend to adapt it to your company's brand identity. The book will also take a look at adding functionalities such as lightbox effects on the product details page and awesome CSS3 animations on the products grid. By the end of this book, you will be able to create a new, custom, responsive, and advanced Magento theme of your own. You will learn everything you need to know to master Magento theme design, from the essential structure to the final sale in a step-by-step, tutorial style.


Written in a step-by-step, tutorial style with a lot of code snippets and hands-on examples to create an advanced Magento theme from scratch, this book is tailor-made for web designers and developers.

Who this book is for

This book is great for developers and web designers who are looking to get a good foundation in how to create custom, responsive, and advanced Magento themes. Readers must have some experience with HTML, PHP, CSS, and Magento theme design. This book will be useful for anybody who already has knowledge of the Magento frontend structure.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software