The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2)

Post pobrano z: The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 2)

SSLmatic LogoThis 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.

Magento Guide - Part2

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="" 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 1st 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 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.

Saad Bassi Photo

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.

Amazon IconBooks On Magento:

SSLmatic LogoThis 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

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

Tags: ,

Related posts

Dodaj komentarz