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:

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:

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:

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:

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:

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):

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.

Magento students also learn

Empower your team. Lead the industry.

Get a subscription to a library of online courses and digital learning tools for your organization with Udemy for Business.

Request a demo