Now that we have a clearer idea of what a Magento theme is, we can begin designing a new theme for our new store. In this chapter, we'll cover the basics of Magento theme design and starting an online shop, including:
- Changing the store's logo to your own company's logo
- Removing the callout banners that come with the default Magento theme
- Altering an existing Magento theme's color scheme to suit your business' needs
- Setting your new Magento theme as the default theme for your store
Cheesy Cheese Store wants a simple, customized theme for its new Magento store. Though there are plenty of cheese shops online, most of them are tailored for the more mature, conservative customer. Cheesy Cheese Store will be targeted at the younger cheese-eater that belongs to the well-exposed 18 - 24 age group.
As with any e-commerce web site, there are a few fundamental elements that we'll require. They are as follows:
- Your store's logo.
- The shopping cart.
- The ability for customers to log in to view the status of their previous orders
- A search feature.
- Navigational elements to help visitors reach each page of your store easily. This includes links to your store's refund policy and terms of business, which are usually located in a web site's footer.
- Sufficient planning to take in to account the products that will be sold at the store, and the best ways to display these, both as individual products and as groups of products. The groups of products will be used for the product category pages and the search results page of your store.
All of these factors need to be accounted for when we design our Magento store.
A Blank Theme is a simplified Magento theme with very minimal graphics included. The Blank Theme allows for easier customization of your store, as it does not contain unnecessary graphics or any other elements. It is a Magento theme in its simplest form.
To use the Blank Theme, you will need an extension key to allow Magento to install it. You can get the extension key for free from Magento Connect at http://www.magentocommerce.com/extension/518/blank-theme. In order to see the extension key, click on the Get extension key button, located below the screenshot of the theme.
Once you have clicked on this, a box will appear asking you to accept the extensions license agreement.
Once you have read and accepted this agreement, click on the Get Extension Key button, and you will be presented with a text box containing the Blank Theme's extension key.
To install the theme, we need to remember (or copy and paste) the value in the text box, and open Magento's administration panel.
Magento's administration panel can usually be found by going to the /admin path wherever your Magento is installed. For example, if Magento is installed at http://example.com/magento, then your administration panel can be found at http://example.com/magento/admin.
To make sure that we can see the changes we make to our theme, we need to disable Magento's cache. This will prevent our changes from being hidden by an older version of the theme that Magento is saving. We can disable the cache from the administration panel, under System | Cache Management.
Select the Disable value from the drop-down list of values for All Cache, and save the page. Magento's cache is now disabled!
To install Magento's Blank Theme, ensure that you are still logged in to your administration panel, and select System | Magento Connect | Magento Connect Manager.
To use Magento Connect in the admin panel, all of the directories in your Magento installation will need full read, write, and execute permissions for all of the user groups, so that new extensions can be installed properly.
If you don't set the proper permissions on the directories in which Magento needs to install the new theme, then you'll get an error, as shown in the following screenshot:
Tip
Changing your directories' permissions
One way to change your directory's permissions is with an FTP program, as described in Magento's installation process at http://www.magentocommerce.com/wiki/magento_installation_guide.
To change the current theme to the blank theme, you now need to go back to the admin area of your Magento store, which you can do by clicking on the Return to Admin link at the top right of the screen.
Once in your store's admin panel, you can change the theme to the new Blank Theme, which we've just downloaded by selecting the System | Configuration option from the navigation panel.
After this, select the Design option from the menu to the left.
Once you're in the design configuration area of your Magento store's control panel, you will need to enter the new values for the theme for Templates, Skin, Layout, and Default values. Each of these values needs to be changed to blank in order to enable Magento to display the new theme.
Now, if you select the Save Config button in the top right of your screen, then you should be able to view the blank theme in use on your Magento store.
Now that the Blank Theme is installed, we can view it on our Magento store's frontend. We can do this by closing our store's administration panel, and returning to the root of your Magento installation. So, if your store's administration panel is http://example.com/magento/admin, then you will need to go to http://example.com/magento to see the new theme.
We don't have any content in our Magento store at the moment, so the home page looks a little bare. We can add the content to the home page through Magento's Content Management System.
To access Magento's Content Management System (CMS), we need to log in to Magento's administration panel (at/admin within your Magento installation) again. From theCMS option, select the Manage Pages option in the navigation panel.
From the list of pages, select the page with the Identifier of home.
We can insert content formatted with HTML in to our store's home page from here.
Once the page is saved, we can return to the frontend of the store in order to see the content that we've just added (for example,http://example.com/magento/ rather thanhttp://example.com/magento/admin).
We can make our store's home page more interesting, by adding a graphic to promote our product.
If we save this image ascheese-homepage.png in the theme's skin directory (for example,http://example.com/magento/frontend/default/blank/images/), then we can use it on our store's home page by inserting the following HTML in to the content block of the home page within Magento's Content Management System:
<h1>Cheesy Cheese Store</h1> Magento’s CMScontent, adding<p> Cheese from around the world, from the <strong>Cheesy Cheese Store</strong>. </p> <img src = "http://example.com/magento/skin/frontend/default/blank/images/cheese-homepage.png" alt="Cheesy Cheese Store - delicious cheese!" />
Once this page is saved, refreshing our store's home page shows the new graphic.
For ease, we'll keep the same layout for our new store for now, adding our own flair to the theme. Here, we'll introduce the Cheesy Cheese Store's new theme.
As you can see, a very noticeable difference can be achieved. The logo and space ship graphics are targeted towards our audience of younger cheese-eaters, and the colors are a lot more appealing than they were previously.