Magento, the popular e-commerce website platform, has, over the past few years, become a prominant player in the content management market. Utilising its robust array of features as well as its stock and sales management fascilities, Magento is a great choice for a system to manage your online store.
When setting up your Magento store, the system comes packaged with a default theme. In the majority of situations, this is not ideal. Enter theming… the process of designing and building a custom theme for your Magento store. This post is an introduction to a collection of blog posts discussing theming for Magento, general concepts and a few tips and tricks. These posts are intended as guidelines to theming and not as a verbatim point-for-point on how to create Magento themes. 🙂
Before we start, there are a few things you’ll need:
The latest version of Magento.
Self-explanatory. Found at http://magentocommerce.com
A web browser with a debug fascility.
Magento sets up various CSS styles and elements which are applied throughout the store. You’ll be best off identifying the conventions used and styling those, instead of re-creating each section.
A debug fascility could be either Firefox’s Firebug addon, Safari’s built-in debug console or Google Chrome’s built in debug console.
A design for your store.
This is where things may start getting tricky. Its generally best to stay within the guidelines in terms of the elements on the screen for each page of the store. That being said, one doesn’t want to limit the design. Therefore, a solution I found is to think in terms of a “header – footer” concept… ie, think in terms of designing “around” the content area. You’ve got a header and footer area that stay the same on all pages, while the content area changes (this includes the sidebars).
The XHTML/CSS for your store.
For the scope of these blog posts, I’d recommend having your store already built in XHTML. Just the header and footer will be enough for now. We’ll get to the content area once we’re in Magento.
A basic understanding of Magento’s architecture.
For a basic Magento theme, there isn’t much need to understand the underlying workings of the system. Essentially, just the templating architecture will suffice. This will be explained in the next blog post.
A local server installation.
This could be WampServer (Windows), MAMP (Mac) or any other local server installation. Either way, developing your theme on a local server is recommended.
And yeah, that should be all you’ll need for now. In the next post, I’ll briefly discuss installing Magento and explain the theme architecture and how to go about starting your theme off. 🙂
Leave a Reply