Magento for Designers: Part 2

Magento for Designers: Part 2

Tutorial Details
  • Technology: Magento
  • Difficulty: Beginner - Intermediate
  • Estimated Completion Time: 30 Minutes
This entry is part 2 of 8 in the Magento for Designers Session
« PreviousNext »

Magento is a stunningly powerful e-commerce platform. In this miniseries, we’ll learn how to get started with the platform, getting to know the terminologies, setting up a store and all related aspects of it, and finally how to customize it to make it our very own.

In this second part, we’ll focus on short, simple steps to get your Magento store from installed to ready for deployment, which will cover setting up your products, product categories, taxes, shipping, payment gateways and much more! Excited? Let’s get started!

The Full Series


A Quick Recap

In the last part, we saw what Magento is, what features it brings to the table, how to install it and finally how to import details regarding your existing data.

Today, we’ll fast track through the set up process by eliminating all the fat and instead focusing on only the very important elements. In these short, simple steps, your fresh installation of Magento will turn into a fully functional e-commerce web site.

In the previous part, we looked at how to bulk import products but that method may not be suitable for all scenarios. Hence we’ll build up our catalog and store from scratch.


Step 1 : Setting up Categories

Creating categories for products and then using them for organizing them will definitely help you in the long run. Creating a category is very simple. Under the catalog menu, click on Manage Categories

Tutorial Image
Tutorial Image

The resulting form lets you manage the various properties of the category.

The Name field lets you set a name for your category. You can always refer to it by ID but a name is always easier to use. You are allowed to use any character here.

The Is Active toggle lets you decide whether to make it active straight away or wait for later. This is especially useful when you are making advance preparations for a special sale and do not need to make it live right away.

The Description and Image fields are self explanatory.

The Page Title, Meta Keywords and Meta Description fields are for SEO purposes and let you set and manage these attributes on a per-category basis.

For a quick setup, these are all the fields you need to complete. The rest of the options in the other tabs are rather advanced and are beyond the scope of this article.


Step 2 : Setting up Products

Products form the base of your store and so we’ll spend a little extra time here. To add a product, click on the catalog menu, click on Manage Products.

Tutorial Image

There are a number of types of products you can create in your store:

  • Simple
  • Configurable
  • Grouped
  • Virtual
  • Bundled
  • Downloadable

In the interest of getting our store up and running as quickly as possible, I’ll cover simple products and downloadable products here. In all honesty though, these are all you’ll need in most cases. We’ll take a look at how to create a simple product first.

Tutorial Image

You get a total of eleven tabs chock full of fields to enter data about your product. For now, you can safely ignore most of them and focus instead on the fields that matter.

Tutorial Image

The General tab covers the bulk of the necessary information you need to input to get started. Key in values for the name, description, short description, SKU and weight fields.

The status option lets you decide whether the product is enabled or disabled from the onset. For example, you can set the products status to disabled if it’s a special product that is meant to be sold only in a certain period.

The visibility options lets you fine tune where the product appears. For instance, you may want a product to appear in the catalog but not in a search or vice versa. You can set that option here.

Tutorial Image

In the Prices tab, you only need to fill out two fields. The price field is self explanatory. Tax class lets you define to which tax class the product belongs to. I’ll talk about taxes a little bit later below.

Tutorial Image

Setting up images for each product is not necessary but is highly recommended. The Images tab lets you pick out images for the product.

Each product needs 3 images. A big image, a smaller version and finally a thumbnail for displaying in search listings and so on.

Each image can have either or neither of these three. You are also allowed to have more than one image for a product. Magento provides a simple Flash based uploaded for you to directly upload the images you need.

Tutorial Image

In the Inventory tab, you can fill out the quantity you currently have stocked so the core engine can let the customer know when an item is sold out.

Tutorial Image

Finally, you’ll need to define which category the product belongs to. I only have a solitary category in my local server but you can nest it as needed.

Feel free to explore the others options present in each tab but these are the bare minimum you need to create a simple product.

For a downloadable product, you’ll need to look into one more tab: the Downloadable Information tab.

Tutorial Image

This tab let you do a number of things including letting you upload or point to a file you want as the demo or the main product, decide whether purchasers are allowed to share the link, how many times the purchaser is allowed to download it and so on. Once you’ve filled this out, you can sell digital, downloadable products like, say, music, lesson plans, photographs and so on.


Step 3 : Setting up Taxes

Using Magento, you can account for a myriad combinations of different locations and their resulting differing tax percentages. Setting up tax rates is easy. Under the Sales tab, click on Tax -> Manage Tax Zones and Rates and then click on the Add New Tax Rate button.

Tutorial Image

Now we’ll configure the core engine so that it adds a sales tax of 6% whenever a customer from Florida purchases an item.

Tutorial Image

The Tax Identifier field lets you name the rate to your choice. Next, choose your country and if necessary, drill down to state and finally to the zip code if taxes differ by zip codes.

You can then specify the tax rates for the location you’ve selected. If instead, the differing taxes only apply to a range of post codes, you can specify them in the range field.

For basic use, setting up a tax rate alone is sufficient. But if instead you want to drill down further; say, change the tax for different items or offer differ rates for wholesales purchasers, Magento still lets you do that. You need to make use of Customer/Product classes and then define rules for them. This feature, while simple, requires a bit more explanation to get started. We’ll look at this feature in another part of this series.


Step 4 : Setting up Shipping Rates

Magento can automatically calculate the shipping rate based from where your warehouse is and the customer’s address. First, you need to tell Magento where you’ll be shipping it from. On the System menu, click on configuration. The shipping settings can be found under the sales section on the left.

Tutorial Image

First, you’ll need to let the system know where you are located from or where your warehouse is so Magento can use it as a starting point in calculating the shipping rate.

Tutorial Image

Next, click on the shipping methods option. You can find it right under shipping settings.

Now, you can choose to charge a flat rate or to let Magento query a number of shipping services to find out their rates.

Tutorial Image

Here, you can modify a number of options including naming it, choosing whether the rate is calculated per item or per order, how much is to be taken for handling, the price itself and so on.

And here is where Magento shines. You can specify this is as an option for all allowed countries or just choose the countries you want to allow individually.

Tutorial Image
Tutorial Image

If instead, you’ve decided to let Magento decide the rate based on what each shipping company charges, you can select the service you like. Each of them, however, share the same options.

Most of the fields are rather self explanatory so I’ll go over the more pertinent ones here. First up, notice the gateway URL field. This is where the Magento polls for shipping rate data. If by chance, it gets outdated, feel free to update this field. You can also specify which types of shipping methods are allowed. As before, you can allow/disallow each method of each supported shipping company individually.

Please note that the User ID field is specific to each shipping company and may require registering with them. Depending on the company, DHL for instance, you may also be required to provide an access ID and password.


Step 5 : Setting up a Payment Gateway

Magento supports a number of payment methods right off the bat to simplify your life. Only the check/MO method and saved CC method are enabled by default so you’ll have to pop-in and enable the payment methods you need on the settings page.

You can find this on the sales portion of the configuration page. In case you forgot, you can reach this page through System->Configuration.

Tutorial Image

For example, to enable Express Checkout for Paypal account holders, you’d just need to click on the appropriate method and change the enabled field to yes.

Tutorial Image

If you’ve chosen a Paypal payment method, you’ll also need to provide your Paypal email address and other credentials depending on which method you chose.

Tutorial Image

Google Checkout and Moneybookers both get their own section, in case you’re wondering. Just like with Paypal, enabling them can be done in two simple steps.


Step 6 : Setting up your Inventory

Magento provides a robust inventory management system you can use of to avoid problems in the future. You can access it by clicking on the the inventory menu in the catalog section of the configurations page.

Tutorial Image
Tutorial Image

Here, you can specify a number of options including when to mark an item has sold out, maximum numbers of items allowed in the cart, whether back orders are allowed and so on.

You can also denote whether you want your inventory to be adjusted when an order has been placed. If instead you want to manually modify your stock when a product has been shipped out, disable this. You can also specify whether sold out items are displayed and the threshold number of items before an item is marked as out of stock.


Step 7 : Setting up Analytics

Now that we’ve got the brunt of the work done, we can focus on the smaller, often forgotten things. Analytics, for instance.

First, you’ll need to enable Google Analytics. You can do so by going to the Google API link of the sales section of the configuration page. Here choose to enable GA and keyin your account number.

Tutorial Image

Now, Magento automatically inserts the required Google Analytics code into each page of your web site.


Step 8 : Setting up Pretty URLs

The final step now is to make our store as SEO friendly as possible. While most of the onsite parts of SEO are dependant on the theme you use, user friendly, SEO friendly, semantic URLs are something you can do yourself through tools provided by Magento.

First, you’ll need to enable rewrites. You can do so by clicking on the web link under the general section of the configuration page.

Tutorial Image

The relevant option can be found under the SEO link.

Now, we can create our own custom URLs. Point to catalog->URL Rewrite Management.

Tutorial Image

The resulting form lets us manage our rewrite.

Tutorial Image

The type, ID path and target path are read-only fields. The request path however lets you keyin our own request path. Essentially, when a URL pointing to request path is requested by the browser, internal rewrites reroute it to the target path.

You can also denote whether the rewrite is permanent or temporary.


The Last Word

And we are done! We looked at how to convert your fresh installation of Magento into a fully working e-commerce powerhouse. We review how to set up your categories, products, taxes, shipping and much more. Hopefully, this has been useful to you. I’ll be closely watching the comments section so chime in if you’re having any concerns or questions.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!


The Full Series


Purchase Magento Themes from ThemeForest

ThemeForest

Did you know that your friendly neighborhood ThemeForest sells premium quality Magento themes? Whether you’re a skilled Magento developer looking to start profiting from your efforts, or a buyer, hoping to build your first eCommerce store, we’ve got you covered!

Siddharth is Siddharth on Codecanyon
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://php.quicoto.com quicoto

    Didn’t know about Google Analytics feature. Thanks!

  • http://www.gostomski.co.uk Damian Jakusz-Gostomski

    Hey, not actually read the article yet (but busy right now) but noticed the entire article is a huge link, you forgot to close the tag on the list of series links at the top!

    • http://www.mjbanks.com Matt Banks

      Yeah, I noticed that too. Trying to clip the article into Evernote and it made it look a bit odd :)

    • w1sh

      The first (and only) helpful “I didn’t read this but I’m posting my face anyway” comment!

      You, sir, are a hero.

  • http://maxberndt.tumblr.com/ Max

    like the idea of explaining how to design for magento (and create magento themes.)
    But the two first parts are pretty lame so far. hope it will more interesting in future parts.

    • Kyle

      Whats the point of designing for it if you don’t even know how to use it?

      • http://www.ssiddharth.com Siddharth
        Author

        I’m sorry you found it lame but from the interactions I’ve had with designers tasked with setting up a Magento powered store and skinning it, they’ve generally struggled with it mainly due to the different paradigms when compared to your run of the mill CMS/blogging platform. Thus, I’m starting completely from scratch.

        Thanks for reading. :)

  • Kuldeep Daftary

    Hmm nice! Is Magento A free opensource CMS ??

  • Ep

    I agree with Max. This is “Magento installation and initial settings for anyone with a computer”. A “Magento for designers” article should focus on the designer who can design a great looking store in Photoshop, but then struggle to implement it in Magento’s ridiculous structure of files.

    • http://www.jeffrey-way.com Jeffrey Way

      Hey guys. This is a from-scratch series. Patience, we’ll get there! :)

      • http://www.dragnet.se Marcus

        I understand the sentiment Jeffrey but you guys already have a tutorial on here covering Magento basics (http://net.tutsplus.com/articles/news/easy-e-commerce-with-magento/). For those of us who remember that tutorial getting the same stuff again in different words isn’t all that exciting. Even if you do want to start over again and cover the same things it would be nice linking to the old tutorial.

        The internet remembers but apparently Net tus does not.

      • http://clockdiscount.com Ed Baxter

        To be fair though Marcus, the screencast I did was for a old version of Magento. This guy is covering 1.4 which in some respects is very different.

      • w1sh

        I agree with Jeff here. It’s grueling to wait on those design tuts, but this will be an invaluable reference when we’re throwing together Magento stores in the future.

        Free Magento Theming tuts of Nettuts quality? I’ll happily wait.

      • Rick

        My biggest disappointment with this post is that if it is for designing and building a store from scratch, I am amazed that the attribute system gets hardly any mention at all.

        Attributes in Magento allow you to enhance product categories and build a foundation for implementing product comparisons later. It seems like it should get more attention here. When designing a store, you should map out what your categories are going to be, and then after that, map out what he attributes for the products will be, and finally map out the attribute groups’ and hierarchy.

        Attributes are flexible and powerful, but they are very nebulous, skipping past the entire concept is disappointing because usability will rely heavily on it. Natural attributes for products would be features and specifications, i.e. if you sell t-shirts, there is a natural, simple set of attributes that go with this product. But if you are developing a site for a hardware store, you would have many categories and even more attributes that must be though out and planned. While doing all of this, you have to keep in mind how some attributes are universal for all products or might be used in a family of products that span multiple categories.

        I think taking time to review this concept in a tutorial is critical.

    • Zoran

      That’s one of the first mistakes of a programmer coming to Magento for the first time, trying to create something in a system that he doesn’t understand. Most of the projects you will be doing with Magento will require knowledge of the admin panel, so if you don’t know how to use it you will be in trouble.

    • http://www.ssiddharth.com Siddharth
      Author

      Hey guys, I’m sorry you are finding the initial parts pretty tame and boring but from the numerous interactions I’ve had with designers who were asked to set all of this up they’ve generally failed since this is not your normal CMS. So I thought I’d start right from scratch instead of starting somewhere in the middle.

      Thanks for reading. :)

  • http://oswm.net Habib BULUT

    Designer that doesn’t know how to close link tag :]

  • Dave Kennedy

    Bit dissapointed, was expecting some tutorial on creating custom styles

    • http://singlepagers.com Joe Nyaggah

      This being a series, I’m figuring theme design etc will be somewhere down the road.

      • Dave K

        Well my sir, when it appears ill gladly eat my hat ;)

  • Ingo F

    I hope there will be a explanation how to design with Magento soon (: Can’t wait !!

  • http://www.daniel-petrie.com Daniel Petrie

    Good tut. I’m looking forward to the remainder of this series. I’ve been a prestashop user, but I’m looking into magento currently and this series couldn’t have come along at a better time.

  • http://www.jennamolby.com Jenna Molby

    Can’t wait for the rest of the series. Good work!

  • http://ivorpadilla.net Ivor

    You’ll be covering Magento theming too? :)

    • http://ivorpadilla.net Ivor

      I mean, in the next parts (sorry for the doble post)

  • Zoran

    I’ve been using Magento for more than 5 months and i can tell is the best open source Cart system, but it has really hard learning curve, especially for those unfamiliar with OOP PHP 5. The problem is that none can really explain how Magento works, but the best start is to as this tutorial suggest to get used to with the admin panel. If you are designer that has lack of PHP knowledge then it’s better to chose another platform, cause almost everything (including templates) in Magento is done by PHP. Each template is connected with a Block class so if you don’t know how to use OOP methods, just forget about Magento cause you will pull all of your hair out.
    Thank you for this tutorial, cause resources for Magento are very rare.

  • http://www.jordanwalker.net Jordan Walker

    Excellent steps, looking forward to next features.

  • http://www.chameleonkid.com Giles Newman

    Nice work on the series so far. It never hurts to go over the basics of a system like Magento again but like many other comments above I look forward to some in-depth Magento theme tuts too!

  • Adam Paterson

    Same here! Really looking forward to the nitty gritty stuff!

  • http://contempographicdesign.com Chris Robinson

    Would be nice to see an article on theme creation for Magneto

  • http://360signals.com/ Maor Henry

    Thanks for this great tutorial! I’ve been waiting for this one!

  • http://davekingsnorth.com DaveKingsnorth

    A lot of impatient readers :-) Personally I’m glad your going from scratch, that’s the best part about all these series, the fact that you can go from no previous experience at all to being semi competent.

    Looking forward to part 3

    • http://davekingsnorth.com DaveKingsnorth

      Having said that, I much prefer screencasts to written tutorials

  • Sergey

    Thank you for the TUT! Right on time :)

  • http://sonergonul.com/blog Soner Gönül

    Nice

    Thanks

  • http://sahuspilwal.com Sahus Pilwal

    Magento rocks period. Nice to see some decent tutorials on installation & setup. If only I had these tutorials six months ago :(

    @DaveKingsnorth – I agree screencasts are my preference but written tutorials are essential for beginners!

  • ceco

    Magento is the worst CMS for eshoping. Instalation is the nightmare, neverending story. Customization of code is absolutly difficult.. to many files (up to 12 000 = crazy). Managing sidebars and main desing via xml (LOL ???) and more crazy things. For 90% freelance developers is Magento suicide .. god bless oScommerce and Zen Cart

  • http://www.rachilli.co.uk Rachel

    Really good tutorial again. Brilliantly sets out all the most relevant parts of the setup…going to use it as a reference as soon as I’ve got Magento up and running! What are the next parts in the Series? Desperate to know!

  • geemee

    Looking forward to part 3. Talk more about design integration in magento. This is not easy as integrating wordpress theme.

  • Vier

    About the categories, you should know that the products won’t appear in the website unless your categories are rooted under the default category and at least one of them is active and an anchor.

  • andy

    please, please, please… write a tutorial about how to implement jquery to magento.

    this is something i’ve been really getting stuck with it dosn’t seem to make much sense.

    in particular for the nav menus.

    also if anyone knows a good tutorial on the web for this please give us a link, followed a few but nothing seems to be working.

    great stuff anyway.

    • http://www.creatordesigns.com kevin

      andy, here is a link that might be helpful. i haven’t totally gone through it yet, but i hope it can help. http://css-tricks.com/using-jquery-in-magneto/

    • Deepzz

      Always creating Menus in Magento please think that menu created from Magento BackEnd Automatically,so when creating JQuery touch on Menus,please think abt the ID of the menu created and add the JQuery effectively,try try and experiment bro

  • http://www.ysbeer.com Robbert

    Thanks you for this series on Magento! It comes at the right time, now that I am turning an online store that I made with WordPress and the WP E-commerce plugin, into a Magento based online store.

  • Paulu

    Great tutorial. I would love to see more “how to” articles on theme creation for Magento.

  • http://fromscratchto.com Jonathan

    Wow, a lot of haters on these comments. I for one love this Tutorial because Magento is slowly driving me mad. I’m still having problems trying to get the products to actually display, hope we get to that soon!

  • http://www.ssiddharth.com Siddharth
    Author

    For all the readers looking to dive into theming Magento, the next part will cover all the terminologies and concepts you’ll need to understand how Magento is themed. This will form the base platform upon which you’ll build your custom Magento theme.

    • http://www.code-pal.com Sumeet Chawla

      Its a great series Siddharth.. Setting up Magento is no easy task and the initial two tutorials i.e. this and the previous one have been of great help! Going to read the next one now :)

  • http://www.ekom.com.au Ken Shan

    This article is great! Magento is a huge system not only the amount of source codes and system files but also the learn curve would take user a bit of time to fully understanding from customise theme and management the store wide.

  • http://www.crearedesign.co.uk Stephen Webb

    This is an excellent tutorial for getting to grips with the basics of Magento, and being able to set up the site for basic usage. As someone who is currently undertaking their first Magento project it is excellent to have resources like this.

    It seems that Magento has quickly become the e-commerce platform of choice, and after recently reviewing its features I can understand why this is. It seems incredibly flexible and relatively easy to use.

    I will be interested to read other users comments on the platform, their experience with it and whether they recommend it as highly. I look forward to this next installment in this series.

  • warehouse management system

    Such explicit detailed info for beginners. This is absolutely a great help for those starting their ecommerce business. I suggerst uploading a video with this tutorial will attract more users. Visualization plus audio is apparently perceptible with higher percentage of retainment.

    WMS

  • Paul Ehrenreich

    I might have to go and set this and play with it. It seems like its worlds better then oscommerce…man what a piece of crap that was back in the day

  • http://cheekymonkeymedia.ca Rick

    Wow! Everybody wants to learn how to theme Magento….but they are not willing to learn how to use the system? Crazy.

    I have to say that I have used Magento and it is a beast! Very powerful but also ridiculously bloated and slow. I have switched to Prestashop for now but I am not completely sold on that yet, but the new version is due very soon :)

  • http://erkcm.wordpress.com krushna

    Nice tutorials. thanks a lot for it. and looking forward to see part 3.

  • http://www.rachilli.co.uk Rachel

    I’ve set up the product categories and a new product exactly as it was described in the above tutorial…but when I search for my product, I can’t find it anywhere! Is there anything obvious I’m doing wrong? The category and product are both enabled but I can’t seem to find why it won’t display the product.

    • Ivan

      I didn’t really read the article – but I know Magento pretty well. Have you set the product visibility to catalog, search?

    • Prasad

      may be you can check if the quantity in the inventory tab is zero. if the product is out of stock,i.e.,the quantity in stock is zero, then it wont show up anywhere.hope this helps. cheers :)

  • http://www.coresystems.com.pk TauseefAhmed

    very nice tutorial…… a lot of material for learning

  • Matt

    How do I enable/disable Paypal payment gateway in Magento 1.4.1.0. It is different than what you used here and not as easy to enable/diable it. I have been searching for days, and can’t find an answer to this!

  • http://www.helloeverything.co.uk david

    Thanks for sharing, just what i needed for a new magento project.

  • http://codefight.org/ damu

    what makes it more better is it’s screenshots… Thanks for sharing great post.

  • http://www.jc-designs.net/blog Jeremy Carlson

    Ok, I have it installed. Unfortunately, I didn’t read till later that when you go live, do it WITHOUT the sample data. Doh.

    My question though is about selling a downloadable product. If you are just a designer, selling an html or wordpress template, do you have to worry about taxes? If so, how the hell would I know what the tax rate is for every state?? Little confused on the taxes part.

  • Max

    When trying to upload image, i get this error Unable to create directory ‘/srv/www/vhosts/reisezielhamburg.de/subdomains/dericia/httpdocs/media/tmp/catalog/product’.

    Why? What should i do? I cannot continue with this fantastic tutorial.

    Please help

  • http://www.brettwidmann.com Brett Widmann

    Again this is a great set of resources and information. Thanks so much for sharing.

  • http://www.drivvedwebbyra.se Fredrik

    Good reading! Now we are all set to try this thing!

  • http://www.samita.com.np samita

    thanks for the awesome series . am enjoyin these series . thanks siddharth

  • http://bomolasses.com Sugarcane

    This series is invaluable. Magento is a great system, but it’s certainly not the easiest to use… I’m finally getting my head around it now :)

  • http://charleyramm.co.uk Charley

    Step 1 : Setting up Categories

    Your category doesn’t actually show up until you have added some products to it.

  • http://www.logandesigns.co.uk Mark

    This is a really useful series. I’m just starting to look into using Magento for a site we’re building at work and I’m really quite suprised at how easy you make it look. Thanks

  • ramesh

    thanks………..