Magento

“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?

When creating a store for your client you may want to recieve detailed analytics on who’s visiting your site, what keyphrases they are using and how they are actually getting to your store.

This could be via:

• PPC
• Organic SEO
• Longtail phrases
• Referring sites

It is important to know this information – as it will really help improve your conversion rates. Things like knowing what pages your customers are viewing and how efficiently they are browsing your site will help you to understand the end-user experience. Where or not they:

• have difficulties navigating your pages
• bounce on certain pages (indicating poor design)
• effectively find your contact form
• find the checkout easy to use
• trust your site as a whole

On our magento blog we often discuss the SEO importance when it comes to magento sites. It’s been said a million times – there’s no point having a gob-smacking website when nobody can find it! This is especially true when it comes to e-commerce websites.

To implement your e-commerce analytics you simply have to have a google analytics account already set up. What we normally do with the code that you recieve from google is to add it to the footer.phtml so that it is available on all pages. This is the default use of analytics and gives details on the length of time and the most frequently visited pages – however it does not give e-commerce specific information such as checkout operation, wishlist and comparison features. It doesn’t track what users add to the cart and then throw away…

To implement your e-commerce analytics simply use the code-snippet that you recieved from google and paste it into the admin area.

Navigate your copied code to admin>system>configuration>google Api – paste your code into the box shown and hit enable. Now wait a week or so until your next monthly report and enjoy more in-depth analytics!

P.S – Don’t forget to enable your ecommerce statistics in your google analytics account!

Proffessional Ecommerce website design with SEO in mind.