PSD to Magento: The Basics of Theming Magento

With over 240,000 users, Magento counts among the most popular eCommerce platforms in the world. This open source software runs in PHP and supports extensive visual and UI customization. We will learn the basics of converting PSD templates to Magento in this PSD to Magento tutorial.

New to Magento? Check out this course on getting started with Magento.

PSD to Magento Conversion: Requirements and Expectations

The PSD to Magento conversion process is long and complicated. It also requires mastery over multiple languages and a thorough understanding of the Magento platform. Before you can start the conversion, you will need the following:

  • Sliced PSD template: The original Photoshop file, sliced up and ready to use in the Magento theme. You should have separate templates for every page on your site (home page, about page, contact page, etc.). You can learn how to slice PSD templates in this course on converting PSD to HTML/CSS.
  • Images: You will need both placeholder images for on-page elements, as well as a logo and favicon. Having these at hand will make the conversion process significantly smoother.
  • Fonts: If you are using any custom fonts, make sure to have the appropriate font files (in *.TTF) at hand. A much better alternative is to use a service like Typekit or Google Fonts.
  • Development environment: Before you can create Magento themes, you need to set up a Magento development environment on your local host. You can use MAMP (Mac OS X, Apache web server, MySQL database management system, PHP development language), WAMP (Windows) or LAMP (Linux). Learn more in this tutorial

Besides these, you should also be proficient in PHP, HTML, and CSS. A solid grounding in JavaScript will help as well. You should also know your way around the Magento platform, including its file and directory structure, template requirements, etc.

A fully finished Magento template should adhere to the following standards:

  • The HTML and CSS code must be W3C compliant. This means it adheres to the standards set by W3C. You can check for compliance at the W3C validator.
  • The HTML must be SEO friendly, that is, it must use appropriate HTML tags to ensure a search friendly experience.
  • Cross browser compatibility, that is, the website must render equally well in all popular browsers such as Mozilla Firefox, Google Chrome, Internet Explorer and Apple Safari.
  • The theme must also be fast, must be upgrade friendly, and must adhere to high standards of usability.

Want to learn HTML, CSS, PHP and JavaScript? Learn how in this bestselling course on becoming a web developer from scratch.

Understanding Magento Design Principles: Websites, Stores and Store Views

Developing themes for Magento is slightly complicated because of the way Magento handles website structure. Unlike WordPress, where each installation is associated with one blog, Magento is built from the ground up to host multiple stores on the same installation.

Thus, in Magento, you have the following:

  • Website: The main store that holds all the customer information and shopping cart. Each website can contain multiple stores, each of which can share customer information.
  • Store: A ‘store’ in Magento is a collection of store views (see below). A store is basically a categorization tool use to organize different stores better.
  • Store Views: A store view is the actual store in Magento. You can have multiple store views, say, for different languages, and all of these store views can share customer information across them.

Let us consider an example to understand this better.

Suppose you have to set up store for a company named ‘Awesome Widgets LLC’. Since the company is a startup, you just need a single store serving English language customers.

Your website structure would be something like this:

psd to magento1

Now let us say Awesome Widgets starts to grow (thanks to your amazing website design, of course) and wants to expand to the Hispanic market. Thus, it creates a copy of the store, but for Spanish language customers.

You can do this by adding another Store View, which can share customer information and design elements across the English language store.

psd to magento2

As the startup grows, it discovers some of its products are selling well among wealthy customers. To better serve this demographic, Awesome Widgets LLC decides to create a separate store for high-end products. This store will have separate English and Spanish language versions as well. However, customers can still use their login information on the low-end product store.

This is what the structure will look like now:

psd to magento3

This way, you can have dozens of stores for different demographics and products all grouped under the same brand umbrella. This makes managing both customer data, design assets, and product information remarkably simple (even if it posits certain design challenges in the initial stage).

Design Packages and Themes

Each installation of Magento can host multiple websites, stores and store views. In turn, each of these can use multiple themes between them. It is possible to have one website with dozens of stores in different languages that share the same theme. It is also possible to have several stores with radically distinct themes.

All themes in Magento are grouped into design packages:

  • Design packages are groups of related themes. A design package can have any number of themes, and each website can have any number of design packages.
  • Themes are the actual templates composed of elements that control the layout and design. Each store view must have at least one theme inside a design package.

Magento Theme Structure

With this out of the way, let us look at the actual structure of a Magento theme.

Go ahead and grab a copy of Magento Community edition from the Magento website here.

Unzip the file and extract it to a directory on your desktop.

If you open the directory, you should find something like this:

psd to magento4

The important folders for us are app and skin.

Each theme in Magento is primarily composed of two elements:

  • Layout elements: This includes files that control how the website page is rendered, i.e. HTML, PHP, etc.
  • Design elements: This includes all files that control the page’s visual elements, such as images, CSS, etc.

All layout elements are housed in the app -> design directory, while all design elements in the skin directory.

You will notice that each of these folders are further sub-divided into three folders, namely frontend, adminhtml and install. For theming purposes, we will concentrate only on the frontend folder.

Layout Elements

If you open the frontendfolder in the app -> design directory, you should see the following three folders:

psd to magento5

These are different design packages. Default is, as you might have guessed, the default design packages. This package itself contains multiple themes:

psd to magento6

For now, let us look at the modern theme in more detail.

psd to magento7

There are three important folders here (we can ignore etc folder for now):

  • Layout: This directory contains the XML files that control the basic block structure of each page. It also controls how the page is encoded.
  • Template: This folder contains PHTML (PHP + HTML) files that control the page structure and HTML markup necessary for creating template files.
  • Locale: This is Magento’s “translation” folder. It contains the translation strings in different languages for all the messages and alerts produced by Magento.

Design Elements

As mentioned earlier, all design elements are located in the skinfolder. Like the app -> design folder, it also contains a frontend folder, which, in turn, contains folders for three different design packages.

If we look inside the default design package (skin -> frontend -> default), this is what we will see:

psd to magento8

These are names for different themes. ‘German’ and ‘French’ folders contain logos for different language websites.

Let us look inside the modern theme:

psd to magento9

Here, we see two folders. Both of these should be quite self-explanatory: the CSS folder contains all relevant CSS files, while the images folder contains theme image files.

favicon.ico is the theme’s default favicon.

Creating themes from PSD templates in Magento essentially follows the same process as creating themes for any other CMS like WordPress, except that all files and folders are categorized as shown above. After slicing the PSD template, you will have to modify the basic default theme to fit your theme requirements and add appropriate CSS and images. Unfortunately, this is a long and complicated process that can’t be covered in full detail here. Check out this course to learn the basics of PSD to HTML conversion, which you can later apply to Magento.