One of the nice features of Magento is the ability to easily add content to a category landing page without having to edit any theme template files. This comes in handy when you have a special promotion or any urgent message you want to communicate to your customers who view certain product categories. I am going to show you how to create an alert message for customers viewing the ‘computers’ category in a demo Magento store.
The first thing you want to do is log into your admin and create the custom message. In this example, for the sake of demonstration, I will not use html as the point of this tutorial is to show you how to add your content to the category page not so much how to style the message.
Step 1: Add A New CMS Block
As you can see in the image above, you will select ‘CMS –> Static Blocks’ from the top navigation menu and you will find the option to create a new CMS block. A CMS block contains data, which you have full control over, that gets included in either a category landing page or any theme template file. Think of a CMS block as asking Magento “Can you please also add this text/data to this page for me?”
So with that said, let’s add some test data (text) to include in our category page. If you look at the image below you will see that there are a few fields you must fill out so Magento knows how to display your CMS block.
So what is the purpose of all of these fields? Let’s look at each field and how you will enter information into them in order to successfully create a CMS block.
Block Title: This is the title you see on the “CMS Block Page List” when you choose “CMS –> Static Blocks”. This is useful because when you select that option in the menu you will see a list of CMS blocks that you can edit. So the label you enter should specify the purpose of that block. In my example I call it “Computer Landing” which stands for “Computer Landing Page”. So if I need to edit it, that label will stand out and I will know that I am editing the proper CMS block.
Identifier: This is not useful for this demonstration but, for future reference, if you ever become familiar with editing Magento theme files, and wish to include a cms block, there is a line of code that you use which asks you to fill in the ‘identifier’. The rule of thing is to take the label/title of your CMS block and use this format ‘computer-landing’. Basically you turn the first letter of each word into a lowercase letter and replace the spaces between words with a hyphen (or underscore if you prefer). So for the sake of demonstration I call it ‘computer-landing’.
Store View: For the sake of simplicity, to ensure all possible ‘store views’ (This refers to the potential of having multiple views for different languages. Imagine you have an international website and display different content in English/French/Spanish. You choose if you want this CMS block to load in all store views or just a select few of them). By choosing “All Store Views” it guarantees that it will be viewed by anybody who visits your website, whether you have one more multiple store views.
Status: This determines if this CMS block will load or not. If it is ‘enabled’ then it will display for customers who visit the landing page that includes this CMS block. If you want to remove it from all ‘store views’ so nobody can view it, set it to ‘Disabled’.
Content: This is where you enter your text/information. Pay close attention to the orange “show/hide editor’ button. The default setup for your content box is to be a ‘WYSIWYG’ (What You See Is What You Get) method which means you can style it using the ‘icons’ at the top such as bold, italics/etc. It lets you create the style kind of like an office document would allow you to. If you wish to use HTML and not use the “WYSIWYG” methods, click on the orange button once and then you will notice the ‘style/format’ icons disappear:
As you can see in the image above, I am able to use html. So if you do not know html, enter the text as you want and use the style icons to format the message properly. If you wish to use HTML, press that orange button one time and start to add your content as you prefer. At this point, you are ready to add this cms block to the category landing page.
Step 2: Adding The CMS Block To A Category Landing Page
Now that you have created the content for your CMS block and saved it, it is time to add it to the category landing page of your choice. In this demonstration, I am going to add it to the ‘Computers’ category landing page. To do this, I must visit the ‘manage categories’ section.
As shown in the image above, you select the “Catalog –> Manage Categories” option in the navigation menu at the top of your admin page and when you do this you will see a list of categories to the left side of the page. In this example we are going to click on the ‘Computers” category. When you click on the category you will see the ‘edit category’ page load to the right side of your screen.
When this ‘edit category’ page loads, click on the second tab titled ‘Display Settings’, as seen below:
The only 2 fields you have to concern yourself with are the “Display Mode” field and the “CMS Block” field. As you can see in the image above, I am choosing “Static Block And Products” because I am telling magento “Not only should you load the category products as you normally do, I want you to add CMS block data that I created”. This option “Static Block And Products” must be selected for Magento to realize you are going to include CMS block data. If you did not want CMS block data, and only products, you would allow the value for that field to be ‘Products’.
Now that we are telling Magento to load products and a CMS content block, we need to tell it which CMS block to load. In the image below, you will see that I chose ‘Content Landing’ to be loaded into this category landing page.
At this point, all you have to do is save the category. Now let’s see what happens now that you have set up a CMS content block and have added it to a specific category. Below is what the category page looks like, before adding the ‘content landing’ block:
Once the ‘computer landing’ content block is loaded, this is what we will see:
To help you see the content I have highlighted it and you will notice it at the top of the products. The content block you create will load on top of the products so you can be sure that customers will notice your message before they browse products.
Summary:
You can do this for any category and can add images, html, video etc to your content blocks. Magento will load it properly just as if you were editing the theme template files except, with this method, you will never have to concern yourself with those template files. Everything is controlled through the admin.
TIP: Practice this method on a test category until you get comfortable with this concept. To do this, create a new category and look for the setting ‘ which is at the bottom of the page when creating/editing a category. Set it to ‘no’ so it will not load on your navigation menu but you will be able to view it yourself. Enter a page name in the “Url Key” field such as “testcat” and then save the category. To view the category you can type in:
https://www.yourdomain.com/testcat.html (the value of ‘url key’ field + .html) and you will be able to see if your getting the cms block to load without having to worry about people seeing this on a live category. Good luck.
Magento Development Lead
