Try the Demo

Designer’s Guide to Magento

image

The Designer's Guide to Magento has been prepared for you to learn and expand your knowledge of the structural, conceptual workings and methods of designing for Magento—It will basically teach you what you need to know to begin building a store of your own with Magento.

The documentation is largely sectioned into the following chapters and can be skipped through back and forth in order to quickly access only the information you need most. However, because each chapter acts as a prelude to the next, we advise you to follow along with the documentation in the order it was written:

  1. Magento Design Terminologies
  2. Working with Magento Themes
  3. Building Your Theme
  4. Intro to Layouts

The Designer's Guide to Magento can be found at www.magentocommerce.com/design_guide

RSS comments feed for this entry

User Comments

|16 comments
  1. Travis

    1Travis |posted December 20 2007

    An enormous thanks to you Roy and the rest of the Varien team.

    I’ve been dying to see this documentation and develop an ordered understanding of the template system.

    There goes my holidays.  wink

  2. RoyRubin

    2RoyRubin from Los Angeles, CA|posted December 20 2007

    Thanks Travis. All credit goes to Minu - she’s done a phenomenal job.

  3. Saioa

    3Saioa from Barcelona|posted December 20 2007

    I’m trying to suscribe to RSS but I can’t, it don’t work.

    Error de lectura XML: la instrucción de proceso XML no se encuentra al comienzo de una entidad externa
    Ubicación: http://feeds.feedburner.com/magento
    Número de línea 2, columna 1:<?xml version="1.0" encoding="utf-8"?>
    ^

  4. Brady

    4Brady from Orange County, CA|posted December 20 2007

    Woah, nice!  Do you plan on having a downloadable / printable version as well?

    Thanks!

  5. Ross

    5Ross from Scarborough, North Yorkshire, UK|posted December 20 2007

    Looks to be a very helpful resource, thank you!  Having good documentation really does ease the learning curve.

    Seasons greetings to the Magento/Varien team.

  6. ORZ

    6ORZ |posted December 20 2007

    Thanks for the guide.

  7. RoyRubin

    7RoyRubin from Los Angeles, CA|posted December 20 2007

    @Kres - RSS is fixed

    @Brady - We’ll add a printable friendly stylesheet.

  8. Saioa

    8Saioa from Barcelona|posted December 21 2007

    Thank you RoyRubin smile

  9. warren

    9warren |posted December 21 2007

    Hi Roy and Minu

    The documentation describes how custom designs can be applied to the category or even product level. Im having some difficulty in finding how its applied in the documentation.

    Any pointers?

  10. quarx

    10quarx |posted December 21 2007

    Thanks for your guide Minu,
    it offers a good and concise introduction to the fundamentals of Magento’s design !

  11. Michael

    11Michael |posted December 21 2007

    Hi warren,

    Magento takes care of applying layout updates on category and product view pages. The layout updates can be defined in your layout files under your theme, they should be enclosed in <CATEGORY_999>...</CATEGORY_999> or < PRODUCT_999>...</PRODUCT_999> handles, where 999 has to be replaced with the category or product id accordingly.

    Category and product layout updates can also be added when editing a product or category in the admin, you just have to put xml into the corresponding fields.

    Please let us know if it helps.

    Thank you,
    Michael.

  12. Andrea, Argentina

    12Andrea, Argentina from Buenos Aires, Argentina|posted December 21 2007

    Hi!
    Thank you for this guide… I am taking my time because I have to learn CSS too ... I am a bad used designer :(

    I want to ask a question about the first excercise on this guide:
    It says:
    “# Now open page.xml and search for ‘as="right"’.
    # When you find ‘as="right"’, you’ve correctly located the structural block for the right column. You will also see that that structural block also has ‘name="right”’ assigned to it. Now you know that its content blocks would refer to this block by <reference name="right">."
    ...
    I did not finde any “right” at page.xml!! I am driving crazy with designing :(

    Thank you for help

  13. ohminu

    13ohminu |posted December 21 2007

    * asfaltagmail

    You’re right, the right column is in fact missing page.xml. This exercise will be updated to reflect the correct setp. Thank you for pointing this out! smile

  14. 1legspider

    141legspider |posted December 22 2007

    Superb documentation Minu. Thanks.

  15. Otaugames

    15Otaugames from Troyes, France|posted December 30 2007

    Thank you for this guide, very usefull !

  16. Dustin Steller

    16Dustin Steller |posted January 21 2008

    Brilliant overviews, webinars, tutorials, screecasts and documentation. As a designer, it is refreshing to see such clarity and forethought put into an app without losing (and actually gaining) functionality.


RSS: This Entry| All Blog Posts (RSS)