Magento 1.4 Themes Design

By Richard Carter
  • Instant online access to over 8,000+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Introduction to Magento

About this book

Magento is a popular open source e-commerce project. Whilst it comes with a number of default themes to change the look and feel of your store, many people, both new to Magento and old hands, struggle with even the more basic aspects of customizing Magento themes. When you read this book you'll learn how to change the basics of your Magento theme, create a new custom theme and much more.

The book is a step-by-step guide to theming Magento, aimed at readers with little technical expertise. The first chapters introduce Magento 1.4 and Magento themes, covering Magento theme hierarchy and the key components of a Magento theme: templates, skins, layout, and locales. Later chapters delve into changing the basics of your Magento store, including methods for changing the logo of your store, adding a custom favicon (favorites icon) and integrating Twitter and Facebook into your store. More advanced topics include customizing Magento templates and XML layout files to alter a theme to your own needs and creating a custom print stylesheet.

In short, the book provides guides to common aspects of theming and customizing Magento 1.4 and equally useful step-by-step walkthroughs of integrating more unusual items in to your Magento store.   

Publication date:
January 2011
Publisher
Packt
Pages
292
ISBN
9781849514804

 

Chapter 1. Introduction to Magento

The Internet is an important sector of many businesses, both large and small, in the modern world; it's now rare for a company to not have at least a basic web presence and increasingly unlikely that a company's products are not sold online. Magento is a powerful e-commerce system, used by international organizations such as Homedics, The North Face, Samsung, and 3M.

In this chapter, you will see the following:

  • Take a look at what Magento is and what Magento can do

  • Discover the differences between Magento 1.3 and Magento 1.4

  • See the default themes that come installed with Magento 1.4

  • Look at a showcase of custom Magento themes from real websites

  • Find out the particular challenges in customizing Magento themes

  • Install and configure Magento 1.4 ready for theming

As you will come to see, Magento is quite a large e-commerce system and this book will guide you through customizing its quirks and eccentricities.

 

What is Magento?


Magento Commerce (http://www.magentocommerce.com) is an open source e-commerce framework: simply, it's a free to use and modify way to start selling products online.

Magento is written in the PHP programming language using an object-orientated architecture, allowing features such as additional payment gateways, integration with social networks such as Twitter and Facebook, and customization for different product types to be easily added.

The default installation of Magento provides a huge number of e-commerce and related features, supports multiple stores being managed from the same control panel, and—importantly for us—provides the ability for very heavily customized themes. The system has been criticized for being slow to load, which can be at least partially mitigated with the use of built-in caches.

Magento's features

As with other e-commerce systems, Magento allows products to be added, edited, manipulated, and organized within categories. You are able to control your products' names, descriptions, prices, and upload multiple photographs for each product in your store. Magento also lets you create variations of products in your store, so you can have one product which is available in multiple colors (such as blue, red, and black) within Magento. In other e-commerce systems, you may have to add the blue, red, and black products as three separate products.

In addition to these 'standard' e-commerce features, Magento also has provisions to perform the following:

  • Manage both the sending of e-mail newsletters and the managing of subscribers to these lists

  • Manage non-product pages through its content management system (CMS)

  • Organize polls of your store's visitors

Additional features are available in the other versions of Magento; Magento Enterprise Edition and Magento Professional Edition, but this book concentrates on Magento Community Edition and everything in this book can be applied to all editions of Magento.

Differences between Magento 1.3 and Magento 1.4 themes

There are some fairly major changes between Magento 1.3 and Magento 1.4. Magento 1.4 fixes some known bugs and adds new features, some of which had to be added as separate modules in Magento 1.3, including the use of canonical URLs.

It is not only the features of Magento that vary between versions 1.3 and 1.4, although the structure of themes has changed quite significantly. In particular, the way theme hierarchy works in Magento 1.4 has been changed to allow greater modularity between themes. That is, the new theme hierarchy in Magento means that there should always be some styling to elements in your theme if you forget to style them.

In addition to this, default classes and ids used in Magento 1.3 have been changed in Magento 1.4 and the .phtml templates, that a Magento theme is comprised of, have been changed to provide improved accessibility in places, or just to better accommodate new or changed functionality. In particular, alt and title attributes have been added to the markup and HTML has been validated throughout the template blocks.

As such, porting a Magento 1.3 theme to Magento 1.4 is likely to be a very tedious task, and you may well be better off starting the theme from scratch.

 

Default Magento 1.4 themes


By default, Magento comes with three different themes:

  • Default

  • Modern

  • Blue

You can easily preview these themes on the Magento demonstration site at http://demo.magentocommerce.com, and by selecting an option from the Select Store drop-down box located in the footer of the site (Main Store displays Magento's default theme):

Magento Default theme

The Default theme is what you see when you install Magento 1.4. The homepage is based upon a three column structure:

In the preceding screenshot, you can see the distinction between each column with the central column being used for content and the side columns being used for additional information such as the shopping cart, product tags, and advertisements for products within your store.

Product pages display a prominent picture of the product in a two column layout:

On the product page, you can see Magento adds a breadcrumb trail to where the page is located within your store's hierarchy, as well as including multiple photographs of the product which can be enlarged.

Finally, each product category page reverts to the three column structure of the homepage:

The category page reverts to a three column layout, presenting products as a grid by default. As it is common across many Magento themes, you're able to view products in two distinct ways: Grid view displays products in a grid:

List view allows for more information about products to be displayed alongside the product photograph and other information shown in the grid view:

Once you have installed Magento, you'll see that your Default theme looks a little different as you won't have any products or content in your store yet:

Modern theme

The Modern theme also comes with the default Magento installation and presents a more modern, clean design for your store, with space for a large splash image to advertise a particular seasonal product or offer:

The product category page is much less cluttered than in the Default theme and uses a two column layout, with the familiar Grid and List views for products in the store:

The Modern theme's product page follows a similar layout to the category view:

Blue theme

Magento's Blue theme is based upon the Default theme, with a slightly cleaner look than the Default theme:

 

Showcase of Magento themes


There are a plethora of e-commerce websites that make use of Magento and some of them truly demonstrate how flexible Magento can be when it comes to theming. Here is a selection of live Magento stores that really push the platform beyond the typical Magento themes you've already seen:

Harvey Nichols

Harvey Nichols is an upmarket department store with stores across the UK. Their Magento store (http://www.harveynichols.com) reflects the position in the market and presents images their customers would be familiar with:

As you can see, the store's homepage is heavily styled away from the default themes available in Magento and with their primary category navigation displayed to the top-right of the screen, it makes these highly visible to customers.

When interacted with, the store's category view expands to display more specific sub-categories:

The product detail view is also heavily customized, with information on the product, delivery, and size guides all provided with their own separate blocks:

Mark One

Mark One (http://www.mk1.co.nz) is a New Zealand based graphic novel and comic book specialist:

As you can see, the homepage is quite heavily customized, with the latest products displayed across the top of the page and the store's latest news listed beneath. The homepage is actually based on the WordPress blogging platform with the relevant data pulled from Magento.

The product detail page, which is part of the Magento store, is similarly styled in an appealing way, with plenty of screen space given to information about the product and related products being listed beneath:

Zhu Zhu

Zhu Zhu (http://www.zhu-zhu.co.uk) is a 'natural well-being' store based in the UK. The homepage is quite graphically intriguing and appealing to the store's likely customers:

The footer makes good use of static blocks in Magento (you'll discover more about these in a later chapter) to tell customers about the store, delivery, and payment options available to them:

The product detail view also heavily customizes Magento: note the customized graphics for the 'zoom in' bar for product photographs:

 

Challenges of Magento theme design


Magento is a comprehensive and at times, a complex system, and this is reflected in some of the challenges that designers come across in creating themes for Magento:

  • Complexity: as Magento is a large system, it can initially be infuriating to theme for, though after some time you should become more familiar with Magento's inner workings

  • Breadth of knowledge: Magento theming involves tackling a mixture of XML (for layout files), CSS (for style), (X)HTML and snippets of PHP (for the templates)

  • Lack of documentation: while the Magento community is large and still growing, you may find that many of the help documents on the Magento website are a version more out-of-date or offer inadequate help

 

Why create a custom Magento theme?


There are a number of reasons you would want to create or customize a Magento theme:

  • The first and most obvious reason to customize your Magento theme is that this can help you to distinguish your store from your competitors.

  • Customizing your Magento theme can also allow you to better integrate extensions from Magento Connect in to your store, with additional features.

  • If you have an existing website and wish to add e-commerce by integrating Magento around the existing system, theming Magento can make sure that there is a visually seamless integration between the two systems.

  • Theming Magento can also be useful to customize your store to reflect different expectations of your customers from around the world. For example, customers in some countries may expect components of your store to appear in one location on their screen, so you could theme Magento to reflect this if your customers are primarily from that country.

 

Installing Magento 1.4


Before we get started with customizing the look and feel of our Magento store, you will need to install Magento 1.4.

Pre-installation check: magento-check.php

If you're not sure if Magento will be supported by your hosting platform, you can try running the Magento Check utility available from the Magento website at http://www.magentocommerce.com/knowledge-base/entry/how-do-i-know-if-my-server-is-compatible-with-magento:

Tip

Using the utility is much quicker than attempting to upload and install Magento, so it's worth trying if you're unsure!

Extract the magento-check.php file if necessary and upload it to the server you wish to run Magento on (for example, example.com/magento/magento-check.php). Use your browser to visit the file; you should see this if your server is able to support Magento 1.4:

If the Magento Check tool tells you that you're unable to use Magento on your server, the Magento Check tool lists any requirements it has that are not met, such as in the following example:

Downloading Magento 1.4 Community Edition

To download Magento 1.4, go to the Magento Commerce website at http://www.magentocommerce.com/download and click on the Download button corresponding to the latest version of Magento Community Edition after picking your desired download format (.zip, .tar.gz, or .tar.bz2):

Save this file to your computer and extract it from its compressed format. You can then upload the Magento files to your server using FTP.

Tip

Be patient

Uploading the files to your server can take some time as there are a lot of them—Magento is a complex package!

Installing and configuring Magento

Once this is done, visit your Magento installation's directory (for example, example.com/magento) and you should be redirected to the Magento installation wizard (say, example.com/magento/index.php/install), where you'll be presented with a license agreement:

To continue the installation, read through the agreement and then check I agree to the above terms and conditions (assuming, of course, that you do agree). Once you click on the Continue button, you'll need to configure the Localization settings:

Select your Locale, Time Zone, and Default Currency—by default these are set to American values—and then click on the Continue button.

Configuring file permissions

A common problem at this stage is incorrect directory permissions preventing Magento from changing settings on your installation. For example, you may come across this error message:

To change file permissions, you can usually right-click on a particular directory on your server within your FTP program:

Be sure to apply the new file permissions to files and other directories within the directories. As in this example, the common directories that need their permissions changed in order to fully install Magento are:

  • /app/etc

  • /media

  • /var

Configuring Magento

Next, you will need to configure the database and other settings for your Magento installation, which are split in to three steps:

  • Database Connection

  • Web access options

  • Session Storage Options

Some of the fields here—Host, Database Name, and User Name—are already populated, but you may need to change these. You will probably need to provide a password for the database under User Password.

Tip

Tables Prefix

The Tables Prefix field allows you to get Magento to add a common phrase before each table's name in your database. This is particularly useful if you're installing Magento in a database with other existing software such as Wordpress or Drupal. An example value you could use here might be magento_, which would rename a table called users to magento_users in your database.

Scroll down to the next stage of this section of the installation, Web access options. Magento does its best to populate these fields for you, so you probably won't need to make any alterations at this point:

The Base URL field is the location of your Magento installation; the Admin Path field tells Magento where to locate your administrator panel. By default, this field's value is set to admin, meaning that if you had installed Magento at example.com/magento, your administration panel would be reached at example.com/magento/admin.

The final step at this stage of the installation is to set the Session Storage Options; by default the value of the Save Session Data In field is set to File System; that is how we'll leave it:

You can now click on the Continue button to progress to the next stage of your Magento installation: the creation of your Magento administrator account.

Creating your Magento administration account

Finally, we need to complete the Create Admin Account step, which is broken in to three stages:

  • Personal Information

  • Login Information

  • Encryption Key

The Personal Information stage requires you to enter your First Name, Last Name as well as your e-mail address (Email). All of these fields are required, so you won't be able to complete installation of Magento without entering values in them.

You need to fill in the Login Information section next: this creates your Username which you can use to log in to your Magento installation.

Tip

Password requirements

The password you chose at this stage must be at least 7 characters long and contain a mix of numbers and letters to be accepted by the Magento installation wizard.

The last step is to set an Encryption Key if you want to set a custom one. Magento uses the encryption key to help secure information in your store such as credit card numbers and passwords, so it's worth making it as obscure as possible and remembering not to share your encryption key for Magento with anyone else. If you don't enter a custom encryption key, Magento will generate one for you, which is displayed on the subsequent screen once you have completed the Create Admin Account step of installation and clicked on Continue:

 

Summary


You've now seen what Magento can do, and the changes and improvements in this newer version of Magento. Perhaps more importantly, we've installed Magento too, so it's ready to start theming! The remainder of this book covers customizing your Magento theme, from the basics such as changing your store's logos and color schemes to e-mail templates, and more.

About the Author

  • Richard Carter

    Richard Carter is a seasoned front-end web developer who has worked with Magento since 2008. He lives in Newcastle upon Tyne in the North East of England.

    He is the founder of the e-commerce agency Peacock Carter, an e-commerce and web design agency based in the North East of England, and has worked for clients including the Scottish Government, City & Guilds, NHS, and the University of Edinburgh.

    Richard is the author of four books on Magento, including Magento Responsive Theme Design, and has written three further books on e-commerce and content management systems.

    Browse publications by this author
Book Title
Unlock this full book with a FREE 10-day trial
Start Free Trial