This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

In the first part of the Ultimate Magento Guide, we covered the back-end features of this open source e-commerce software. We also created a simple product and displayed it in our e-store.

Today we will focus on "customizing the basic layout of our e-store",  "what Magento Connect is” and "how we can install themes + extensions".

Let's Turn Off The Cache

Before heading to the customization, we will turn off the cache mode of Magento so that we can see our changes. Otherwise, Magento will keep showing the cached pages.

We can turn off the cache from our back-end. Go to System>Cache Management. Choose "disable" from the drop down menu which is an option in "All Cache". Follow the screenshot below if you are having some problem.

After disabling the cache, we will now change the name of our e-store which appears on many places (like after a new user registration). We can change it by going to System> Manage Stores, click the "Default Store View" and put the actual name of the store there just like “WRD E-Store”.

We can now customize our homepage. Let's start with the default logo and default welcome message.

Upload your logo to the mag/skin/frontend/default/default/images/ folder. This is the images folder of the default theme we are using now.

Go to your Magento back-end> System> Configuration> General> Design> Header.

Define the logo image source here and we are done with customizing our logo.

You can now see your front-end showing the new logo. And also, it is possible to change the alternative text of your logo and default welcome message here.

After these updates, our header looks like this:

Now we will move to "changing the homepage layout" in order to show our products there.

In the first part of our guide, I had described the CMS capabilities of Magento. We use these CMS capabilities for changing the look of our front page on WRD E-Store as “HOME”. Consdering "HOME "is also a static page, different snippets can be used to show different arrangements of products.

Showing all products of your e-store on homepage
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" template="catalog/product/list.phtml"}}

Showing only the new products
{{block type="catalog/product_new" name="home.catalog.product.new" alias="product_homepage" template="catalog/product/new.phtml"}}

Showing only the products from a specific category
{{block type="catalog/product_list" name="home.catalog.product.list" alias="products_homepage" category_id="4" template="catalog/product/list.phtml"}}

You can get the "category ID" at "Manage Categories" page under "Catalog". Then click on the specific category and you will get the "ID" in the header just like the following screenshot.

Now go to CMS> Manage Pages and select "homepage". You can add any of the previously mentioned snippets according to your needs. As we have only one product, I have used the 1^st snippet. These snippets are actually "content blocks" of Magento.

You can also select the layout of your "homepage" from here. Go to "Custom Design" and choose a layout.

The default Magento theme comes with 5 layout options

• Empty
• No Sidebar
• Two-column layout with left sidebar
• Two-column layout with left sidebar
• Three-column Layout

 I have selected 3-column layout and now we have a good-looking e-store.

Callouts

Callouts are the visuals (banners) for self-promotion like announcing special deals, new products, etc.

Now, we will upload new callouts for a small but awesome touch to our e-store as its still showing the default ones.

Customizing callouts:

1. Simply replace your image with col_right_callout.jpg (right callout) or col_lef_callout.jpg (left callout) in \skin\frontend\default\default\images\media.
2. You can change the alternative text and link for right callout by going to right_col.phtml in \app\design\frontend\default\default\template\callouts.
3. You can change the alternate text and link for left callout by going to catalog.xml in \app\design\frontend\default\default\layout.

After changing the callouts, I have following the following output of the e-commerce store.

We are done with the customization of the home page. Now we will take a look on what is Magento Connect.

Magento Connect

Magento Connect is the brand name for the official marketplace of plugins and themes where you can download/buy free and premium themes and extensions.

For example, by default, Magento only supports the most popular shipping methods and payment gateways. You can download extensions to extend its payment capabilities.

How to install an extension?

First off all, select an extension from Magento Connect. You will get an extension key upon agreeing with their terms and conditions. As an example, I'm getting the key of mCommerce-iPhone Optimized Theme.

Copy that key and return back to your back-end. Go to System> Magento Connect > Magento Connect Manager. You will be prompted once again to enter your admin login details. Fill in your credentials, put the extension key and click connect. The same console is used for updating Magento.

How to install a theme?

You can install a new theme by following the same process as written above.

When the installation via Magento Connect is completed, go to System> Configuration> General> Design>Themes, put the name of the theme (for example: Modern Theme), save it and you are done.

After installing a new theme, your home page may not load appropriately because of the different layout options. Just go to CMS> Manage Pages and choose the appropriate column layout and everything will be fixed.

The "Magento Ultimate Guide Series" includes necessary information for beginner and intermediate users. If you are looking for advanced sources and want to design for Magento then I will highly suggest you to read the wiki page.

Author: Saad Bassi

Saad Bassi is a 20 years old web developer from Pakistan who loves to create beautiful websites with great user experience.

He is the co-editor of CrispyTech and 1stWebDesigner, blogs about the next Windows at Windows8Geek and loves to make new friends, so, don't forget to say him a hello on Twitter.

Books On Magento:

• The Definitive Guide to Magento
  
• Magento 1.3: PHP Developer's Guide
  
• Magento 1.3 Theme Design
  

This article is sponsored by SSLmatic which sells SSL certificates (RapidSSL, Geotrust, Verisign) for much cheaper prices & offers great support. Check their site to get the cheap SSL certificates.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Wiki-Like Project Management Tool: Streber
• Web-Based MySQL Management With Only 1 File: Adminer
• Web Server That Runs On CD-Rom: Server2Go
• Web Based Task Manager: TaskFreak!
• Voice Enabled Powerful Web Chat Software: Ajax Chat

Microsoft has announced the "Preview Release" of Internet Explorer 9 which seems to be a milestone for the IE family considering it gets closer to the standards.

The IE9 has a new JavaScript engine which performs much better than IE8 & some other browsers.

Another good news is, it supports HTML5, CSS3 & SVG almost completely.

The website includes speed, HTML5 & graphics demos besides the comparisons of the features with other browsers.

This new release requires Windows Vista SP2 or Windows 7 which hopefully changes with the stable release (otherwise, IE may continue to be a barrier on new standards as XP will probably live long).

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Follow WebResourcesDepot At Twitter And Get More Resources!

Related posts

• Use CSS3 Pseudo Selectors With IE: ie-css3.js
• CSS3 Framework With HTML5 Support: 52framework
• Better HTML5 & CSS3 Usage By Detecting Browsers Capabilities With Modernizr
• Simple & Functional Screenshot Tool: LightShot
• Plupload: Advanced Multiple File Uploader