Magento Static Blocks: Creating, Configuring And Positioning

What Are Magento Static Blocks Obtained?

A static page is a page on your site which remains unchanged regardless of the actions performed on it by a user. As opposed to, a dynamic page which is a page that contains various blocks, displays pop-ups and other features that depend on user’s actions performed on that page.

Online store administrators usually create static pages to display the information about the store and its contact data. These can be such pages as “About Us”, “Shipping information”, “Privacy & Security”, “Return Policy”.

How to Create Magento Static Blocks

Go to your admin panel then to CMS – Manage Pages. There you need to choose Add New Page. You will see a page on which you can configure a newly created static element of your site.

In order to configure a new page you need to modify the following points:

1. General Information. There, you need to set such fields as “Page Title”- it is a page name that will be displayed in your viewers browser header as well as in the list of the site pages; “SEF URL Identifier” – it is a page identification number in which you need to enter the URL that you wish to see in a browser address bar for this page. The field must not contain any spaces and only include Roman symbols. You may use a URL translation service for better convenience if your site does not use the Roman alphabet. “Status” is a page status – Enabled or Disabled. One of the most important fields is “Content” – it should include the text or other information that you wish to display on your static page.

2. Custom Design. Here, you can configure your new page design. In the field “Custom Theme” you may set the template you wish to use for this page and it may differ from the template used for other pages; or, you may leave this field unchanged. The field “Custom Theme From/Custom Theme To” indicates the term of action of the template you selected, you may also leave it unchanged. “Layout” will help you to choose one of GoMage themes for Magento ® with one, two or three columns. “Layout Update XML” is an extremely important field as it helps to change the layout selected in the previous point and the changes will only affect this specific page.

3. Meta Data. Here, you can configure “Keywords”, “Description” and other Meta Data for your static page.

Once all changes are done you only need to click “Save Page” then open the page in a browser and check how it is displayed.

Static block in Magento ®

Static block in Magento ® is a text or HTML code which can be located in any part of the site and is not affected by your viewer’s actions. Such blocks can be configured in the admin panel. An online store owner can use these blocks to add an advertisement, category links, informational banners and other useful things on their site. Many administrators also use such blocks to display social advertisements and other interesting features necessary for site promotion.

In order to create a static block in Magento ® you need to go to the admin panel then to CMS – Static Blocks – Add New Block. You will see a new page with various settings which can be modified in order to adjust the functionality and appearance of your block.

Block Title: it is a name of your block. This name will be displayed in the list of blocks in your admin panel;

Identifier: it is a very important field, it must contain a unique identifier of your block;

Status: it is a block status on your site depending on your current purpose – Enabled or Disabled;

Content: this field contains whatever you wish an individual block to display – advertisement text, some information, HTML code, etc.

Once all changes are done click “Save Block”.

How to add a block to a category

Let’s say you want to add a new block to a certain Magento ® category. In order to do that, go to Catalog – Manage Categories. In this section you need to select the General Information tab, or, depending on your Magento ® version, Display Settings tab. Click on it and you will see a new page on which you need to modify the following fields:

Display Mode and CMS Block. The former allows changing the mode of categories displayed. The latter one has several sub-points once selected: Products only (show products from the selected category only), Static block only (display a static block only), Static block and products (displays products from a specific category and a static block simultaneously).

After that choose which block will be displayed in the specific category and save the changes.

In order to display a static block in any place on your site you need to do the following:

1. Create a block. The procedure of creation is described above;

2. Add the information about this block into XML file;

3. Call the block in a specific place on your site. For this you need to use .phtml file;

4. Flush the cache but only if it is enabled;

5. Refresh the page.

Let’s say you need to add a banner to the site header. It is worth mentioning that many well-known web marketing specialists recommend placing static blocks into headers as it increases the possibility of them being viewed.

In order to tell the site about its new block, go to the file app/design/frontend/your_package/your_theme/layout/page.xml and locate the following part of code:

<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
        <block type="page/switch" name="store_language" as="store_language" template="page/
        switch/languages.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu"/>
</block>

You need to add the following lines in “header” block:

<!-- CMS Block into Layout begin-->
<block type="cms/block" name="cms_block_name">
    <action method="setBlockId"><block_id>block_name</block_id></action>
</block>
<!-- CMS Block into Layout end-->

After that the block will look like this:

<block type="page/html_header" name="header" as="header">
    <block type="page/template_links" name="top.links" as="topLinks"/>
    <block type="page/switch" name="store_language" as="store_language" template="page/
    switch/languages.phtml"/>
    <block type="core/text_list" name="top.menu" as="topMenu"/>
        <!-- CMS Block into Layout begin-->
        <block type="cms/block" name="cms_block_name">
            <action method="setBlockId"><block_id>block_name</block_id></action>
        </block>
        <!-- CMS Block into Layout end-->
</block>

In this code, ‘block_name’ is an identifier that was set when the block was created and cms_block_name is the name of your block. Now you need to call the block in a specific place of your .phtml file. Go to app/design/frontend/your_package/your_theme/template/page/html/header.phtml, open the file and add the following code:

<?php echo $this->getChildHtml('cms_block_name') ?>

Now clean the cache and refresh the page:

Go to the admin panel – System – Cache Management – clear_cache;

Refresh the page in a browser.

If you need to add a specific page to a static block, follow these steps:

1. Create a block;

2. Open the necessary page (CMS – Manage Pages) or create a new one according to the procedure described above;

3. In the ‘Content’ of your block add the following code to call the necessary page:

{{block type="cms/block" block_id="block_name" template="cms/content.phtml"}}

4. After the changes are done, save the block, refresh the page, clear the cache if necessary.

If you have any troubles creating or configuring Magento static blocks please consult with GoMage experts.