Step by Step guide to create a Sub Category Landing page in Magento

Step by Step guide to create a Sub Category Landing page in Magento

UPDATE: We now have a working version of the sub_navigation.phtml file for Magento Community edition:  1.7.2.0. You can jump straight to thecode by clicking here.

Here is a step by step guide to creating a sub-category landing page in Magento Community edition: 1.6.2.0. Some of the code was updated from posts elsewhere, but the key things that this does that I couldn’t find elsewhere are:

  • Uses the description of the sub-category on the landing page
  • Uses the image that is set for the sub-category on the landing page
  • If an image is not set for the sub-category, it uses an image for one of the products in the sub-category


The code that I have copied below has been styled for my customer, so you may need to adjust the style of the output to match your site, but here is how it looks for our customer:

KK-Sub-Category-landing-page-magento

  1. Create a file called sub_navigation.phtml
  2. Paste in the following code (please note this is the code for Magento Community 1.6.2.0 – for the new 1.7.2.0 code, please click here:

    1. Upload the sub_navigation.phtml file to this directory on your web server:
      /app/design/frontend/base/default/template/catalog/navigation
    2. Log into Magento Administration Panel and Click CMS > Static Blocks
    3. Click Add new Block
    4. Set block title; Sub Category Listing, Identifier; sub_category_listing, Status; Enabled and Content;
      {{block type="catalog/navigation" template="catalog/navigation/sub_navigation.phtml"}}
      edit-block
    5. Click Save block.
    6. Click Catalogue > Manage Categories
    7. Click on a Category (make sure it is a category with sub categories)
    8. Click on the Display Settings tab
    9. Change Display Mode; Static block only, CMS Block; Sub Category Listing, Is Anchor; Yes
      catalogue-category

  1. Click Save Category
  2. Now when you navigate to that category in your magento site, you will see the sub category landing page.
  3. You can repeat steps 8 to 12 for as many of your categories as you wish.

Magento Community 1.7.2.0 sub_navigation.phtml file

Thanks to the community, we now have a working version for 1.7.2.0.

  • ASQ

    Hi

    Great tutorial exactly what i need. Followed all the necessary steps however doesnt appear to be working on the latest version of magento CE……

    • Stuart Churchill

      Hi ASQ. Please let me know how you are getting on. If you need any direct help from me, please contact me using the email address on the contact page.

      • sandeep

        but in magento 1.7 show the parent category image and i waana to show total subcategory with images when click on parent category

  • Gareth

    Hi there,

    Cant seem to get this working as well on latest community version – been trying for days now but with no luck. clean all cache e.t.c. Hope you can help as weve been looking for this for ages!

    • Stuart Churchill

      Hi Gareth. Please let me know how you are getting on. If you need any direct help from me, please contact me using the email address on the contact page.

  • Tim

    Hi Stuart,

    I’ve been looking for thing for the longest time, but I can’t get it working for magento 1.7.0.2. It just shows the category title and nothing else in the content area, even though there are multple sub categories. Please help! 🙁

    • Stuart Churchill

      Hi Tim. Please send me a mail directly using the details on the contact page. Hopefully then I can help out. Stuart

    • sastha

      plz add the image for category….its work in 1.7.0.2

      • Stuart Churchill

        Hi Sastha

        I’m sorry I don’t have a test environment for 1.7.0.2 set up at the moment.

        Stuart

      • Hemant

        its so easy..add new product..there is one option images so u cn easily add new image for your product

  • Richard

    Thanks for this looked promising but not working in latest CE version.

  • Hi Stuart,

    Thank you very much for this great tutorial .. I apply it on my website and it’s working, the only problem is it’s only show 2 sub category ( actually I have 5 subcategory)
    Can you help me please ? I’m not a programmer, I’m just a beginner and I know ony basic html and a little css .. 🙁

    I’m sorry if I give the trouble ..

    Thank you soo much ..

    With warm regards,

    Celest

    • That’s allright .. It’s ok now .. 😀
      Thank you so much

      • Stuart Churchill

        Hi Celestine

        I’m glad to hear that you have this working now. Is it possible that you can share what you did to make it work? I’m sure some of the other readers would be interested as this isn’t an easy thing to get working, Perhaps just a copy of your .phtml file?

        Thanks

        Stuart

  • ASQ

    Hi guys

    Managed to get this working code 🙂

    Its not allowing me to paste the code for the sub_navigation.phtml for some reason.

    If anyone needs this just drop me an email amar786amar@hotmail.com 😀

  • Rhys

    Has anyone got a working code for this 🙁

    • Stuart Churchill

      Rhys

      Try dropping an email to amar786amar@hotmail.com. I’ve sent an email to try to get a copy of the .phtml file, but haven’t had a response yet.

      Stuart

      • Rhys

        I’ve had no response yet Stuart. Have you got any idea’s?

        • Stuart Churchill

          Send me over your .phtml file and I will see if there is anything I can see that is obviously wrong.

  • Rhys

    Do you have a direct email address? Just drop me an email, rhysg@advance-enterprises.co.uk

  • Peter

    Hi, may I ask the good code for Magento 1.7? Thank you.
    speterhun(at)hotmail(dot)com

  • Peter

    looks like not 🙁

  • Peter

    Solved, thanks for myself 🙂

  • Anyone know how to get the “thumbnail image” to show on the landing page instead of the “image” from the sub category.

    • Hemant

      go to system->configuration->design->product image watermarks….set browse..Thumbnail Watermark from your local computer

  • David

    It’s amazing people come here to use someone else’s idea and then modify it to get it to work with 1.7 and not share that with others!

    What’s up with that?

  • Harry

    Hi,
    thank you for the great tutorial.
    I have done all steps but my Magento 1.7.0.2 sends out the message: Parse error: syntax error, unexpected ‘endif’ (T_ENDIF) in ..sub_navigation.phtml on line 109 of your source code.

    Have you any idea what could be wrong?

  • Andrew

    Hi!

    Magneto 1.7.0.2 not working. Please help!

    • Andrew
      • Hemant

        but whats problem ? which type of error u hv got ?

  • Hemant

    Hello i am new in magento….can u help me out..how to make category list in dropdown menu way……

  • Hemant

    Hello sturt i am new in magento..can u helped how to make ctaegory list in dropdown way…

  • FIX FOUND

    The problem is from copy and pasting from this blog to your magento backend.. Step 6 says to put the block information into the custom block window.. if you copy and paste whats on this blog it copies the wrong type of quotes… it will break magento.. replace the quotes with your quotes.. Example.

    Original
    {{block type=”catalog/navigation” template=”catalog/navigation/sub_navigation.phtml”}}

    Should Be:
    {{block type=”catalog/navigation” template=”catalog/navigation/sub_navigation.phtml”}}

    Not sure if it will sanitize my quotes also, but just replace all the quotes after you paste it into the CMS.. Worked for me.

    • Thanks Stuart for this tutorial. Exactly what I was looking for and worked exactly as you state.

      I had the same problem that everyone else had where nothing appeared in the content. Thanks Mike for pointing out when you paste the code, the quotes are not correct. With that everything worked perfectly well.

      Thanks Stuart and Mike,
      Amit

  • Yea the comments quotes get changed also, so my pasted example wont work either.. so just replace the quotes after you paste it into magento.

  • thanks for this guide.
    I follow step by step your tutorial, but nothing appears in my category page.

    Y trie to put some text in the CMS block, it’s appear.
    I don’t understand why my sub categories don’t appear on the category page.
    have you got an idea ?

    • my magento version is 1.5.1.0
      Imade some tests, there is something wrong with the php code, but i don’t no what.

  • Dogan

    I have 5 categories and i can see only 4 of them can you help me ?

  • Steffen

    Hi!

    Works great but when i am viewing a category which is using this file the last nav point in the left sidemenu is allways shown as active.

    Do you have a solution?

    Greetings

    Steffen

    • Jason Watt

      Hi Steffen

      I had the same problem with everything working well but layered navigation menu defaulting to the last category and discovered it was resetting the current category in the code. So after the last endforeach around line 193 I added
      $layer->setCurrentCategory($_maincategorylisting);

      Which sets it back to the original category.
      And thanks Stuart

  • Yogesh

    Yes the problem was with the quote, just copy the code in your cms static block and then delete the quote and type with your keyboard and it will work fine with Magento 17. and also previous versions as well. Thanks to @Stuart for sharing code.

  • thank you so much , God Bless you 🙂

  • Hi

    Apologies for the delay in getting back to you Stuart, I’ve emailed you a working copy of the file. Anyone else that requires this please just email me at amar786amar@hotmail.com

  • Very nice, after search high and low for 1 day. the this code works !
    just follow the steps above and remember to make one changes below;

    replaced the comma below with your keyboard comma . thats it !

    {{block type=”catalog/navigation” template=”catalog/navigation/sub_navigation.phtml”}}

    Thank you editor !

  • Hallo thank you for the codes!

    I av set this according to the steps described, but the sub catagories do no show on front end.
    can some one help me, i am a newbie in Magento.

  • Justin

    Thanks for this – I’ve been trying to get something similar to work for a while now. Your solution is better than most because it doesn’t require images for every sub-category I reckon.

  • Pete Nicholson

    Anyone got a working version with 1.7.0.2? I have 1 sub category showing up and I cannot seem to change it!! I know it is nearly right in the code!!!! Cheers

    • Hi Pete
      If you send me the code by email, I will create an update to this post so that hopefully the community can help out with an answer.

      • Pete Nicholson

        What email do I need to send my phtml file too?

        Cheers!!!

      • Pete Nicholson

        What email can I send you my phtml file too? Cheers

        • Please send any emails to mail@churchillit.com

          • Pete Nicholson

            Sent this mate. Cheers!!!

          • Pete Nicholson

            Actually I have this working now on some categories! Brilliant stuff. I didn’t change anything at all, for some odd reason it was having a problem with certain categories but now on others it is working a treat. Just have to try and style it properly now!

  • This blog post has now been updated to resolve the original issue of different quotation marks causing errors, and also includes working code for Magento community 1.7.2.0. Thanks to the community for their help.

  • Del

    How do i have the category thumbnail image show instead of full size main category image ? Thanks

  • Nate

    I’m trying to get this to display in rows of three instead of four. I’ve tried adjusting the padding in the script and what not and I can’t seem to get it to work. Any advice?

  • lopezjerry29

    Hey Stuart any word on that update for it to work 1.7.0.2? Thank you. You just saved me a bunch of time 🙂

  • cloddi

    Very Good Tutorial!
    Iit works also in magento 1.8.1.0 but I have some problems if i want to show the “static block” and product. It will show only the products of the last Category. Any suggestions? Thanks.

  • Guest

    Working with magento 1.8.1.0 and tried above code. It almost works, all category headings and images pulled from site show up fine but the layout is out of wack. No rhyme or reason so it, not even it straight rows or columns. Any idea how to edit code.