Developing themes for the Magento ecommerce platform can provide a good source of incremental income and lead to new projects.
This extra income can come in several forms. For example, you could produce Magento themes for resale on theme marketplaces or on your own site. Some royalty-free Magento themes can sell for as much as $2,500 USD while other, more basic, themes sell for about $140 USD. You can also use themes as a way to attract potential customers to your business or practice website. And finally, example themes can be an important addition to your portfolio, especially if you are just getting started in ecommerce site and application development.
About the Magento Theme Line-by-Line Series
This article is the first in a series created to walk through developing a Magento theme from start to finish. These articles are aimed at intermediate level web developers and designers, and will discuss all of the major steps and development decisions associated with theme development. What's more, the theme being created will be used on a live store, so this is not just an academic exercise. It is rather a real Magento store in the making.
The Series' Links
- Part One: Prolegomena
- Part Two: Page Planning, Templates, & HTML 5
- Part Three: HTML Validation and "Your" Labels
- Part Four: The CSS Work Begins
- Part Five: The Home Page CSS Continues
- Part Six: Product Navigation and CSS Rounded Corners
- Part Seven: More Rounded Corners
- Part Eight: The Boring Middle
- Part Nine: A Content Slider
- Part Ten: The Home Page Home Stretch
- Part Eleven: The Footer
- Part Twelve: The Search Form
- Part 13: Turning the Page
- Part 14: Facing the Horror
- Part 15: Style and Graphics for the Category Page Sidebar
- Part 16: Category Page Image and Font
- Part 17: The Category Page Grid
- Part 18: CSS for the Product Detail Page
- Part 19: Smooth Sliding Tabs
Prolegomena
In this first article, I will focus on the prolegomena—discussions of the steps that must take place before I can actually begin coding a new Magento theme. While there are certainly dozens, if not hundreds, of possible steps to plan any development project, I will assume that you are at least somewhat familiar with the planning process. Thus, I will focus on the areas that I often rush past when I am in a hurry to get a web project underway.
Business Objectives
Our Magento theme, which I am calling Pine, needs to meet some specific business objectives. And it is important to describe those objectives before I start writing any HTML, CSS, JavaScript, or PHP for our project. Generally, the site owner wants a theme that will help increase conversion rates, and, as such, wants to adjust site flow, better engage shoppers, and create opportunities for onsite merchandising.
Some specific requirements include:
- Site badges. Site badges that confirm security and trustworthiness are an important marketing tool. Also, research has shown that site trust and security badges are more effective when shown at the top of a page, so we need to find a way to integrate these artfully.
- Merchandising. Customers love sales, and they love it when we help them assemble or relate items. Our theme needs to support three or more merchandising opportunities per page, including related products, specials, or coupons.
- Customer engagement. This theme should engage customers, earning their trust, and encouraging them to sign up for emails; follow the store on Facebook, Twitter, and YouTube; and post content like product reviews.
- Branding. The theme also needs to support the store's brand and convey professionalism.
- Progressive enhancement. The site owner wants to integrate more interactivity, like content sliders, fading content, and even tool tips. So while the Pine theme will include some of these features, I want to make sure that web browsers or search engine spiders that do not support JavaScript, advanced CSS, or cutting-edge HTML features can still access all of the site's content in a professional way.
Graphic Design
I have created the basic graphic design for the Pine theme home page. This site mock up is not necessarily finished, and it is possible, if not likely, that some aspects of the design will change as the project progresses. I know that some of you want to have every aspect of your graphic design nailed down before you start. But I like to use the graphics as a guide, not a judge, when it comes to site creation.
I also created a basic color palette using Adobe's Kuler. In addition to this five-color palette, I am also used white.
Take a look at this basic design and notice that I am already working toward meeting some of the business objectives.
Finding a Starting Point
When beginning any web project, I like to have a discussion about where to start. For example, if I am building a site that requires interactive maps, I don't want to always start by creating a map application, rather I might start by integrating the Google Maps API. Likewise, if I need to add a content slider to a site, I may not start by coding a brand new JavaScript content slider from scratch. Rather, I may use an open-source plugin to get a boost.
The idea of building on top of a plugin or API—or more generally building on others' work—can and does apply to Magento theme development, too. For example, the Magento platform references several hundred CSS classes that are used on the front-end of a Magento store. If I wanted to build my theme completely from nothing, I need to address every one of these CSS classes. It might be easier to start with an existing theme—one that I have the right use—and customize that theme to meet my project's requirements.
In the case of the Pine theme, I am going to use the free, Modern Theme, from the Magento Core Team, as a starting point. The Modern Theme is made available under an Academic Free License 3.0, which grants me a license sufficient for my project. While I expect my finished theme to look and act significantly different than the Modern Theme, I can still save a lot of time by building on others' excellent work.
When you do use others' work as a basis for your theme, confirm that you have a right to do so. This is particularly important if you plan to sell the Magento theme you are developing. Also, most theme marketplaces will require links to the licenses for any plugin, API, or other work you use in your theme.
Language Considerations
Magento is built using PHP, JavaScript, HTML, and CSS, and my theme, Pine, won't fall far from the tree. But I know that I want to use HTML 5 in order to take advantage of some of that markup language's more powerful features—like geolocation and audio integration.
The choice to use HTML 5 is going to force me to make changes to several Magento PHTML templates. In fact, that is where I will start in part two of this article series.
Summing Up
In this article, I have laid the foundation for a series created to walk you through the process of developing a Magento theme start to finish. I discussed some of what you need to consider when you begin developing a Magento theme and I gave you a glimpse at the Pine theme's graphic design.
In the next article in this series, I will show you how to modify Magento page templates so that our theme will have the HTML 5 document type and include HTML 5 structure like the <header> or <article> tags.
