Beginning Steps to Building a Magento Template

by Michael Moores

Beginning Steps to Building a Magento Template

by Michael Moores

by Michael Moores

Discussing folder structures for templating in magentoIt all starts with the folders.

Are you a designer who is both comfortable with editing basic css and html and who is also a beginning-to-intermediate front end programmer? If so, this blog is for you! I am going to give you a quick overview of where files are located and where they go so that you can jump in and start building a Magento template. I am not outlining all of the folder structures, just the ones important to start changing the template and styling the skin.

/ app / design / frontend

This is where all the template and layout files are. These are the “skeleton” or structure of the front facing pages. The base folder contains the theme that comes with the initial Magento installation. It’s important not to change these files (a lesson I had to learn first hand) since they are meant to be fallen back to in case something goes terribly wrong. You will need to create a new theme folder like this (where package is the Magento edition you are running):
/ app / design / frontend / {package} / nicoles-sweet-theme

Inside the theme folders you will find a layout folder and a template folder. Templates are built using .phtml and layouts are built using .xml. I like to think of layouts as telling the blocks of content how to behave and look and templates actually injecting the content onto the page.

If you will be editing any admin pages, their files would be located in the adjacent adminhtml folder.

/ js

This is where all the javascript files are stored. Usually the scripts are categorized by folder into different libraries like prototype, calendars, fancy sliding thingies, etc.

/ media

This folder contains images, documents, pdfs, etc that are uploaded using the Magento uploader. This content gets entered by people while they are editing the cms. Usually this is the type of content that is part of the page information (product specs, image that goes with a post, document that gets linked in the about us page, etc) rather than a part of the skin like a gradient in the navigation bar or an icon used in a form.

/ skin

This folder is similar to /app/design/frontend in that its broken into sections by frontend and adminhtml and has a base folder that is used as a fallback to all styles. Again the best practice in this case is to make your own theme folder like this:
/ skin / frontend / {package} / nicoles-sweet-theme

Inside your theme, it is common practice to separate your assets by folder. An example of this would be: fonts, image, css.

To activate your theme, in the Magento admin go to:
system > configuration > design.

If you have any questions about the areas I’ve covered, please reach out to me. I’d be happy to talk with you.

Nicole Domanski is a founding partner and the Lead Designer for Envalo, Inc., a Beachwood, Ohio-based eCommerce solutions company.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.