Easy E-Commerce With Magento

Hundreds of ecommerce systems exist, but very few can match the power of Magento. In this screencast, I’ll demonstrate how to download and install Magento to a local host, configure some of the site options, and create simple and configurable products and categories for our test e-commerce site.

Screencast

Why Use Magento?

Well there are quite a few very good reasons to use Magento:

• A Simple Intuitive Interface
• Easy To Download, Install & Maintain
• Built on current technologies unlike other systems.
• Multiple Site Functionality
• And best of all…It’s free and open source!

Preparation

As with all successful things in life, preparation is key! Before we can install Magento we must set up a database on our server. Using phpmyadmin we create a new database called “magento”. We will use this later when we come to install Magento.

Downloading/Installing Magento

Once our database has been set up on our server the next step is to download Magento itself. To do that we need to go to the download page on the Magento website. For this tutorial we will be downloading the Full Release in ZIP format. Once you have it downloaded unzip it to the folder of your choice.

Now that we have the files on our server it’s time to install Magento, to do this we go to http://localhost/magento (or whichever folder your using) in your web browser.

Accept the TOC’s and continue onto the next page.

Pick the settings that apply to you and click continue.

Going well so far…Now fill in the database connection settings. Make sure that you hit Use Web Server (Apache) Rewrites for added SEO friendliness and if you want to change the default access address for your backend from /admin edit the Admin Path field.

Fill in the login details you’d like to use for your account and enter an custom encryption key if you like, otherwise leave it blank and Magento will make one for you.

Great, now Magento has been installed on your server, if you have installed locally there is one last step you need to take before you can login…

In your Magento folder go to app/code/core/Mage/Core/Model/Session/Abstract/Varien.php

Find the session_set_cookie_params code block (Line 78) and replace it with this code:

		session_set_cookie_params(
            $this->getCookie()->getLifetime(),
            $this->getCookie()->getPath()
            //$this->getCookie()->getDomain(),
            //$this->getCookie()->isSecure(),
            //$this->getCookie()->getHttponly()
        );

On a proper webhost you do not need to do this! However as we are working on localhost we need to do this to address an cookie issue.

Tax Rules

To set up our different levels of tax we need to go to the Manage Tax Zones & Rates tab under Sales &raquo Tax. If the rule for your state doesn’t exist or has been changed recently then hit the “Add New Tax Rate”.

Save your new tax rule and you are good to go!

Categories

To create a new category we need to go to the Catalog tab on the navigation and select Manage Categories. From there we can manage and add new categories.

To create our new category we need to click Add Subcategory and fill in the details like the picture below, making sure to change Is Active to Yes.

Products

Products are key to a site but in Magento there was multiple product types as shown below…To create a new product we need to Catalog tab on the navigation and select Manage Products. And finally click Add Product

Simple Products

These are the products that have no options, such as DVD. To create our Simple product select Default for the attribute set and Simple Product for the Product Type and click Continue.

General Tab

1. Name: The name of our new product
2. Description: The main body description of the product; the place to really sell the product and all of its features!
3. Short Description: The quick overview that appears just below the price on the product page; the place to grab the attention of buyers
4. SKU: The stock code for the product
5. Weight: The weight of the product. This can be kilos, tonnes or whatever you want as long as you keep uniformity across all your products
6. Manufacturer: Blank by default but manufacturers can be added through the Manage Attributes Tab.
7. Colour: Blank by default but again like the manufactures can be added through the Manage Attributes Tab
8. Set Product As New From Date: Sets the product to new from the date you enter.
9. Set Product as New to Date: Sets when the product ends being new.
10. Status: If the product is Enabled and showing on the website or if it’s disabled.
11. URL key: The custom option for how the URL for your product is written.
12. Visibility: Where the product can be found by your visitors;
    • Nowhere: The product does not appear on the website.
    • Catalog: The product will appear on the website but not in search results.
    • Search: The product will not appear on the website but will appear in search results.
    • Catalog, Search: The product will appear on the website and in search results.
13. Allow Gift Message:
    • Yes: Allows a gift message
    • No: Doesn’t allow a gift message
    • Config: Use the site’s configuration

Price Tab

1. Price: The price of our product
2. Special Price: Offers on products for limited times.
3. Special Price From Date: The date in which the special price starts.
4. Special Price To Date: The date in which the special price ends.
5. Cost: The cost of the product.
6. Tax Class: If your product requires Tax added then Taxable Goods must be selected.
7. Tier Price: Allows for bulk discounts to be set up. Click Add Tier to add quantity discounts.
8. Google Checkout: Can visitors buy this product using Google Checkout.

Meta Information Tab

1. Meta Title: Information that appears in the <title> tag.
2. Meta Keywords: keywords that apply to your product.
3. Meta Description: A short description of your product that appears on Search Engine Result Pages.

Images Tab

Images are a key part of your product and the better quality you can get the more chance you have of making a sale, Magento allows for multiple images to be uploaded and specific images to be uploaded for the Base Image, the Small Image and the Thumbnail, as well as allowing for a label. If you want to remove an image simply click the Exclude to hide or the Remove to delete checkbox(s).

• Base Image: The main image that appears on the product page.
• Small Image: The image that appears in the categories/search view.
• Thumbnail: The thumbnail of the product.

Design Tab

Unless you are using a template for your Magento store it’s best to give this one a miss, but for anyone who is curious the Design tab allows you to use themes that you have set up and allows you to choose active to and from dates as well as changing the page layout into different column blocks and so on.

Inventory Tab

1. Manage Stock: If you’d like to track and manage stock levels then leave this set to Yes
2. Qty: The amount of product you have.
3. Stock Availability: If the product is in stock or not. Setting this to Out of Stock will not hide the product on the website!

The other options are best left to the site configuration however are all pretty self explanatory if you wish to set them to your needs.

Categories Tab

Your product can appear in multiple categories; simply click the checkbox of the category you want it to appear in!

Related Products / Up-sells / Cross-sells

With related products, up-sells and cross-sells the interface to add is same, to add a product simply select a field you wish to search by and click the search button, a list of products matching your criteria will appear. Click the checkbox next to the product and it will appear as a related product/up-sell or cross-sell as applicable.

Product Reviews / Product Tags / Customers Tagged Product

These are all added by users and can viewed from the tabs.

Custom Options

These are custom options that you can add to your product. To add a custom option click Add New Option and fill in the details.

Managing Attributes & Attribute Sets

Attributes are the options that make up your products, for example colour, weight and so on. Attribute sets are sets of attributes that make a whole product and allow us to make configurable products.

Attributes

To create a new attribute/view our current attributes we need to go to the Catalog tab on the navigation and select Attributes and then Manage Attributes. To view a attribute simply click on the row, to create a new attribute click the Add New Attribute Tab.

Properties Tab

It’s best to use an convention when you are naming your attributes, as your list grows it will make it easier to find what you are looking for. I like to use options_option_product which for this product would be options_colour_nettuts_shirt. We must set our scope to global and Catalog Input Type to Dropdown in order to create our configurable product(s). We are only applying our Attribute to Simple Products and Configurable Products. In order to use this attribute in our configurable products we must choose Yes on the Use To Create Configurable Product field. We must also select Yes on the Visible on Product View Page on Front-end field in order to make the attribute visible.

Manage Label / Options Tab

Next we need to set up the options for our user to select from when choosing there product. In our example we are using Colour as our product option.

The title is what the visitor will see above the dropdown, with Magento we can define what the admin sees and what the user sees making it easier to track options with additional information, in the example we have called our Title, Colour. If we leave the Default Store View blank it will copy what we have entered into Admin.

To add the options for our product click the Add Option button for the number of options you require, in our example 3. Like the title if we leave the Default Store View blank it will copy what we have entered into Admin but we can use the Admin field to add more information, making it easy to fulfill orders for example. We use position to order our options and the Is Default radio box to define which option is default. We can easily delete any option using the button to the right. Once we have all the options we want click Save to return to the attributes page.

Attribute Sets

Next we need to set up our Attribute Set in order to create our configurable product. We navigate to the Catalog tab on the navigation and select Attributes and then Manage Attribute Sets. Like the Attributes page we have a list of our Current Attribute Sets; Default should only be appearing. Click Add New Set.

Again like our Attribute we should use a convention to name our Attribute Set…so matching our Attribute; options_size_tshirts. Since we have no other Sets we are going to base the new one on Default.

To include our Attribute into our Set we simply need to click and drop it into the General group from the right hand list. Click save and our set is complete. Going well so far…

Creating A Configurable Product

Creating a configurable product is very similar to creating a Simple Product. To start we create a new product. But we need to change the Attribute Set to the one we just created and the product type to Configurable Product and click continue.

Next we need to pick the Attributes we would like to use in our product. Only attributes with a scope of Global, type of dropdown and the option to create a configurable product set to yes can be used.

The only tabs that change are the Inventory tab and an new tab has been added called Associated Products which is where we will add our options. Once we have filled in all our details we need to save and continue edit before we can begin to add our Associated Products. Unlike some other ecommerce systems Magento creates simple products that are hidden in order to create a configurable product.

To create the options we are going to use the “Quick simple product creation” tool to make our Simple Product options. For the name and SKU fields you can let Magento auto generate these but for added control I suggest that you fill these in yourself. In the example we are creating a green shirt option. We have filled in the Name, SKU, Weight and have set the product to Enabled. However we must set the visibility of our product to nowhere. From the drop-down we select the attribute option we are creating for and set the price. For the default option we don’t enter a value and it will use the price we set on our configurable product but for the other options we enter the difference between the configurable product and the option. So if the Green top is $15 and our configurable product is $20 then we have to enter -5.00 as our price. We then need to set the Qty for the option and the Stock Availability to In Stock and click Quick Create. We repeat this process until we have added all of our options and click save. Our configurable product is now complete. If we view our products page we can see that Magento has created the options as simple products for us that have been hidden. Making tracking stock much easier!

Congratulations

Well done, you have just downloaded and installed Magento to your localhost, you have created a simple product, a custom attribute and attribute set, a configurable product using your custom attribute and a category. I hope that you have learned some of the basics of Magento and I wish you all the best during your endeavors. If you have any questions please leave a comment below and i’ll try my best to help you out!

If you a real go getter and would like to get into some of the more advanced topics or would like to learn more than I suggest that you check out the Knowledge Base on the Magento website as well as Designers Guide if you’re interested in customizing Magento more.

• Follow us on Twitter, or subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.