October 17, 2010

Magento as a CMS Tool

Magento continues to be one of the best shopping cart solutions in the market space. Although the architecture can be confusing and frightening at times, it is very powerful once you know how to use it. From merchandising your products, to exceptional SEO, all it takes are small adjustments to make your Magento implementation soar.

On many eCommerce sites, the content pages aren’t considered in the overall merchandising strategy. When used correctly, they can provide a wealth of product information, drive SEO results and therefore increase revenues. At first glance, Magento’s CMS pages look like they are just there to manage Terms and Conditions and some brief “About Us” content, so many merchants reach for other tools like WordPress to handle their content.

However, by using the URL rewrites, Static Blocks and a little extra work, Magento can render some rich, categorized content very effectively.

Magento CMS Pages

The first step to making this happen is in the creation of a new content page. Go to CMS->Pages and click on “Add New Page”.

The first thing that happens is you are prompted to input a Page Title and URL Key. Most often users enter a copy of the  page title in the URL Key, changing CAPS to lower case and replacing spaces with hyphens.

But Magento allows for just about any valid URL string you want to put in there. So, you can create content that is ‘category/sub-category/page-title’

Using this method, you can create content in any sub-category you choose.

Magento Static Block Driven Menu

Now that we have categorized content, the next step is to create a menu that links to these content items. This is easily accomplished using static blocks to create the menu lists, then by pulling those lists into the layout as required.

You can use a single block for all of your categories, but you might find it provides more flexibility to create a static block per main category. Either way, the process is essentially the same.

Start by creating a new static block: CMS->Static Block and click on “Add New Block”.

Choose the category, or menu name, you want this static block to control as the Block Title. Use something descriptive for the Identifier. You can also leverage URL rewrites if you want have a multi-lingual shop and effectively switch between languages. (see our article on setting up multi language content in Magento).

Although the WYSIWYG editor in Magento 1.4.x is an excellent addition, I’d recommend using the HTML view for this. Add the nested list of categories, sub-categories, sub-sub-categories, etc as follows (assuming the static block is for a Category):

<ul>
<li><a href="{{store direct_url="category/sub-category1"}}">Sub-Category1</a></li>
<ul>
<li><a href="{{store direct_url="category/sub-category1/sub-sub-category1"}}">Sub-Sub-Category1-1</a></li>
<li><a href="{{store direct_url="category/sub-category1/sub-sub-category2"}}">Sub-Sub-Category2-2</a></li>
</ul>
<li><a href="{{store direct_url="category/sub-category2"}}">Sub-Category2</a></li>
<ul>
<li><a href="{{store direct_url="category/sub-category2/sub-sub-category1"}}">Sub-Sub-Category2-1</a></li>
<li><a href="{{store direct_url="category/sub-category2/sub-sub-category2"}}">Sub-Sub-Category2-2</a></li>
</ul>
</ul>

You can pull this static block into your design by calling the static block in the tempate. You will likely set up the menus in the header.phtml file for example, so you would add a line such as:

<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('category')->toHtml() ?>

Use your favorite .css or .js technique to expand the menu if you’re putting it in a horizontal menu, or just let it fly as a tree list in the margin. You now have some easy-to-navigate and nicely organized content on your site. Not to mention the search engine optimization lift you’ll get out of having the category descriptor in the URL.

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • LinkedIn
  • Technorati
  • Slashdot
  • Yahoo! Buzz
  • Google Bookmarks
  • Ping.fm
  • Reddit
  • StumbleUpon
  • Suggest to Techmeme via Twitter
  • Twitter

One Response to “Organize Magento CMS Pages Into Categories”

  1. Piet Says:

    fantastic tips, thanks a lot! Have been looking all day how to accomplish this and if you believe other sites (even official Magento site) then it seems impossible to do sth so simple!


Leave a Reply