Magento

I recently stumbled across a visually striking website developed in Magento which pushes the limitations of the software further than I have ever seen it go. A site called nineteen47.com is a superbly-realised e-commerce development making use of flash, JavaScript and some stunning CSS, and it’s all developed using Magento.

Everything has been re-skinned from the ‘add to cart’ buttons to the entire checkout procedure. However, while you’ll marvel at the pure genius behind the design and coding that this site has afforded so well, a bigger problem exists that in my opinion is fundamental if you ever want to make money from an e-commerce site.

The site runs dangerously slow and the page elements on my rather fast broadband connection load up one at a time every time you change page, not dissimilar to waiting for a blind man to complete a jigsaw puzzle. The site’s usability also suffers, as you click into a category page you’re met with an impressive but unfamiliar flash interface of clothing items hanging up, which you have to click on to navigate to the rest of the products. While the aesthetics are incredible for those who have flash players (not to mention the superb animations), the usability suffers enormously because it breaks away perhaps too far from general e-commerce procedure. When I shop for a product, I of course want to do it on a clean, well-designed website, but I also want familiarity, clarity and knowing where I am at all times. As an experienced developer these things remain important to me when I shop online, so I expect that normal Internet users would feel just as strongly.

I applaud the efforts of the company behind the design of this site, and I also recognize the level of technical ability required to achieve it. But I do also urge all designers to put usability at the forefront of all your designs – Magento has a very usable default interface as it is, so work with what you’ve got. Remember that old saying; ‘if it ain’t broke, don’t fix it’.

My advice is to look at the bigger picture. Yes, you want to wow customers with your great-looking site and make them want to explore and see all the great design that it has to offer. But don’t forget that the ultimate purpose is to sell and to make money. A frustrated customer who is waiting too long for the next page to load, or can’t find their way to the product they want will not be parting with any cash at your store.

A good ecommerce designer will think of everything. I’ll be post more usability tips here at the Magento blog at ecommerce web design in the coming weeks, so look out for those posts. Also don’t forget you can stay even more up-to-date with Magento fox.

“Mobile is the next frontier of ecommerce” – Roy Rubin, CEO of Magento Inc

I have a lot of respect for Roy Rubin, but I’ve been saying this for years! Not only the way we shop, but the way we manage shopping and communicate with other developers will become more and more dependent on mobile technologies as the next few years push us into the future of mCommerce. However I digress, and will continue to follow the developments of mobile commerce to post about another day…

The day after the announcement of the long-awaited Magento Mobile Admin, I think it’s appropriate that I comment on the little-known official Magento iPhone app, which has been out for considerably longer. No, it’s not the mobile store-management app that we’re waiting for, that’s due out at a later date (yet unknown), but it’s more of an extension of the community features on the official Magento website.

The good news is that it’s free! The bad news is that like many free apps and free things in general, the quality of the content suffers like yesterday’s Metro. I have to admit I was quite unimpressed with the majority of the features on the app.

The Home tab has the latest fan messages, most of which are useless and very outdated. The official news section is a worthwhile part – providing you with the latest news posts from the official Magento blog. The fan wall, equally as useless as the fan messages – as far as I can see no interesting or fruitful discussions have taken place so not really of interest to any serious developers. The events tab could have been a decent feature… except the only event listed was the cancelled Magento Developer’s Paradise conference which was 5 weeks ago. Where are the future events?

The ‘More’ tabs offers some salvation in the form of official Magento videos with a mixture of tutorials and keynote speeches to keep you interested while on the move. There’s also the unmissable opportunity to view the sought-after Magento/Varien Copyright 2010 line of text by pressing the equally prominent ‘Copyright’ tab from the ‘More’ menu…. helpful!

In summary, this is a hugely unfinished and apparently non-maintained app, which is not yet a missed opportunity. It only needs a few tweaks to make it a fantastic resource for iPhone users. Get everything up-to-date, integrate the official forum into it? I know I’d use it a lot if I could post on the forum from anywhere. How it has managed to get a rating of three and a half is a miracle considering the current quality of the app. Whoever said the best things in life are free? And not Janet Jackson…

Look out for our review of the Magento Mobile Admin app on Ecommerce Website Design in the coming months.

For a long time now developers have been aware of the free Community Edition of Magento alongside the slightly more advanced, support-filled and maddeningly expensive Enterprise Edition. Well, now Varien are proud to announce the arrival of the ‘Pro Edition‘. Before you start thinking that this is simply a version of Magento to be used by advanced golfers, the Professional Edition has a lot to offer to boost the sales of your store.

With a sleek new look and several unique features incorporated to justify the $2,995/yr price tag, the Pro edition sits neatly halfway between the other two.

While the community edition puts all the groundwork in place for you to run a successful and usable store, the Professional Edition brings in several new marketing techniques important for driving sales at your new store. This makes the package as a whole a lot more advanced, closer to the abilities of Internet mega-giants such as Amazon. In the words of the Magento team themselves, you can:

• Increase Customer Retention with the Reward Points module
• Increase Revenue with the ability to sell Gift Certificates/Cards
• Increase Customer Service and Satisfaction with the Customer Store Credit module
• Increase Security and Peace of Mind with Enhanced Data Encryption

In my opinion, these are features that should be included in the Community edition as standard, particularly the increased data encryption which now brings the software safely into PA-DSS standards, where it kinda should have been in the first place. The gift certificates and reward points modules are nice – as long as your store becomes big enough to get a consistent and rewarding user base from it.

It seems the Pro’s main objective is to look after the customers a whole lot more than the Community does – after-all the most important thing about any store is the well-being of its customers. However, at $2,995 a year – is Magento looking after its customers enough? Keep checking back to the Magento blog at Ecommerce Website Design to find out!

So, you’ve just installed Magento for the first time and you’re now thinking “great I have an online shop”. Then you begin to browse the admin area, the configuration and the products, and you realise that things may not be as simple as you first though. You see words such as ‘Default Store View’, ‘Global’, ‘Main Website’ and more. Before your head explodes in confusion, let me just straighten this whole thing out…

Ok, the good news is that this multiple store system is great because it means you can have different items, sold at different prices with different configuration… even with different designs if you wish – all using just one installation of the software! Think of it as a family tree:

1. GLOBAL – First you have the global view, the top of the family tree, the Magento installation. Any changes made to this in the product attributes or configuration will effect everything.

2. WEBSITES – You may have multiple websites under the initial installation. A website can be hosted on different domains and can parent many different stores.

3. STORES – These are the children of the different websites and contain the catalog structures of the categories and products contained within them.

4. STORE VIEW – This is just how the store is perceived on the frontend. A store view is often used when you want to use the same store, but use different languages or currencies.

Store Management Example

I’m going to go through a quick example of a Sports equipment and clothing store. You’ve installed Magento, that’s part 1 done! Hooray… Now, there’s going to be two websites: sportsequipment.com and sportequipment-golf.com (just for the golf products). This means that customer data between the general sports store and the golf store won’t be shared.

Under the sports equipment store , there’ll be three stores – one for clothing, one for equipment and one for shoes. The Golf equipment store will have two stores underneath it; golf clothing and golf equipment.

Finally, you want to sell your products in English and French, so you create store views for each of these in both languages. This then can be configured for each product in the backend.

The stores setup in Magento is actually a very powerful and intricate way of organising products and should not be overlooked in any circumstances, particularly for sites that have large volumes of stock.

Here’s a nice simple hack which is also made known on the official Magento website, something which really should be there as standard. Despite being known about before the 1.4.0.1 release, Varien still hasn’t seen fit to include it, which seems criminal given how easy a hack it is. I’m not gonna go down the road of sitting here and openly criticising Varien again, because you know, that’s not me… *ahem*

See the official tutorial here: http://www.magentocommerce.com/wiki/print_labels

In case this link ever goes down or maybe you just don’t like the Magento website, I’ll echo the fundamental actions that need to be undertaken right here on the Magento Blog.

Firstly, don your mining hat with the flashlight on and get ready go deep underground. Download and open this file: /app/design/adminhtml/default/default/template/sales/order/view/info.phtml

Around line 171 there’s some code that looks like this: <h4 class=”icon-head head-shipping-address”><?php echo Mage::helper(’sales’)→__(’Shipping Address’) ?></h4>

Right underneath this, enter the following code. This is the link to the shipping label that will now be visible when you look at order details in the backend.

<span style="float:right"><a href='#' style="color:#FFCC22" onclick="labelPrint()" >Print Shipping Label</a></span>

Now, right at the bottom of info.phtml add the following code. This tells the link to open a popup with the shipping details displayed. You’ll notice that the URL contains the page ‘/print_label’ – this is the page which we’ll use to display the information.

<script type="text/javascript">
/* <![CDATA[ */
<?php
$shipaddr= $_order->getShippingAddress()->getFormated(true);

$splitx=explode("\n",$shipaddr);

$inx=array('<br />','<br/>',' ');
$outx=array('','','%20');

$shipx='';

foreach($splitx as $sx):
if(!empty($sx) && substr($sx,0,3)!='T: '):
$shipx.=str_replace($inx,$outx,$sx).'@@';
endif;
endforeach;

echo "\n".'var shipx="'.$shipx.'"; '."n" ;
?>

var popUpWin=0;

function labelPrint() {
var url="/print_label?addr="+shipx;
//
popUpWin = open(url,'popUpWin','toolbar=no,location=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no,copyhistory=yes, width=500,height=250,left=100,top=100,screenX=100,screenY=100');
}

/* ]]> */
</script>

Finally we need to create the ‘print_label’ page to host this information. Using the CMS create a page with the identifier ‘print_label’ and add the following code/CSS. You can obviously adjust the CSS to how you want:

<style type="text/css" media="all">
* { margin:0; padding:0; }
#address {
/**********ADJUST THE CSS VALUES BELOW FOR THE PRINT LABEL PAGE ***********/ 

font-size:17pt;
top:30px;
left:20px;
width:400px;
height:210px;
line-height:120%;
padding:15px;
border:1px dashed #ccc; 

/**************************************************************/
font-weight:bold;
position:absolute;
}
#printBTN { float:right;margin:2px 5px 0 0 !important;}</style>

<style type="text/css" media="print"> #printBTN {visibility:hidden;}</style>

<div id="printBTN"><input type="button" onClick="window.print()" value="Print" /></div>

<div id="address">
<script type="text/javascript">
var str=location.href; var output='';
str=str.substr(str.indexOf("addr=")+5);
str=str.replace(/%20/g,' ');
output=str.replace(/@@/g, "<br />");
document.write(output);
</script>
</div>

Now when you go to view an order in the admin, the link should be there in a nice yellow font, standing out allowing you to print a postage label – very handy indeed! Let’s get it on there as standard, eh Varien?