Understand the basics of PSD to Magento theme conversion

WEB DEVELOPMENT | May 11, 2016

Magento is one of the most popular e-commerce platforms across the globe with over 240,000 patrons. Based on PHP with extensive visual and customizable user interface, Magento has taken the world of e-commerce in its stride. But do you know how to convert PSD templates to Magento themes? If not, you have landed at the right place. Let’s have a wider overview how it is done!

Requirements of PSD to Magento Conversion

The PSD to Magento conversion is a time consuming and complex process. For this process, you must have thorough knowledge of multiple languages and great understanding of the Magento platform. To perform a conversion you must have following:

Sliced PSD Template: To start with you must have the original sliced up Photoshop files ready to integrate in the Magento theme. In addition, you must have specific templates for each page of your website.
File of Fonts: In case you have to use custom fonts, just ensure to have right font files in .TTF format. You can use tools like Google Fonts or Typekit for easy access to multiple font services.
Development Environment: Make sure to set up a right Magento development environment on your local server before kick starting any Magento themes or services. There are multiple options like MAMP (Apache web server, MySQL database management system, Mac OS X, PHP development language), LAMP (Linux) or WAMP (Windows).
Relevant Place Holder Images: This too is necessary to give your web pages the right and desired look. You must have placeholder images for on-pages and also a logo and favicon. It will help simplify your conversion process.

In addition, expertise in HTML, PHP and CSS is requisite. You must also have a proficiency in JavaScript as well. Having great idea of Magento platform, including its directory architecture and file, template requirement is necessary.

Checklist of Magento Template

Your Magento template must comply with the below mentioned standards:

It’s HTML and CSS code should adhere to the standards set by W3C.
It’s HTML should be SEO friendly for better performance, which can be done using right HTML tags.
Your website must run equally great in all type of browsers that includes Google Chrome, Apple Safari, Mozilla Firefox etc. making cross browser compatible.
Your theme should load fast, scalable and should comply with high standards of usability.

How Magento Design Principles Work?

Magento theme development is somewhat complex due to the way it manages the website structure.

Magento Constitutes of Following

Website: The primary website containing all the customer data including the shopping cart. Each website can have more than one store that can share customer details.
Store: It is a unique amalgamation of store views. It is tool that segregates and manages multiple different stores proficiently.
Store Views: It is the real store in Magento, which may have multiple store views, for multiple languages, audiences and all of these store views can easily share customer information with them.

All about Themes and Design Packages

Each installed Magento can have multiple websites, stores and store views. All of these can have multiple themes amongst them. You can have a single website with multiple stores in different languages sharing a similar theme. You may also have multiple stores with unique themes.

Magento Themes Vs Design Packages

Themes are templates that manage the layout and design. Every store view is equipped with design package having at least one theme inside.
Design packages are clusters of themes. Any number of themes can have in a design package and every website may contain any number of design packages.

Magento Theme Structure

Each Magento theme comprises of two elements:

Layout components which include files that are responsible for the way website pages are displayed in HTML, PHP, etc.
Design Components includes files that manage the visual aspect of the page like images, CSS, etc.

Layout Elements

Layout elements comprises of three major folders:

Layout: It is a directory holding XML files that manage the primary block structure of every web page.
Locale: It is the “translation” folder of Magento holding translation strings in multiple languages for all the notification produced by Magento.
Template: Template is equipped with PHP and HTML files that are responsible for the page structure and HTML markup, which is imperative for developing template files.