O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Magento Responsive Theme Design

Magento Responsive Theme Design

by Richard Carter
Publisher: Packt Publishing
Release Date: December 2013
ISBN: 9781783980369
View table of contents
Start reading

Book Description

Good design can transform online stores and this step-by-step tutorial shows you how to create a fully customized responsive theme in the popular e-commerce solution, Magento. A must for ambitious web designers and developers.

  • Build a mobile-, tablet-, and desktop-friendly e-commerce site
  • Refine your Magento store’s product and category pages for mobile
  • Easy-to-follow, step-by-step guide on how to get up and running with Magento

In Detail

Magento is an open source e-commerce solution. It comes with a variety of tools that are necessary for building a successful online shop. Magento offers many built-in capabilities, such as promo pricing and coupon codes, detailed statistics, and SEO options. This book will help you build your own store and will help you broaden your customer reach.

Magento Responsive Theme Design guides you through the building, enabling, and customization of a responsive Magento theme. You will be able to explore different options for navigating your store on various devices and also improve your store’s one-page checkout for mobile visitors. The book is written in a clear, step-by-step format with plenty of screenshots and tips to help you along the way.

This book will help you get your custom Magento responsive theme up and running. It covers everything from creating and enabling your new theme to utilizing Magento’s category and product templates as well as its one-page checkout feature. With this book, you will learn how to successfully build a responsive Magento theme, starting from the very basics of styling your Magento store to customizing customer accounts, product and category listings, and the one-page checkout for a range of devices. Packed with tips throughout to guide you through the process and common problems, the book is written with a clear, step-by-step approach in mind.

Magento Responsive Theme Design guides you through everything you need to know to strengthen your e-commerce business.

Table of Contents

  1. Magento Responsive Theme Design
    1. Table of Contents
    2. Magento Responsive Theme Design
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Beginning a Responsive Magento Theme
      1. Creating your Magento theme
        1. Adding the basic CSS styling for your Magento theme
        2. Adding the basic XML layout for your Magento theme
        3. Adding the meta viewport element
        4. A note on Magento theme hierarchy
        5. Magento theme hierarchy
      2. Enabling your new theme in Magento
        1. Overwriting the default Magento templates
      3. Adding the media queries to your Magento theme
        1. Some other common breakpoints
      4. Styling images responsively in your Magento theme
      5. Styling e-commerce navigation responsively in Magento
        1. Adding skip to footer navigation to your Magento store
          1. Adding the skip-to link in your header template
          2. Adding the footer sitemap navigation
        2. Dropdown navigation for your Magento store
      6. Summary
    9. 2. Making Your Store Responsive
      1. Laying out your website's header and footer
        1. Adding the header and footer CSS
          1. Adding CSS for larger screens
          2. Adding CSS to change header and footer links
      2. Responsive product page layout in Magento
        1. Laying out the product image and product information
        2. Making a definitive style
      3. Responsive category page layout
        1. Category list view
        2. Product pager, pagination, and sort by dropdown
        3. Category grid view
      4. Dealing with Magento search results responsively
        1. Resizing product images
          1. Removing the height and width attributes
      5. Summary
    10. 3. Responsive Checkout and Cart in Magento
      1. Responsive shopping cart in Magento
        1. Styling form elements
        2. Removing the shipping estimate tool from the Magento cart page
        3. Styling cart tables
        4. Removing unnecessary table columns for mobile and smaller screened devices
      2. Responsive one page checkout in Magento
      3. Styling Magento customer account pages responsively
        1. Setting the account login page template to a one-column layout
        2. Styling error messages
        3. Removing the My Applications and My Downloadable Products links from the Magento customer account area
      4. Summary
    11. 4. Enhancing Your Responsive Magento Theme
      1. Supporting CSS media queries in Internet Explorer with css3-mediaqueries.js
        1. Adding a JavaScript file to your Magento theme through local.xml
      2. Improving Magento store data entry for customers
        1. Changing your Magento theme's doctype to HTML5
        2. Changing the input type value for login
        3. Changing the input type value for registration
      3. Using the CSS @font-face rule to use custom fonts in your Magento theme
      4. Summary
    12. Index