18 things that will improve your online store

18 things that will improve your online store

Features explained in this article should be considered as guides that need to be followed from the beginning of site’s design, wireframing and through development phase. They’re all based on the experience from perspectives of the shopper, the shop owner and developers.

Home page

The one rule that can be applied here would be “Don’t over do it”. Many times you wish (feel or express a strong desire or hope for something that is not easily attainable) that you could show everything to the user (mostly for the first time user) so you try bringing it all out. In many cases that is not the best solution. Here are several reasons why and what to do about it :

Magento Home Page design

Too many products – you can’t show them all, rather give a hint with a few featured products, selected products, new arrivals in an eye-cacthing manner. Big image or a slideshow that will solve the problem for the user trying to find his way around and actually enter the shop. Once she/he is in, the home page served it’s purpose: Showing the way inside the store.

Over categorization – When presenting the categories for the store you should be concise as much as possible with only top-level categories presented. Make the case even stronger by representing those categories with images and text for easy navigation and “Decision making”. It’s all about reducing the “Time to think” factor mentioned above.

No updates or news from you guys – Either being a regular or a first time user everybody likes to see that you’re alive and kicking. Use twitter updates or a facebook update or simply pull some headlines from your company blog. Anything that can help you with presenting yourself to the public should be utilized.

Static is sooo 2008. – If you have a video about your product or company that is actually worth watching on the front page, place it adequately or you can make it as big as a house if you have a flashy animation/video that will excite and motivate someone enough to see it and do something about it afterwards.

Enter the store, oh you’re already here… sorry ’bout that – Mind the lyrics, I mean the verbiage, ehm the way you write and speak to the public. Try, no, try harder when choosing the right words for using the shop’s features, be friendly and don’t point out the obvious while missing the explanation of the “not so obvious”. This will make a tremendous effect on the overall feel for the site and of course the product, the company and YOU!

…And for the the users that visit regularly or go straight to finding the product by name or manufacturer there is this thing:

Useful search

Users will search either for a specific product, product feature or they will be using your site’s search for
pure store browsing, therefore you should make your search easy to use, refinable and also give the user more control when they know specifically what they are looking for using the advanced search the way it suits your store.

It is crucial that the search box stays visible all the time on the site for several reasons:

Why not? – Unless you have a secret reason why you should hide the search box, always iterate this feature as much as possible.

Advanced search in the sidebar – For those who know exactly what their looking for

Providing something like this in sidebar gives even more control for those shoppers that want to narrow their search and land directly to the desired result page.

autocomplete-magento

Search Autocomplete – That one comes built-in when you run your store in Magento:)

If you would for example search for a phone the autocomplete would suggest the correct wording providing a reassurance to the user that she/he is on the right track adding to the value of great experience of shopping on your site.

Breadcrumbs and sub navigation – find my way around

Show me where I am – Always, except when I know where I am. Magento has breadcrumb navigation built-in and exactly in the places where you need them. You need not to worry about that:)

breadcrumbs

Show me where to go next – Even with every aspect of the store’s functionality covered, underestimating the power of navigation will for cause a headache and major disorientation leading to low conversion rates since the users will flea from your store quicker than they came in.

search-by-category

Don’t rely only on the drop-down menu provided in the main menu in the header section, place a category sub navigation so that all of the major categories are displayed. Remember the “Over categorization” from the top of the post? Well, now it’s time to display those categories in all their glory, preferably with those fancy expandable menus. See a great example here where we used the only the main categories but once you enter one category you’re presented with it’s subcategories. Nice way of saving the space and clever showing of the categories when they need to be shown. Note: Magento has item count for each of the categories products. This provides useful info about how large the collection. As you see in the image above.

Phew, hope you can keep up with these long sentences, ’cause we’re off to:

Category page or Category listing

Show me what you got– But let me decide how much I need to see at once.

The same principle as on the homepage, don’t over do it. If I want to see all of your 10000 products in one category on one page, well then I’m the one over doing it. If you let me see only 10 by 10 products out of those 10000 products, then you’re arresting my shopping experience. Find the balance and everybody’s happy.

Thankfully, Magento lets the store owner and the shopper meet half-way with options for numbers of products to show as well as sorting them by attributes or whatever suits your/their needs.

I’ve found the product – Let me buy now!

category-page

The look and feel of this page and the use of “Buy Now!” or “Add to cart” can dramatically affect user’s experience and convert it into “I’m their customer now” kind of experience if you let the shoppers who already found their product make the purchase. It’s all about who you’re talking to, right?

Note: This relates only to the products that don’t need any additional (required) choice to be made that is.

Image taken from this site we’re currently doing some development.

The Product page

Yes that’s the one– And now, impress me!

product-page

First impression is what makes the sale so make that one a success. No matter if your product is “simple” enough to have “only a few” color options present it with the best photo/illustration/3D render you can and describe it well.

This is the tipping point, so you better tip it to everyone’s favor with shopper’s purchase of exactly the right product and you making that sale on the spot.

Image is everything so try to put enough valuable images of the product as you can. As potential buyers are becoming more and more “visual”, it is important to be the best we can when it comes to product photography for eCommerce stores. Note: Don’t save on getting the best photo/illustration/3D render, you only get one shot so do it right.

There are some additional recommendations you should follow that can be easily overlooked during the site planning:

  • Price – Make it clearly visible, don’t try to “minimize” it visually
  • Add to Cart button – Make it clear as the summer sky: big, bright and very visible but of course, don’t over do it 😉 This one should be used instead of the “Add to Wishlist” button cause it doesn’t stay in the way of user’s purchasing decision.
  • Payment – Provide as many payment options necessary: Paypal, Google Checkout, all major CreditCards, money orders etc. Magento has lots of payment gateways built-in for that so use them as many you need.
  • Sharing – Allow the users to send this product to the ones that can actually buy it if they are not interested or want their parents to buy it for them, maybe?.

Highly recommended for the product page would be of course “Recommended products”. Hey, I like it when the salesman does his job and finds something interesting for me. Do you?

Magento has that built-in also as “Related products” placed cunningly in the sidebar and sits patiently there while you examine the product and decide in the next second to look what your “Online salesman” believes is related to that product. Take a look at it on the Magento’s official site .

My Shopping Cart

OK, I’m ready to go to the checkout – What’s in it and do I need more or less?

shopping-cart

In a great situation where your customer has more than two products already in the cart, she/he is maybe considering to buy more of the same product with or without removing other items. Make sure you provide enough visual cues for adding as well as removing items from the cart.

This IS the way to do it ’cause you don’t go around the “Real shop” and stop people from returning the product back on the shelf.

cross-sell

As on the product page with “Related products”, “Shopping Cart” is a great place to advise the user about some cross-sell products available in the store. Presented like that, they’re easily added to the cart while the shoppers prepares to go to:

The Checkout page:

Keep it simple – Don’t make me dwell or register, please 🙂

one-page-checkout

Since we started this journey through Magento store process, we’ve come a long way and now it’s only fair that this checkout business feels fast, secure and with my shipping options presented well and understandable.

This is where Magento’s “One page checkout” comes in, built with that in mind and ready for action, so use it.

If there’s something not available at that moment or for the particular product, let me know and give me options. Especially for the shipping and handling.

Don’t require registration before the purchase except if it is “really” necessary for some reason. Rather provide some new and now widely acceptable ways of connecting thru:

Facebook connect

It is now possible to allow your clients to register with their existing facebook account. This provides comfort, ease of use and friendly approach for the shopper and by default relieves her/him of those tedious tasks of reentering the same data again, registering for a new account etc. Yes, it is good as it sounds and you should get on that train right now.

Here you can find most of the answers about this service.

That’s it:) Well far from it, please leave your comments about your views as a shop owner or a shopper and it will definitely help everyone’s shopping experience.

You made it all the way down here so you must have enjoyed this post! You may also like:

Build your 2017 Magento SEO strategy with these tips Ivona Namjesnik
Ivona Namjesnik, | 10

Build your 2017 Magento SEO strategy with these tips

Create unique coupon code in Magento Stanislav Mihic
Stanislav Mihic, | 19

Create unique coupon code in Magento

10 Useful Tips to Increase Your E-commerce Conversion Rates – Ninja Edition Ivan Lozancic
Ivan Lozancic, | 8

10 Useful Tips to Increase Your E-commerce Conversion Rates – Ninja Edition

11 comments

  1. Great article. Im just researching ideas for our new website as our current one died! Very clear and useful information.

  2. Really great post.

    I’ve just stumbled upon your website searching for some extensions for my shops and I must say that at this moment I have ~10 tabs with your articles opened awaiting my attention :).

    One again, great info, Thanks for sharing.

  3. on cox socks how did you go about adding the colour thumbnails to show product comes in different colours on category pages?

  4. Great list and obviously a real advantage that Magento has most of these things out of the box. Some designers AND clients just make it hard on themselves though – and ultimately undermine what’s already a great system.

    Would be interested to find out how Facebook connect log in or OpenID in general is improving conversions on your sites. Keep going Inchoo!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.