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

Learning Magento Theme Development

Book Description

Create visually stunning and responsive themes to customize the appearance of your Magento store

In Detail

Magento is an open source e-commerce solution. It comes with a variety of tools necessary for building a successful online shop. Magento offers many built-in capabilities, such as promotion pricing and coupon codes, detailed statistics, and SEO options. By using Magento's powerful theming engine, you can control the look, content, and functionality, and easily launch a flexible e-commerce website.

This book will help you build your own store and help you broaden your customer reach. The book is a step-by-step guide to theming Magento 1.8, aimed at readers with little technical expertise. Starting with simple changes you can make to customize your store, from changing the logo and favicon to other simple configurable items, the book moves on to cover more in-depth theming techniques to help you build a fully custom Magento theme you can be proud of.

By the end of this book, you will be able to create a new, custom, responsive, and advanced Magento theme of your own.

What You Will Learn

  • Discover Magento theme terminology and get to grips with the Magento platform
  • Change the fundamentals of your Magento theme, from the logo to product image placeholders
  • Implement your own custom Magento theme using Magento templates, layout files, and CSS
  • Find techniques to improve your store for visitors on mobile and tablet devices
  • Customize your Magento store's transactional e-mails

Table of Contents

  1. Learning Magento Theme Development
    1. Table of Contents
    2. Learning Magento Theme Development
    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. Introduction to Magento and Magento Themes
      1. What is a Magento theme?
        1. Magento's default themes
        2. The default theme
          1. The category page layout
          2. The list mode layout
          3. Checkout
        3. The blank theme
        4. The iPhone theme
        5. The modern theme
      2. Magento terminology
        1. Scope in Magento
      3. Magento websites, stores, and store views
        1. Using multiple stores in Magento
        2. Using multiple store views in Magento
      4. Magento theme files
        1. Skin files
        2. Layout files
        3. Template files
        4. Locale files
        5. Packages
      5. Magento theme hierarchy
      6. Summary
    9. 2. Magento Theming Basics
      1. Creating a new Magento theme
      2. Enabling a Magento theme
      3. Changing your Magento store's logo
      4. Customizing your store's favorites icon (favicon)
      5. Customizing Magento's product watermark image
        1. Using product images in Magento
      6. Customizing Magento's product placeholder images
      7. Using the Magento Template Path Hints
      8. Summary
    10. 3. Magento Templates
      1. Providing layout style for your Magento theme
      2. Customizing your Magento store's header
        1. Providing CSS for Magento's navigation dropdowns
        2. Altering the header.phtml template
      3. Customizing Magento's search box
      4. Adding a static block to a Magento template
        1. Creating a new static block
        2. Inserting the static block into a template
      5. Customizing your Magento store's footer
        1. Listing all top-level categories in your Magento store
      6. Customizing your store's checkout and cart
        1. Styling the cart page
        2. Styling the checkout page
      7. Summary
    11. 4. Magento Layout
      1. Adding local.xml to your Magento theme
      2. Using layout to change your default Magento page template
        1. Types of blocks within Magento
        2. Changing a page's template using the XML layout
      3. Changing a page's layout using Magento's CMS tool
      4. Adding a static block to a page using the Magento layout
        1. Assigning a static block to a page in Magento's CMS
      5. Changing the ordering of blocks in Magento's sidebar
        1. Repositioning a block below a specific block
        2. Reordering a block above all other blocks
        3. Reordering a block below all other blocks
      6. Removing unnecessary blocks from Magento's sidebar
      7. Customizing the home page's layout
      8. Adding new product block to the home page
        1. Marking products as new in Magento
        2. Using XML layout to add the New Products block to your store's home page
      9. Summary
    12. 5. Social Media and Magento
      1. Integrating a Twitter feed into your Magento store
        1. Creating your Twitter widget
        2. Embedding your Twitter feed into a Magento template
      2. Integrating a Facebook Like Box into your Magento store
        1. Getting the embedding code from Facebook
        2. Adding the embed code into your Magento templates
      3. Including social share buttons in your product pages
        1. Styling the product page a little further
        2. Integrating AddThis
      4. Integrating product videos from YouTube into the product page
        1. Product attributes in Magento
        2. Creating a new attribute for your video field
        3. Adding a YouTube video to a product using the new attribute
        4. Inserting the video attribute into your product view template
      5. Summary
    13. 6. Advanced Magento Theming
      1. Adding a custom print style sheet to your Magento store
      2. Using locales to translate phrases in your store
        1. Creating a Magento locale file
        2. The translate function
      3. Using Google Web Fonts and @font-face
        1. Including Google Web Font in your store's theme
        2. Referencing Google Web Font in your Magento theme's style sheet
      4. Styling Magento's layered navigation
        1. Enabling layered navigation in Magento categories
        2. Assigning attributes for layered navigation
      5. Creating a custom 404 "not found" error page
        1. Altering the error page's content
      6. Using snippets to enhance search engine listings
      7. Summary
    14. 7. Magento Theming for Mobile and Tablet Devices
      1. Using CSS media queries to create breakpoints for different device widths
        1. Adding the meta viewport element to your Magento theme
        2. Adding a CSS media query to your style sheet
      2. Making images responsive for your Magento theme
      3. Developing responsive navigation
      4. Adding mobile icons for Windows and Apple devices
        1. Adding an Apple home icon to your Magento store
        2. Adding a Windows icon to your Magento store
      5. Summary
    15. 8. Magento E-mail Templates
      1. Working with Magento e-mail templates
      2. Changing the e-mail template logo
        1. Sending test transactional e-mails
      3. Changing the color scheme of your Magento transaction e-mail templates
        1. Loading a Magento e-mail template
        2. Editing Magento e-mail templates through your theme
        3. Assigning an e-mail template to a transaction in Magento
      4. Altering variables in Magento e-mail templates
        1. Magento Insert Variable pop up
        2. Using the customer's first name only in e-mail templates
      5. Adding a static block to a Magento transactional e-mail template
        1. Creating the static block
        2. Adding the static block to the e-mail template
      6. Integrating the MailChimp subscription form into your Magento store
      7. Integrating the Campaign Monitor subscription form into your Magento store
      8. Summary
    16. Index