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.
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.
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.
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.
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):
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:
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:
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 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 (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 (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:
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
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.
Before we get started with customizing the look and feel of our Magento store, you will need to install Magento 1.4.
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:
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.
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.
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
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.
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:
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.