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

Interactive Online > Blog  > Web Design  > The Ultimate Guide To Creating E-Commerce Websites With Magento (Part 1)

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

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 process of launching an e-store, when it comes to choosing the right solution, you will get puzzled by the hundreds of solutions available.
The options […]


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 - Part1

In the process of launching an e-store, when it comes to choosing the right solution, you will get puzzled by the hundreds of solutions available.

The options range from simple and free shopping cart systems to complex and paid e-commerce softwares which can charge you for both getting and “keeping” your shop online.

However, there are some applications which offer great features but still free.

One of the best and open source e-commerce solutions available for free is Magento.

In the following comprehensive tutorial, we will see what are the benefits and drawbacks of using Magento as your e-commerce application. We will make a demo store and take a look on some basic and intermediate features of Magento. So what are we waiting for? Let’s get started.

Why use Magento?

Pros:

  • free (absolutely free, no charges at all for community version)
  • open source (you can even make it better by writing your own code)
  • easy upgrades (automatic upgrades without loosing your customizations)
  • extensions, plugins (enhance your Magento installation with plugins just like WordPress)
  • very comprehensive theming system (custom themes for your store similar to WordPress)
  • downloadable goodies support

Cons:

  • resource intensive (yes, Magento needs a lot of memory in order to work efficiently but don’t worry, we will also learn how to fix it up to run Magento in low cost hosting solutions.)
  • latest version of PHP not supported (Magento only works with PHP 5.2)

Downloading Magento:

You can download Magento from their website. There are two versions available. One is the online installer and 2nd  is the complete setup.  I will recommend you to download the full package.

Another option on this page is of downloading sample data (it is like sample text to fill your e-shop). As we are going to make an original e-store, we will not download it.

I am using Magento 1.3.2.3 and you can download it by going to release archives on Magento download page. The latest stable release 1.4.1 came out but still has some errors. So I will not recommend you to use it. However, this guide should also work with it.

Magento Homepage

Installing Magento:

As said earlier, the latest stable release of Magento works only with PHP 5.2 which is installed on most servers and some web servers also come with a one-click install option.

For learning purposes, it is a good practice to install it on localhost using xampp. It is recommended to use xampp 1.7.0/1.7.1 for easy install of Magento as it comes with PHP 5.2. If you are using the latest version of xampp, you will have to manually install PHP 5.2 if you want to run Magento. I will show you how to install Magento on xampp 1.7.0/1.7.1. You can download old versions of xampp from its official source code repository.

After installing xampp, go to your xampp directory. In my case, it is c:xampp.

The two directories, C:xamppphp and C:xamppapachebin include php.ini file which is the configuration file for PHP language. We will uncomment the following lines of code to enable some necessary add-ons required by Magento to work properly.

Line 582: ;extension=php_curl.dll
Line 622: ;extension=php_mcrypt_filter.dll
Line 624: ;extension=php_mhash.dll

You can uncomment the lines mentioned above by simply removing the semi-colon which is the first character for each line of code.

Now, we will have to replace the libmysql.dll contained in xampp 1.7.0/1.7.1 which is buggy and will crash apache server during Magento installation. You can download a better version from here (or it can be found inside the MySQL server downloads from mysql.com). After the download, replace it with the existing libmysql.dll in C:xamppphp and C:xamppapachebin.

The last step is to change some code lines in Magento’s files to disable some checks. Otherwise we will not be able to login on localhost. Go to your Magento folder (In my case it is C:xampphtdocsmagento) then go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php. Then point to line 78. You will see session cookie parameters. We will comment line 81,82,83 to disable cookies. I am writing down the difference between original and edited file to give you a better understanding.

Original varien.php (Line 78 to Line 84)

$cookieParams = array(
	'lifetime' => $cookie->getLifetime(),
	'path'     => $cookie->getPath(),
	'domain'   => $cookie->getConfigDomain(),
	'secure'   => $cookie->isSecure(),
	'httponly' => $cookie->getHttponly()
);

Edited varien.php (Line 78 to Line 84)

$cookieParams = array(
	'lifetime' => $cookie->getLifetime(),
	'path'     => $cookie->getPath()
	//'domain'   => $cookie->getConfigDomain(),
	//'secure'   => $cookie->isSecure(),
	//'httponly' => $cookie->getHttponly()
);

We are done with all the fixes needed to run Magento on localhost. You have to fix these things only when you are installing it on localhost. On live servers, it doesn't need customizations

Now we will make a MySQL database in phpmyadmin as Magento uses MySQL to store its data.

phpMyAdmin New Database

Here we have created a MySQL database named Magento. So we are done. Let’s point our browser to http://localhost/magento.

Magento Installation Wizard

If you have followed all the steps correctly then you will get the welcome screen of Magento installation wizard.

Step 1:

The first step will show you the terms and conditions to use Magento, simply accept it and press next.

Magento License

Step 2:

The second step is about localization. You will set default location, time zone and currency for your online shop. We are done here. Let’s move to the next step.

Magento Localization

Step 3:

In the 3rd step, you will see a screen asking for the MySQL database. As we created one with the name Magento, we will fill the information with it. The default password for the administrator user “root” in xampp is blank. So you don’t have to put anything here.

Magento Database Configuration

You will also be asked for the table prefix in the database. As we are installing Magento on localhost, it is not that important. But when you are going to create a practical store online, always fill this field with something weird and unpredictable like any randomly generated number as it will save you from SQL injection hacking.

Second box on this step asks you the base URL which will be used by your customers to browse the e-store. Moreover, the admin backend link will also be given here. You can also enable mod_rewrite, an Apache module to create custom links for better search engine optimization. Mod_rewrite is offered in most hosting solutions. You can also enable SSL here.

Magento Base URL

The last option is session storage. If you are on a shared hosting solution, then I will suggest you to choose file system as choosing MySQL database can put a heavy load on your servers. However, using MySQL to store session data is good from a security point of view.

Step 4:

Last step in the Magento installation Wizard is to create the admin user. You will have to put your first, last name, e-mail, username and passwords. Magento will ask you for the encryption key as it encrypts all the data.

In case you want to decrypt it; you will have to give the encryption key. Leave this field empty and Magento will use some random key for this purpose which will be given to you in next step.

Magento Admin Account

Keep this key in safe place as it is very important.

At this point we have successfully installed Magento on our localhost. As a last step, you will be asked whether you want to go to the front or backend.

Magento Installation Complete

Front-end: it is the website which will be shown to the user upon access.

Back-end: it is your admin dashboard. Here you will manage your e-store.

Front-end

We will first get familiarized with the front-end and then come back to the back-end. This is how our default/empty store looks like.

Magento Store Front

For now, we have no products and an empty store so we will head up to the live demo on Magento’s official website.

Magento Store Details

Let’s start from the header.

On the left side of the header, there is Magento logo which is actually the logo of your online shop.  Later on, we will see how to customize it.

On the right side of the header, there is a search bar, a default welcome message after that, and some login/sign up links. You can also change your language here.

Category Bar: Magento uses categories to group same products. Each product should have at least one category. You can also use sub-categories for different products. Each category has its own page which you can customize from the back-end.

There are two sidebars on the demo store. Left sidebar is showing some offers and a popular tag block while right sidebar is showing your cart and the community poll.

The main content area is showing the landing page image and popular products of the store.

There are two other pages worth mentioning.

Category Page: This page shows up when a buyer clicks on a category link. It allows a buyer to sort products by position, name and price. Buyer can also choose the number of the products showing up on each page. Another feature of this page is grid and list view.

Product Page: This page shows up when a user clicks on a product to buy it. It contains short description of the product, a long description, price, and different images of the product just like Amazon.

Magento also has features for comparing products with each other and related products too. Now let’s move to our installation and have a look at the back-end (the admin area).

Back-end

Point your browser to http://locahost/magento/admin to login into the back-end. You will see a login area. Put your login information here which you created in step 2 of Magento installation wizard.

Here is how it looks like.

Magento Admin Panel

The following screenshots show you the Magento admin menu. We will explain each item separately and after that, we will create the e-store.

Magento Admin Bar

Dashboard: Gives an overview of your sales, orders and everything between them like customers, top products, etc. with the help of dynamic graphs.

The next tab is "sales". Let’s explore it.

Magento Sidebar

Orders: All the orders by your customers are placed here. You can hold or unhold orders from this panel. You can also place new orders. Please keep in mind that it will be a temporary record and you can cancel these orders. At this step, the payment for the specific order is not yet confirmed.

Invoices: Invoice is the receipt of the payment for a specific order. After creating an invoice, the temporary order will be set as a permanent order and you will not be able to cancel it.

Shipments:  All the shipped products are placed here.

Credit Memo: Holds the records for refunded payments. For example; if you shipped a product to a customer and the customer demanded the refund after that, the specific record will lie under this tab.

Terms & Conditions: You can apply specific terms and conditions to your e-commerce store here.

Taxes: A very important tab in managing your e-commerce store. You can apply specific taxes with respect to the specific products and locations. A lot can be written on this feature but it will go beyond the scope of this guide.

The next tab in Magento backend is called catalog. Everything related to the products are inside this tab.

Manage Products: You can see all the products of your store. New products can also be created from here.

Manage Categories: Category management can be done under this tab.

Manage Attributes: Create different attributes on specific products. Explanation of attribute is mentioned below

What are Attributes?

An Attribute is a specific property of a product. For example: "resolution" and "color" of a high definition LCD monitor are attributes of that specific product. Products can also be grouped with the help of attributes.

Difference between Categories and Attributes

A very important concept in handling Magento like a pro is to understand the difference between categories and attributes. Categories are the main navigation menu of your e-store. For example: if you are selling computer related accessories, mouse, keyboards, processors can be categories and you can apply attributes like cache, clock speed, bus speed, price and so for the processor category. 

URL Rewrite Management: This is an awesome feature in Magento with respect to search engine optimization. You can change any link in your e-store to get a better place in search engines.

Search: This tab allows you to see what keywords were searched by your customers. It also tells you how many times a search has been made.

Tags: You can set tags for each product here. Tags are usually keywords which are good for SEO.

Google Base: An advanced feature. You will have to understand Google base before using this. Here is good explanation of Google Base.

Google Sitemap: You can generate the sitemap of your e-store for submitting it to the Google’s webmaster tools (another great feature when it comes to SEO).

The First Product

Now, we are able to create our first product as you have understood all the basic steps in maintaining Magento. After creating our demo e-store, I will explain you the remaining features. So let’s do it now.

Creating our first product

Each product should sit inside a category. Otherwise, it will not appear on your store. So, we will first create a category named "Mouse".

How to create a category in Magento?

The default store comes with an empty category named "default category". All the categories should be placed as sub-categories to this default category otherwise you will be unable to see them. Following screenshot shows the right method to add a category in Magento.

Magento Categories

Let’s take a look at our first category.

Magento New Category

You can choose the name + description to be displayed on category pages, the default image for the category and other options. Active option must be set to "yes". You will also be given the option here to set the meta keywords and description for this category which will appear on search engine listings.

When you will save the category, it will not appear under default category. You can do so by drag'n drop functionality.

Creating our first product with Magento

So, we have a category to group products. We are going to add the product now.

You will be asked to select the attribute set and type of the product.

Types of products:

  1. Single Products can be sold individually. You can also group a single product with other single products using "group products".
  2. Group Products contain many single products. They can be added to a customer’s cart with a single click. For example you can bundle an Apple magic mouse with a Macbook.
  3. Configurable products allow customers to change different properties of a product.  For example: a customer can increase the ram of a specific processor if it is a configurable product.
  4. Virtual Products are those products which are not physical. You can add additional warranties to this product.
  5. Bundled Products are much like grouped products. There is not a big difference. Take a computer for example. You can remove monitor, graphics card and some other accessories from this product.
  6. Downloadable products are pretty much self explanatory. An example is "premium themes". When a customer purchases such a product, he will be sent an e-mail with the product download link.

We will create a "single product" now.

Magento New Product

You will have to mention the name of the product, short description and long description.

Following screenshot gives you the look of "New Product Tab". There are 10 tabs on the left menu. I will explain only those who are necessary to get started.

Magento Product Details

SKU: is an abbreviation of "Stock Keeping Unit". It’s a general term used in stocking items. What you need to learn is that each product in your store should have a unique SKU. In simplest word, it is an identifier for products.

Weight: weight for the product which can be important in calculating the shipping.

This window will show some additional tabs depending on the "attribute set" selected. The manufacturer and color fields are actually a part of the default attributes set.

Magento has the feature of generating RSS feeds and newsletters which include new products. Moreover, the new products also show up on homepage. In the next two fields, you can choose the period for which a product will be marked as "new".

You can enable or disable a product. If the product is set to be disabled, Magento will not show it on the front-end.

Visibility: allows you to choose the pages on which you want to show the product.

Price: The fields here are pretty self-explanatory. Special price allows you to give the customers discount for some days. Just like a sale on Christmas. This feature is for discounts and promotions.

Next tab is Meta Descriptions which is used for SEO of your store. You can set Meta title, keywords and Meta description here.

4th tab is Images. You can upload product photos here. By default, there are three types of images which Magento uses.

Magento Product Images

And here they are:

Small: shows up on category page

Thumbnail: shows up in shopping cart and

Base Image:  shows up on product page

Lets move to 5th tab.

Design tab allows you to customize the view of the product page. You can choose from different page layouts built in with Magento.

Inventory Tab allows you to set the quantity of number of products available in the store.

Category tab for selecting the category for your product . This is crucial. You will not be able to see your product until you select one category.

At this point you have a fully functional product and you can see your product on category pages. But we will take a look on remaining important tabs on creating a new product page.

Related Products tab allows you to select related products just like Amazon.

Up-Sells: Under this tab, you can select recommended products which the customer should buy instead of the one which we created now. The up-sells products can be of better quality and also expensive.

Cross-Sells: The products you want to show a customer on the shopping cart page before a user checks out can be set here.

Product Reviews: Ratings and product reviews for a specific product can be managed here.

Product Tags: You can set product tags here.

Customers Tagged Products: In Magento, customers can also tag products. They are shown under this tab.

Custom Options:  You can add custom options for a product here. Like attributes, you can’t group custom options and each product has its own custom options. You can add text fields, radio buttons and other form fields for custom forms here. This is an advanced feature.

Let’s move to the front-end and see how our e-store looks like.

The home page is showing no products. In other words, Magento is still showing the default e-store layout . We will change it in the next part of this guide. Click on the "Mouse" tab in category menu and we will see the category page as below.

Magento Product Page

Select the Apple Magic Mouse product which we just created and now you will see the product page.

Magento Product Detail

We’ve created our first product. But there is still so much to cover on Magento. Although we can’t cover all in this guide, I will give you an overview of all the features. So let’s move back to Magento' s back-end.

Customers: You can manage all the customers here. Magento allows shoppers to register for easy shopping. They don’t need to give their shipping addresses again and again. This can be done by shoppers.

However, you can create customers and customer groups to apply different discounts from the back-end. You can also view the online customers on that specific time. Everything about them is managed here.

Promotions: Product sales can be managed here. There are two types of promotions. "Catalog price rules" apply on the whole e-store while "shopping cart price rules" only apply during the checkout process.

Newsletters: Magento has the built in functionality to handle newsletters. You can create newsletter templates here and also see the customers who have signed up to receive them. The full-featured newsletter system allows you to create templates for your newsletters. Then you just have to insert the necessary information and you are done.

Content Management System Capabilities of Magento

Magento also has CMS capabilities. You can create static pages, static blocks and polls here. We will take an in-depth look at these features when we will customize the layout of our store.

Reports: You can get all type of reports here. Magento offers more than 20 types of reports which help you to get every detail of your store.

System: Holds the settings for the administrator account and the general settings of your store.

You can set roles of users, cache management, currency rate, etc. here.

Until now, we have taken an overview of all the backend features. I have tried my best to cover the most important features of Magento.

In the next part of this guide we will move to the front-end and will customize the default layout of Magento. We will see what content blocks are and how we can change the basic features.

Stay tuned.

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.

 

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
ScheduledTweets

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

Tags: Mysql, Php

Related posts

(read full article on source site)
Free Website for Your Dental Practice
See why our dental practice websites exceed the features & value of your typcial dentist website.
  • No cookie-cutter websites
  • No duplicate content
  • Custom built with a unique look and feel
  • Unique content written by professional writers
  • Set yourself apart from other dentists
  • The key to your online success!
* we never share your e-mail with third parties.