Cult-Foo

Magento Template Advices

Tags:

Magento Template Advices

A couple of days ago i’ve finished my first template for Magento. It is new e-commerce platform with a lot of features. But it takes time to learn how it is working. So here is a couple of advices for whose who will work on creating a template for Magento.

I assume that you use fresh install of Magento.

  1. To start you need to create two dirs. Basicly you can just copy them from default theme.
    • copy /app/design/frontend/default/default to /app/design/frontend/default/your_theme (contain layout and html files)
    • copy /skin/frontend/default/default to /skin/frontend/default/your_theme ( contain pics, css, js )
  2. To assign theme to a store
    • go to System -> Configuration -> Design tab
    • choose website or store-view level
    • in Current package name, enter the name of the interface in which your new theme resides ( i.e. default)
    • in Default (under Themes heading), enter the name of the new theme ( i.e. your_theme )
  3. Disable caching to see changes you make in System -> Cache Management
  4. To make your life a bit easier you could enable template path hints to see which modules you need to edit
    • System -> Configuration
    • in the very bottom click on Advanced tab
    • choose your store ( i.e. English ) and turn on hints
  5. To edit home page go to CMS -> Manage Pages -> Home page
  6. Skeleton templates are in app/design/frontend/your_interface/your_theme/template/page/. Basic skeletons are
    • 1-column
    • 3-column
    • 2-column-right
    • 2-column-left
  7. Easy way to display products of your choosing on the home page.
    • Create a category to contain the featured products. Call it e.g. Featured & Set ‘Is Active’ to ‘No’. That way, it won’t display in the catalog menu.
    • After saving the category, please note what ID it gets. You can see it in the last part of the URL. If the URL ends with catalog_category/edit/id/8/, the ID is 8.
    • Add products for the home page to the new category.
    • Edit the Home Page (CMS -> Manage Pages -> Home Page) and add the following content, where 8 should be replaced by your category ID:
      {{block type=”catalog/product_list” category_id=”8″ template=”catalog/product/list.phtml”}}

UPDATE: second part is here

Did you like it? Help us spread the word!

14 Responses to "Magento Template Advices"

  1. firmtofu says:

    About 2 months ago I took my first stab at customizing magento. The install was a breeze. There was a ton of documentation, although it never really addressed any of the issues I was having because they were probably too simple.

    Could’ve used this list as a good hands-on starter guide. Thx.

  2. Congratulations for even attempting a custom design! Magento is very difficult to get used to. I took the silly assumption it was "just another OS-Commerce" – but how wrong I was! A mixture of XML, PHTML templates, and a hell of a lot of learning is needed! Great guide.

  3. Dan says:

    Another pointer that will save you some time. If you are using virtual products there will be no shipping questions at checkout. lol took me forever to realize that its a virtual item and it cant be shipped anywhere.

    Also, youre CSS needs to be on point to work with the templates.

  4. Julien says:

    Thanks for this tutorial elPas0 it help me to have a featured category into my front page !

  5. ParfumTrend says:

    Hi…I’m new to Magento…and trying to display products on the home page, I did all, that you suggested, but, for some reason it does not showing up. Any idea, why? Thanks, in advance

    Tamas

  6. hellojung says:

    Thank you, I hope this can help me because I still get lose in Magento. I really want to lauch my store ASAP. Are you go ing to do another part of Magento’s tutorial? If yes I will looking forward to it.

  7. elPas0 says:

    2 ParfumTrend
    check if category you created belong to root category of store you want to display products in
    check that products enabled

  8. Joe says:

    Thanks for the hints – we need all the info we can get on this topic! I can’t understand why the documentation on Magento Templates is so scare… it being so darn complicated and all! :P

  9. This is really useful, i’ve been looking for a simple guide to start a new template for this and this is just the ticket. It took me ages to figure out how to get products to display on the front page.
    Look forward to seeing more articles about magento! Thanks!

  10. Great tutorial, we’ll have to forward this to some of our customers, we get a lot of confused clients migrate to magento from other simpler solutions.

  11. Justin says:

    Thanks for the great info. I’m learning Magento as we speak for a client project and I’m sure that this will come in handy! Thanks a bunch.

    Justin

  12. I’ve been looking into magento for a while now, but not actually got round to trying one yet! This will be something I’ll be doing in the near future I think. I will be returning for more tips and advice. Thanks

  13. Nice post, have to agree that Magento is not your typical commerce product, but the power and flexibility in theme development is amazing, love that fact that you can apply various themes to individual products if need be. Once you grasp the template system and how the xml and phtml files interact then it is a breeze.

  14. Agreed with the comments above, this is a wonderful guide on a difficult topic- well done! Magento takes a lot of getting used to, but is a powerful tool for those that know how to us it!

Trackbacks/Pingbacks

Do you have something to say?