Mastering Magento Theme Design

Magento is the super-capable open source e-commerce platform that’s number one for a reason. By using this book to optimize your know-how, you’ll be acquiring the ultimate in e-tail expertise for yourself and your clients.

Mastering Magento Theme Design

Mastering
Andrea Saccà

Magento is the super-capable open source e-commerce platform that’s number one for a reason. By using this book to optimize your know-how, you’ll be acquiring the ultimate in e-tail expertise for yourself and your clients.
$32.99
$54.99
RRP $32.99
RRP $54.99
eBook
Print + eBook
$12.99 p/month

Get Access

Get Unlimited Access to every Packt eBook and Video course

Enjoy full and instant access to over 3000 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 139781783288236
Paperback310 pages

About This Book

  • 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

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.

Table of Contents

Chapter 1: Introducing Magento Theme Design
The basic concepts of a Magento theme
The structure of a Magento theme
Creating the theme
Tips and tricks
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
Defining the main layout design template
Developing the header
Creating the navigation bar
Developing the footer
Summary
Chapter 3: Customizing Our Custom Theme
Developing the home page
Customizing the left sidebar
Customizing the main content
Customizing the other pages of the theme
Summary
Chapter 4: Adding Incredible Effects to Our Theme
Introducing CSS3 transitions
Creating an animated cart in the header
Creating a stunning CSS3 3D flip animation
Creating a custom product images gallery
Adding a custom font to 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
Optimizing the theme for multiple devices
Tips and tools for responsive coding
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
Adding the Facebook Like box to the left sidebar
Summary
Chapter 7: Creating a Magento Widget
Getting started with Magento widgets
Developing a widget
Creating a widget with options
Adding the widget in the admin panel
Summary
Chapter 8: Creating a Theme Admin Panel
Creating the theme options module
Overviewing the System.xml fields
Creating the advanced admin options panel
Interfacing the admin panel with the theme
Advanced options features
Creating a visual color picker in admin
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
Creating a custom Magento admin theme
Creating a custom login page
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
Creating the documentation of the theme
Packaging the theme
Selling the theme on ThemeForest
Inserting the theme on the Magento Connect site
Support and updates
Summary

What You Will Learn

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

Authors

Table of Contents

Chapter 1: Introducing Magento Theme Design
The basic concepts of a Magento theme
The structure of a Magento theme
Creating the theme
Tips and tricks
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
Defining the main layout design template
Developing the header
Creating the navigation bar
Developing the footer
Summary
Chapter 3: Customizing Our Custom Theme
Developing the home page
Customizing the left sidebar
Customizing the main content
Customizing the other pages of the theme
Summary
Chapter 4: Adding Incredible Effects to Our Theme
Introducing CSS3 transitions
Creating an animated cart in the header
Creating a stunning CSS3 3D flip animation
Creating a custom product images gallery
Adding a custom font to 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
Optimizing the theme for multiple devices
Tips and tools for responsive coding
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
Adding the Facebook Like box to the left sidebar
Summary
Chapter 7: Creating a Magento Widget
Getting started with Magento widgets
Developing a widget
Creating a widget with options
Adding the widget in the admin panel
Summary
Chapter 8: Creating a Theme Admin Panel
Creating the theme options module
Overviewing the System.xml fields
Creating the advanced admin options panel
Interfacing the admin panel with the theme
Advanced options features
Creating a visual color picker in admin
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
Creating a custom Magento admin theme
Creating a custom login page
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
Creating the documentation of the theme
Packaging the theme
Selling the theme on ThemeForest
Inserting the theme on the Magento Connect site
Support and updates
Summary

Book Details

ISBN 139781783288236
Paperback310 pages
Read More