First, we need to understand that pages created in the Magento CMS primarily dictate what appears in the content section of the page. This is the area, highlighted below, apart from the header, top navigation, and footer regions.

The content section of the Home Page

On the Page Information panel of the Edit Page screen, you should see the following:

Let us go through the various fields:

In the left tabs, click Content. This is the screen where you can add text, images, or dynamic content that will display in the center content area of your page.

Notice that in the following screenshot, this sample data home page contains a widget.

This widget displays products according to the parameters of the widget (we'll discuss widgets later in this chapter). What you don't see — and we're sure you've realized this — are the instructions that control the other graphics and "Hotsellers" shown on the home page.

The other parts of the home page are inserted by using blocks. We will explore the use of blocks a bit later in this chapter. What is important here is that you can create tremendous versatility in your CMS pages by using tools beyond hardcoding layout changes within the theme modules.

For our exercise, let's add some copy to our home page so that it precedes the featured product display.

In the editor field, enter the following before the widget:

Welcome to our store. We hope you enjoy shopping with us. Our goal is to provide you with the best products at the best value.

Click on Save and Continue Edit (this will let you remain on this screen) and open your home page in another browser window or tab. It should display your new content:

You've now added content to your default home page. As you go through the remainder of this chapter, you'll discover additional ways to add or affect the content of your home page. We will now create a new CMS page to use on our site. This exercise will also give you additional insights into how to use Magento's CMS feature.

We can add a link using the WYSIWIG editor, or we could change the view to HTML mode and edit the actual HTML code. Let's do it using the WYSIWYG editor, first.

In the editor space, add the link name as you wish for it to appear on the frontend by adding another bullet row below the Customer Service label. You can, of course, insert your new link anywhere in the list.

To create the link, select the title you just entered and click the link icon in the menu toolbar. A modal dialogue will appear for entering your link URL.

Magento provides a library of variables which can be used to dynamically insert values and content where appropriate. In this case, the use of a system variable for inserting the store URL is worth learning for our purposes.

The store URL variable is inserted when used in the following format: {{store url=URL_Key}}, where URL_Key is the URL Key for the page, category, or product you wish to access.

Therefore, for our new page, we will insert the following into Link URL: {{store url=care-instructions}}. Add a Title for your link so that it will appear when your customer mouses over the link, and to help describe the link to search engines.

Once you click on Import, the text will be linked. If you look on the frontend of your website, you will now see a new link in the footer.

The method of adding a link using the store URL variable is the same if you work in the HTML view. The key, of course, knows how to properly code an HTML link.

In the block screen, click on Show/Hide Editor to reveal the underlying HTML for this block.

<ul class="footer links">
<li class="nav item"><a href="{{store url="about-us"}}">About us</a></li>
<li class="nav item"><a href="{{store url="customer-service"}}">Customer Service</a></li>
<li class="nav item"><a title="How to care for your new garment purchases." href="{{store%20url=care-instructions}}">Care Instructions</a></li>
</ul>

You'll notice that the link you created for the Care Instructions page is slightly different from the other links in the block. This is due to the manner in which the link dialogue saves your entry.

You could also use {{store url="care-instructions"}} for the link code — in HTML view only — and achieve the same results.

If you're hesitant about using the store URL variable or coding HTML, you can use one additional technique for inserting a link: the CMS widget. In fact, as you explore this method, you'll find it can be used to insert the following:

For our example, we want to insert a link to a CMS page. In the WYSIWYG view (you can also use the HTML view), click the widget icon in the top menu bar.

A panel will open from the right side of your screen. For Widget Type, select CMS Page Link. Additional fields will appear:

After you insert the widget, it will appear in your WYSIWYG editor as an icon labeled page link. If you want to edit the link, simply double-click on the icon to open the Widget panel.

This is one of the least known features of Magento, and yet it can be powerful for reducing the need to edit changes in multiple places in your site. In fact, custom variables can be used not only in pages and blocks, but also in e-mail templates.

As an example, let's say you'd like to add the days on which you are closed to your footer message, but you'd like to use a variable just in case you decide later to change the days on which you are not open:

Let's go through the various fields you will encounter here:

The various fields are shown in the following screenshot:

Now, you can return to your footer block and insert your new variable just as you inserted the variables for Store Name and Store Hours.

{{config path="general/store_information/name"}} is open {{config path="general/store_information/hours"}} for your convenience. We are closed on {{customVar code=closed_days}}.

With these variables inserted, your site footer now shows the added variable value.

Custom variables could be handy for managing content that you may wish to edit from time to time, yet needs to be displayed in multiple places such as the following:

If any of these need updating on your site, you simply have to change the value of the custom variable.