Magento 2 module development – a comprehensive guide – Part 4 (Knockout.js)

Contents:

  • What is Knockout.js?
  • Why is it worth using it? What is it good for?
  • Structure of our basic sample module
  • Creating blocks and layout
  • Using Knockout.js in PHTML template file
  • Creating and implementing our own CustomerData class
  • Using Knockout.js as an HTML template file

What is Knockout.js?

Knockout.js is an open source, simplified dynamic javascript which is a Model-View-View Model (MVVM) system/framework.

 

Why is it worth using it? What is it good for?

Of course it is not mandatory to use Knockout.js with Magento 2 projects. However, since it forms an integral part of Magento 2.0, and also because of the use of full page cache, it is worth considering applying it after taking into account the business logic to be implemented in our own module.

Without creating separate and complex javascripts in our module, we can get access to customer, product, order and other data and also display and manage them on frontend with this handy solution.

 

Structure of our basic sample module

 

We are going to use the same basic sample module that we already used earlier (see previous articles, Part 1 and Part 2).

Since our first article already covered how to build up the basic module, now we show the structure of the module itself only.

 

magento 2 module structure

 

Creating blocks and layout

 

We create a block for the sample and create two separate template files in which we use Knockout.js in two different ways.

In the first example, we use Knockout.js in the template file itself, while in the second example we implement (in other words “load in”) another HTML template file with it.

For these two examples we create a layout file as a first step and, depending on which block we use, now, for the sake of simplicity, we comment out the corresponding one.

We need a default.xml file for that, to be found at app/code/Aion/Sample/view/frontend/layout/default.xml in our sample module. The file includes the following:

 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
         <referenceBlock name="sidebar.additional">
             <!-- First sample -->
             <block class="Aion\Sample\Block\Sample" name="aion.sample.knockout.sidebar" template="Aion_Sample::sidebar.phtml" after="wishlist_sidebar"/>
             <!-- Second Sample -->
             <!--<block class="Aion\Sample\Block\Sample" name="aion.sample.knockout.sidebar.second" template="Aion_Sample::second-sidebar.phtml" after="wishlist_sidebar"/>-->
         </referenceBlock>
     </body>
 </page>

 

In this example our own block and the belonging template file will appear in the layout file under the sidebar (<referenceBlock name=”sidebar.additional”>).

Next, we create the block class, also seen in the layout above. It can be found at app/code/Aion/Sample/Block/Sample.php in our sample module. The file includes the following:

 

<?php
 namespace Aion\Sample\Block;
 use Magento\Framework\View\Element\Template;
 use Aion\Sample\Helper\Data as DataHelper;
 
 class Sample extends Template
 {
     /**
      * @var DataHelper
      */
     protected $_helper;
 
     /**
      * @param Template\Context $context
      * @param DataHelper $dataHelper
      * @param array $data
      */
     public function __construct(
         Template\Context $context,
         DataHelper $dataHelper,
         array $data = []
     ) {
         $this->_helper = $dataHelper;
         parent::__construct($context, $data);
         $this->_isScopePrivate = true;
     }
 
     /**
      * Get extension helper
      *
      * @return DataHelper
      */
     public function getExtensionHelper()
     {
         return $this->_helper;
     }
 
     /**
      * Sample items for example
      *
      * @return array
      */
     public function getInitSecondItems()
     {
         $sampleData = $this->_helper->getSampleProductNames();
 
         return $sampleData;
     }
 }

 

The getInitSecondItems() function, seen in the block, will be mentioned in detail later in the second example.

 

Use of Knockout.js in PHTML template file

 

It is also necessary to create the corresponding javascript files for introducing Knockout.js. As a first step, we define the javascript file, belonging to our module, in requirejs-config.js. This can be found at app/code/Aion/Sample/frontend/requirejs-config.js in our sample module. The file includes the following:

 

var config = {
     map: {
         '*': {
             sample: 'Aion_Sample/js/view/sample-sidebar'
         }
     }
 };

 

Here we define where our own javascript file can be found in our module.

Naturally, the sample-sidebar.js file is needed as well. This is located here in the sample module: app/code/Aion/Sample/frontend/web/js/view/sample-sidebar.js

The file includes the following:

 

define([
     'ko',
     'uiComponent',
     'Magento_Customer/js/customer-data',
     'mage/translate'
 ], function (ko, Component, customerData, $t) {
     'use strict';
     return Component.extend({
         // Second example
         defaults: {
             template: 'Aion_Sample/second-sidebar'
         },
         displayContent: ko.observable(true),
         initialize: function () {
             this._super();
             this.sample = customerData.get('sample');
             // Second example
             this.someText = $t('Sample content with template.');
             // Second example. foreach examples
             this._showItems();
             // Second example, foreach example
             this._showMonths();
             // Second example, other foreach example
             this._showCategories();
             // Second example and another foreach example
             this._showMyItems();
         },
         getInfo: function() {
             return this.sample().info || this.initFullname || customerData.get('customer')().fullname;
         },
         getCartItemsCountText: function () {
             return this.sample().cart_items_text;
         },
         getCartItemsCount: function () {
             return this.sample().cart_count;
         },
         getHint: function() {
             return this.sample().hint || this.initHint;
         },
         _showItems: function() {
             var self = this;
             if (typeof this.initSampleData !== "undefined") {
                 self.sampleItems = JSON.parse(this.initSampleData);
             }
         },
         _showMonths: function() {
             var self = this;
             self.months = [ 'Jan', 'Feb', 'Mar', 'etc' ];
         },
         _showCategories: function() {
             var self = this;
             self.categories = [
                 { name: 'Fruit', items: [ 'Apple', 'Orange', 'Banana' ] },
                 { name: 'Vegetables', items: [ 'Celery', 'Corn', 'Spinach' ] }
             ];
         },
         _showMyItems: function() {
             var self = this;
             self.myItems = [ 'First', 'Second', 'Third' ]
         }
     });
 });

 

Before the functions in this example, we marked with comments those which belongs to the second example. We can see //Second example before such objects and functions.

 

Let’s see how it works!

Javascript extends the uiComponent object present in Magento 2.0 and then our own sample object gets defined, which becomes a part of CustomerData (this.sample = customerData.get (‘sample’);). Four additional functions are defined in the example that we will use in the template file.

 

Functions:

  • getInfo() – displays customer name
  • getCartItemsCountText() – string with sample text, which includes the number of items in the shopping cart
  • getCartItemsCount() – integer that includes the number of the products in the shopping cart (NOT the total quantity, sum qty)
  • getHint() – string, only contains information

 

The data, returned by the aforementioned functions, will be managed by the Sample class described in the section “Creating and implementing our own CustomerData class”.

Let’s take a look at the content of the template file belonging to the block, located at app/code/Aion/Sample/frontend/templates/sidebar.phtml in our sample module. The file includes the following:

 

<?php
 $sampleHelper = $block->getExtensionHelper();
 $initFullName = $sampleHelper->getIsLoggedIn() ? $sampleHelper->getCustomerFullName() : __('You are logged out.');
 ?>
 <?php if ($sampleHelper->isEnabled()) : ?>
     <div class="block block-compare block-aion-sample" data-bind="scope: 'sample'">
         <div class="block-title">
             <strong><?php /* @escapeNotVerified */ echo __('Aion Sample Block'); ?></strong>
         </div>
         <div class="block-content">
             <strong class="subtitle" style="display: inline-block">
                 <?php /* @escapeNotVerified */ echo __('Customer Info:') ?>
             </strong>
             <p class="description">
                 <span data-bind="text: getInfo()"></span><br />
             </p>
             <p class="description">
                 <!-- ko if: getCartItemsCount() -->
                 <strong class="subtitle" style="display: inline-block">
                     <?php /* @escapeNotVerified */ echo __('Cart Info:') ?>
                 </strong>
                 <br />
                 <span data-bind="text: getCartItemsCountText()"></span>
                 <!-- /ko -->
             </p>
             <p class="hint"><small data-bind="text: getHint()"></small></p>
         </div>
     </div>
     <script type="text/x-magento-init">
     { "*": {
             "Magento_Ui/js/core/app": {
                 "components": {
                     "sample": {
                         "component": "Aion_Sample/js/view/sample-sidebar",
                         "initHint": "<?php echo __('(Refresh automatically after cart modification)') ?>",
                         "initFullname": "<?php echo $initFullName ?>"
                     }
                 }
             }
         }
     }
     </script>
 <?php endif; ?>

 

Basically, here we can see how Knockout.js is used. Let’s see in detail where we use it and how it works.

 

<span data-bind=”text: getInfo()”></span>

The string returned by the getInfo() function, defined in the javascript file, will appear in the <span> tag.

 

Knockout JS:

 

<!– ko if: getCartItemsCount() –>

<strong class=”subtitle” style=”display: inline-block”>

<?php /* @escapeNotVerified */ echo __(‘Cart Info:’) ?>

</strong>

<br />

<span data-bind=”text: getCartItemsCountText()”></span>

<!– /ko –>

 

If the value of the getCartItemsCount() function, defined in the javascript file, is not 0, then the part in the if section will appear. The getCartItemsCountText() function will fill the <span> tag with a string.

 

<p class=”hint”><small data-bind=”text: getHint()”></small></p>

The getHint() function will fill the <span> tag with a string.

 

Now let’s check how the finished block will show in the Magento 2.0 sidebar.

 

magento 2 module development sidebar

 

 

How can we modify these data with different user interactions? We get the answer in the next section.

 

 

Creating and implementing our own CustomerData class

 

In order to make the above block and its content modified interactively, we need a specific CustomerData class which provides the sample class, defined in the javascript, with data.

The class is located at app/code/Aion/Sample/CustomerData/Sample.php in our sample module. The file includes the following:

 

<?php
 namespace Aion\Sample\CustomerData;
 use Magento\Customer\CustomerData\SectionSourceInterface;
 use Aion\Sample\Helper\Data as DataHelper;
 /**
  * Sample section
  */
 class Sample implements SectionSourceInterface
 {
     /**
      * @var DataHelper
      *
     protected $_helper;
 
     /**
      * @param DataHelper $dataHelper
      */
     public function __construct(
         DataHelper $dataHelper
     ) {
         $this->_helper = $dataHelper;
     }
 
     /**
      * {@inheritdoc}
      */
     public function getSectionData()
     {
         $sampleData = $this->_getSampleData();

         return $sampleData;
     }
 
     /**
      * First sample data example
      *
      * @return array
      */
     protected function _getSampleData()
     {
         $sampleData = [
             'info' => __('You are logged out.')
         ];
         $isLoggedIn = $this->_helper->getIsLoggedIn();
         if ($isLoggedIn) {
             $sampleData = [
                 'info' => __('You are logged in as: %1', $this->_helper->getCustomerFullName())
             ];
         }
 
         $cartItemsCount = $this->_helper->getCartItemCount();
         $sampleData = array_merge(
             $sampleData,
             [
                 'cart_items_text' => __('You have %1 item(s) in your cart', $cartItemsCount),
                 'cart_count' => (int)$cartItemsCount,
                 'hint' => __('(Refresh automatically after cart modification)')
             ]
         );
 
         return $sampleData;
     }
 }

 

Within the class, the getSectionData() function provides the sample class, defined in the javascript, with data. Here it’s important to note that it’s worth giving the two classes the same name in the PHP and Javascript codes.

 

_getSampleData returns with an array whose keys are identical to the values used in the javascript code. Here we implement the necessary business logic. In this sample we see that only the whole name of the customer is to be transmitted and the number of cart items are to be calculated.

 

It is also necessary to define the CustomerData class to let the Magento 2.0 system “know” about it. This we need to set in the di.xml file which can be found under app/code/Aion/Sample/etc/frontend/di.xml in our sample module. The file includes the following:

 

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
     <type name="Magento\Customer\CustomerData\SectionPoolInterface">
         <arguments>
             <argument name="sectionSourceMap" xsi:type="array">
                 <item name="sample" xsi:type="string">Aion\Sample\CustomerData\Sample</item>
             </argument>
         </arguments>
     </type>
 </config>

 

The next step is to define when and for what kind of user interactions the getSectionData() function, defined in the Sample class, should run. For this we need to provide the list of controllers in an xml file.

 

This we need to define in the sections.xml file, located at app/code/Aion/Sample/etc/frontend/sections.xml in our sample module. The file includes the following:

 

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
     <action name="checkout/cart/add">
         <section name="sample"/>
     </action>
     <action name="checkout/cart/delete">
         <section name="sample"/>
     </action>
     <action name="checkout/cart/updatePost">
         <section name="sample"/>
     </action>
     <action name="checkout/cart/updateItemOptions">
         <section name="sample"/>
     </action>
     <action name="checkout/sidebar/removeItem">
         <section name="sample"/>
     </action>
     <action name="checkout/sidebar/updateItemQty">
         <section name="sample"/>
     </action>
 </config>

 

We can see in the xml what controller actions we have defined. These refer to adding the product to the cart, deleting it, updating the number of products etc.

 

What does it mean exactly?

 

After we have finished with the above Sample class, the aforementioned getSectionData() function will run provided these controller actions are run, and our block, displayed on frontend will be updated by ajax with the data returned by the getSectionData() function.

All this happens without defining any ajax function or management in our javascript file.

Our block looks like this, after logging in with a user account and adding a random product to the cart:

 

magento 2 module development cart

 

The content of the object returned in the ajax call:

 

magento 2 module development ajax content

 

Using Knockout.js as an HTML template file

 

In the previous example we used the Knockout.js directly in the phtml file.

Here we are going to apply it as well, but we will use a separate html file for displaying the data.

To achieve this, first we create a second phtml file. This file in our module is located here: app/code/Aion/Sample/view/frontend/templates/second-sidebar.phtml. The file includes the following:

 

<?php
 $sampleHelper = $block->getExtensionHelper()
 ?>
 <?php if ($sampleHelper->isEnabled()) : ?>
     <div class="block block-compare block-aion-sample" data-bind="scope: 'sample'">
         <div class="block-title">
             <strong><?php /* @escapeNotVerified */ echo __('Aion Second Sample Block'); ?></strong>
         </div>
         <div class="block-content">
             <!-- ko template: getTemplate() -->
             <!-- /ko -->
         </div>
     </div>
     <script type="text/x-magento-init">
     {
         "*": {
             "Magento_Ui/js/core/app": {
                 "components": {
                     "sample": {
                         "component": "Aion_Sample/js/view/sample-sidebar",
                         "initSampleData": "<?php echo addslashes(json_encode($block->getInitSecondItems())) ?>"
                     }
                 }
             }
         }
     }
     </script>
 <?php endif; ?>

 

Compared to the first phtml file, the difference is clearly visible. Getting the html template is implemented in the content part:

<!– ko template: getTemplate() –>

<!– /ko –>

 

Here it is important to get back to the sample-sidebar.js file, mentioned at the beginning of this post, and take the //Second sample code parts into account because our second sample is handled by these. Besides, we use only the second block in the default.xml file, described in the 1st section:

<block class=”Aion\Sample\Block\Sample” name=”aion.sample.knockout.sidebar.second” template=”Aion_Sample::second-sidebar.phtml” after=”wishlist_sidebar”/>

 

We comment out the first.

Next we create the HTML file: app/code/Aion/Sample/view/frontend/web/template/second-sidebar.html. The file includes the following:

 

<!-- ko if: displayContent() -->
     <p data-bind="text: someText"></p>
 
     <h4>Items Form Block Class</h4>
     <ul data-bind="foreach: sampleItems">
         <li>
             <span data-bind="text: $data"> </span>
         </li>
     </ul>
 
     <h4>Months</h4>
     <ul data-bind="foreach: months">
         <li>
             <span data-bind="text: $data"> </span>
         </li>
     </ul>
 
     <h4>Categories</h4>
     <ol data-bind="foreach: { data: categories, as: 'category' }">
         <li>
             <ul data-bind="foreach: { data: items, as: 'item' }">
                 <li>
                     <span data-bind="text: category.name"></span>:
                     <span data-bind="text: item"></span>
                 </li>
             </ul>
         </li>
     </ol>
 
     <h4>My Items</h4>
     <ul>
         <!-- ko foreach: myItems -->
         <li>Item name: <span data-bind="text: $data"></span></li>
         <!-- /ko -->
     </ul>
 
 <!-- /ko -->
 <!-- ko ifnot: displayContent() -->
     <p class="empty-text" data-bind="text: $t('Content is empty.')"></p>
 <!-- /ko -->

 

By analysing the sample-sidebar.js, let’s look at how the HTML template file works.

First the template file itself and a true value is defined, which is present in the if condition. Of course, it can be modified according to the required business logic.

 

// Second example

defaults: {

template: ‘Aion_Sample/second-sidebar’

},

displayContent: ko.observable(true),

 

The functions that provide the sample data will run automatically during initialization:

 

// Second example

this.someText = $t(‘Sample content with template.’);

// Second example. foreach examples

this._showItems();

// Second example, foreach example

this._showMonths();

// Second example, other foreach example

this._showCategories();

// Second example and another foreach example

this._showMyItems();

 

For the sake of the example, there’s only one out of these whose data are received from the block class (app/code/Aion/Sample/Block/Sample.php).

 

The transfer is implemented in the phtml file:

 

“initSampleData”: “<?php echo addslashes(json_encode($block->getInitSecondItems())) ?>”

 

The getInitSecondItems() function is created in the helper class:

 

/**
  * Get sample product names
  *
  * @return array
  */
 public function getSampleProductNames()
 {
     $sampleData = [];
     /* @var $product Product */
     $product = $this->_productFactory->create();
     /* @var $collection Collection */
     $collection = $product->getCollection();
     $collection->setVisibility($this->_catalogProductVisibility->getVisibleInCatalogIds());
     $collection->addStoreFilter()->addAttributeToSelect(
         ['name']
     );
     $collection->getSelect()->orderRand('e.entity_id');
     $collection->setPageSize(
         5
     )->setCurPage(
         1
     )->toArray(['name']);
 
     /* @var $item Product */
     foreach ($collection as $item) {
         $sampleData[] = $item->getName();
     }
 
     return $sampleData;
 }

 

 

It selects five out of the displayed products randomly and transmits their names as a single array.

 

The rest of the functions, initialized in the sample-sidebar.js, create simple sample data in order to help understand the operations by iterating all through these in the HTML template file. Our second sample block will appear on frontend the following way:

 

magento 2 module development frontend

 

SummaryThis post showed you how to use Knockout.js with custom module development. In Magento 2.0, it is applied in various cases, displaying customer, order, cart, wishlist and other data on frontend.

 

See also Part 1 (how to start), Part 2 (create admin grid)Part 3 (observers).

 

 

 

Automatic ecommerce slider: forget about it. We tell you why and give you alternatives

Sliders may be aesthetic – nobody denies that. Many people spend serious amounts of working hours with making the carefully designed slides change appropriately at the top of their websites and online stores. The problem is that the more they work on it, the more damage they do to themselves.

The biggest problem is that using large sized automatic sliders is even more damaging in an online shop than it is on other sites.

Because it kills your conversion.

Let’s go through in detail why. This is what you can read about later on:

 

  • Let’s start at the beginning: what’s a carousel and what’s a slider?
  • Why do designers like sliders?
  • In a nutshell: why not to use sliders (ever)?
  • What do the experts say?
  • What do the professionals and the analytics say about automatic sliders?
    • Fragments of 1 percent
    • It’s annoying because you can’t control it
    • Many people miss them and that’s frustrating
    • It’s also problematic on mobile
    • It slows down your website
    • What does it say about you if you use sliders?
    • Automatic sliders are enemies of content and SEO
  • If it’s absolutely necessary for you to use sliders…
    • You want to place CTAs on the slides?
  • Some alternatives
    • Static image with CTA
    • Registration form
    • Video instead of slides
  • Replacing sliders: great solutions for Magento stores
  • Let’s sum it up

 

Let’s start at the beginning: what’s a carousel and what’s a slider?

 

Carousel: is applied for the navigation solutions, where you can see the same images at the top of a website “go around”, replacing one another. Sliders or slide shows are also used, they refer to practically the same solution.

Carousel is a spectacular solution, but it’s outdated – we’re going to talk a lot about why that is, so that’s all for the time being: this solution is not effective in personalizing, it doesn’t reach visitors adequately, and as a consequence, it damages user experience and SEO.

Nevertheless, sliders have still been very popular in the last few years among designers and less competent webmasters. And that’s exactly why this article is important: we are going to describe in detail why their use is harmful, why both users and algorithms react to them negatively.

And even if you are using slide shows in your ecommerce store at the moment, we hope that by the time you get to the end of this article, you will remove them from there and you will replace them with something much more effective.

 

Why do graphic designers like sliders?

 

There are several reasons for that – and yes, it’s mostly the designers, having no experience at all in UX (user experience), who promote their use, while conversion optimization experts would most willingly erase even the memory of the entire practice.

 

  • It shows more in a smaller area. Sliders are ideal tools for maximizing visual elements: that’s how you show several things simultaneously. Why shouldn’t you place 5 great illustrations in one place where only 1 would fit anyway?
  • It attracts attention – this can also be a problem. It goes without saying that moving elements capture people’s attention, that’s how our brain is programmed. If you immediately notice on an otherwise static website when the image changes on the slider, that proves nothing more than that our ancestors were capable of effectively spotting the predators around them. We will soon write also in detail about why this may be problematic: it explains enough that this kind of attention raising method quickly becomes too much, and it falls victim to banner blindness.
  • Sliders are many times used in order to increase the conversion rate. This train of thoughts is wrong, but its basis is that the more offers you show the visitors, the more likely it is that in the end something is presented to them that they will actually like. For this very reason most sliders are clickable, they are present on the site practically as CTAs replacing each other.

 

tips Tip: Lee Duddell, founder of WhatUsersDo goes as far as saying that a carousel is not good for anything else but to show the marketing manager that his latest idea has been built in the main page and that he can be satisfied with that.

Fortunately, the statement according to which sliders are effective, can be disproved by a great deal of case studies: that’s exactly the reason why professionals have given up their use long ago, no matter how attractive they consider them to be.

 

In a nutshell: why not to use automatic ecommerce sliders (ever)?

 

carousel-in-action

 

Being the operator of an ecommerce store, your obvious goal is to realize a higher conversion rate among the customers arriving to your pages. So the first thing that you should know is that according to the case studies, less than 1 percent clicks on sliders.

The reason for this is mainly that most people simply ignore them. Sliders represent a continuously moving element in your field of vision, that shows offers and pieces of content the majority of which are uninteresting to you.

If something is not interesting to you, if you are not the target audience, and if it’s not even remarkably creative, you just simply don’t pay attention to it. This is exactly what brought about the “fall of banners”, and that’s why traditional advertising is gradually replaced by content marketing that works with segmentation and personalization.

When was the last time that you remembered a banner on any page – and not in the negative sense? When did it raise your attention in an actually relevant way (and it didn’t simply fill the whole webpage in order to make sure that you notice it)?

Obviously, your visitors will click in case you show them something interesting – but if you show them five to ten slides of which at most one is interesting to them, there’s a very slight chance that they will click.

 

What do the experts say?

 

We will support with data and arguments why you shouldn’t use sliders, but first, let’s see what the experts in the industry say. It’s best if we directly quote some words from them.

"I think sliders are interesting but somewhat problematic. The biggest problem I see is that if visitors are bouncing from the page in a second or two, they will never see the other options on the slider. If you use a slider for navigation, be sure the same choices are visible in static form, too. I think sliders work best for portfolio displays where several large, strong images can be displayed in the same space without impeding the visitor’s ability to navigate or determine what other content is on the site."Roger Dooley, author of Brainfluence and owner of Neurosciencemarketing.com

 

"We seldom use sliders. A slider is an “involuntary autoscroll.” It’s like the webpage grabs the user’s mouse and starts scrolling around the page without the user’s permission. And we, as designers, lose control of what the user sees. If the user scrolls down the page, they may completely miss some of the panels of the slider."Karl Blanks, co-founder of Conversion Rate Experts

 

"Sliders are absolutely evil and should be removed immediately."Tim Ash, author of Landing Page Optimization

 

After these strong opinions you are definitely curious about the different pieces of evidence…

 

What do the professionals and the analytics say about sliders?

 

carousel-effectiveness

 

The reason why online marketing has a great advantage over traditional marketing communications right from the beginning, is that everything can be superbly measured. Thanks to analytics you can make great case studies, analyses about how the visitors react to the modifications, you can also run A/B tests examining efficiency, and so on.

It goes without saying that a lot of case studies have already dealt also with the effectiveness of sliders, slide shows, since they are still so popular.

It’s worth mentioning at this point that it’s rare that similar analyses bring consistent results. However, in case of sliders, all existing case studies are in practically complete agreement.

 

Fragments of 1 percent

 

According to a study from 2013, approximately 1% of the visitors click on any of the slides at all. And this slide is the first one in 84% of the cases – minimal attention is paid to all the other ones, they raise the attention of only an extremely small fragment of visitors.

It may already be worthwhile for you asking the following question at this point: will you cover the part of your online shop above the fold – which is one of the most valuable positions – with a tool that most of your visitors will never click on? Or, you would rather put something else there, like for example a personalized offer or the advertisement of your most popular product?

 

Automatic sliders and carousels are annoying because you can’t control them

 

Nielsen also examined what’s the average user’s attitude towards these slide shows and they came to very interesting conclusions – these are reliable because they work with large samples very thoroughly, paying attention to the details as well.

One of their main conclusions is that because of banner blindness, most people actually simply ignore sliders.

And this is not even the biggest problem.

Because those who notice them, find them extremely annoying.

 

The reason for that is simple: Modern web design places great emphasis on providing the most comfortable interface possible. User experience (UX) is incredibly important: if the users cannot use your website or ecommerce store comfortably, they will just look for another that pleases them more.

 

Yet sliders are not at all compatible with such intuitive interfaces: that’s because they are moving by themselves. The users have no power over them, they can’t control their movement and this automation creates the feeling of powerlessness – which means that sliders will have the exact opposite effect that you wanted.

SearchEngineLand comes up with even more depressing data:The proportion of the users clicking on any of the slides varies between 0.1 and 0.6% according to them.

 

With every slide you have less and less chance of getting the attention of the users, and it’s easy to see why: your visitors will not keep on waiting at the top of your page while 5, 10 or even more slides appear after one another, until the offer suitable for them appears.

They will bounce off instead, since they don’t find straight away what they are looking for (because the first slide is about an offer that’s not for them), or because they start using your site actively, they search, scroll down, and this way they may never come across even the second slide.

Thus you have worked unnecessarily with the elaboration of all these, and with putting various CTAs on them, which would probably work perfectly at other places and in a different environment.

In case you were curious about further data, jump over to Orbit Media Studios: they gathered a great deal of information on the subject – and of course the results of all studies are similar.

 

Many people miss them and that’s frustrating

 

It’s also a problem that slides sometimes move too fast. Even if they show exactly what a given visitor is looking for, there still won’t be any clicks as a result of that – even though you put it on the top of the page with a giant font size and illustration.

 

Who can this be problematic for?

  • Those who are less nimble, who are less proficient in using the internet, or who are physically disabled.
  • Those, who don’t read so fast: no matter if you show them the right offer for a few seconds, they might not even realize that, because they don’t have a chance to read it.
  • For the ones who are not native speakers, who also process the information more slowly.

 

And in addition to all that, it’s certainly a problem what we already saw with the previous example: if you present your offer in the form of a slide show, the chance of anyone seeing one offer out of five, decreases to one fifth.

You may run into difficulties already at the beginning, when determining how long you should display each slide.

  • If the display time is too short, people will simply miss them,
  • however, if the time is too long, there’s no point in having several slides in the first place.

 

It’s also problematic on mobile

 

It is important that the users can use your site smoothly: if possible, that’s even more important on mobile, which we have already talked about earlier.

While browsing on mobile, the users expect not only to keep everything under their control, but to be able to use your ecommerce site comfortably as well, and also that your site is displayed perfectly on a small screen.

It’s extremely rare that sliders appear fine. They usually stick out, slide apart, or they just simply lose all their remaining functionality. In the best case, you find an extension that’s capable of displaying the slide show responsively, and what’s more, it even supports swiping.

However, that usually doesn’t come to the mind of the users, which is logical, because they expect to get to the new pieces of content and new offers only after having scrolled down. And in case you have to explain how something this simple works, you’ve already been on the wrong path for a long time.

 

Large sized sliders slow down your website

 

Since you are stuffing more pieces of visual content in the page, especially when using very high resolution images, it will necessarily load more slowly – and that’s bad for you both on desktop and on mobile. Of course there are remedies for that, like using Varnish cache, but it won’t solve user experience issues.

 

You always have to bear in mind the golden rule of 3

Your page should load in less than 3 seconds and its size should be less than 3 MB. Placing large sized sliders and thus stuffing more and more images or perhaps animations on the page will obviously not facilitate that.

 

What does it say about you if you use sliders?

 

First of all, that you are not capable of providing a nice user experience to your visitors, or that you don’t even want to. This is evidently not a kind thing to do.

On the other hand: if you fill the above-the-fold part of your webpage with 5 to 10 slides, that will show that you don’t exactly know what kind of message you want to show – and for this reason, you try everything at the same time.

You’ll confuse the visitors with that, which will soon lead to the decrease of your conversion rate.

 

Automatic sliders are enemies of content and SEO

 

So we made it clear that sliders by themselves are not suitable for the display and the recommendation of any kind of content. But there’s another problem with it as well, that it takes up space.

 

  • You could display basically anything in your online store instead of the sliders – yet most of the time we can still see so huge slides that cover almost the entire screen and thus push your valuable, carefully created pieces of content to a lower part of the page.
  • And that’s damaging in terms of SEO, since less people get to the pieces of content, less people click on them – and that’s represented not only in the analytics, Google also monitors what user experience your website provides to the users, and sliders have damaging effects on exactly those indices which the algorithm takes into account in that respect.
  • It’s also problematic that in many cases, each and every slide gets a separate headline, of course in H1 – and yet one of the most fundamental principles of SEO is that there should always be only one H1 tag on a page. This way, whenever the slider moves, the headline changes, and thus the efficiency of optimization on a keyword decreases significantly.
  • The worst thing is when you use Flash to display a slide show, yet for some inexplicable reason this still happens in a lot of cases. Flash is just simply not suitable for being used for any kind of search engine optimization, and in case you want your content to be visible on mobile as well, it’s a total disaster, since there are hardly any devices which can display it properly.

 

[bctt tweet=”According to nearly all existing sources, automatic sliders are just simply bad and ineffective.” username=”aionhill”]

 

If it’s absolutely necessary for you to use sliders…

 

We can’t really imagine what reasons you could have for using slide shows on your site – but if you insist on using them, we give you some hints how you can do that without killing the conversion in your online shop.

You should never, ever place the slider on your main page.

It slows down the page, it takes up space, and it is confusing – you couldn’t do anything more damaging. On the other hand, there are some places within the ecommerce store where its use may be reasonable. Such places can be:

 

  • On the product pages where you can display product photos.
  • In a portfolio where you present services, images and animations about the same topic.
  • Places where you have no other goal than showing the content of the slider. Where the slider itself is the purpose, and you don’t use it in order to make the visitor get to anywhere.

 

At places like these, sliders don’t confuse the users, because they don’t try to communicate too many messages at the same time. It presents a specific subject from several aspects instead.

And you should definitely provide some kind of navigation options with which the users can control the slide show – with which they can step forward or back, with which they can stop the automatic change of the slides.

It’s not enough if you place some small clickable dots at the bottom of the images – use clearly visible arrows on at least two sides which make moving forward and backwards possible. And when the users click on these, the slide should freeze: nothing is more irritating than when you move back two slides and the slider automatically starts moving forward again.

 

tips Advice: You should completely forget full-width automatic sliders on a mobile optimized website: you should rather use galleries that the visitor can comfortably go over.

 

You want to display CTAs on the slides?

 

Then you should use a single one.

Don’t distract attention, don’t ask for several things at the same time: you should have one single CTA that appears on each slide the same way, at the same place.

This way the visitors will not have to look for the suitable one – we don’t suggest that you direct your visitors with that, but if you still want to do that, this is the only method that’s actually viable.

On a product page, for example, where you display the photos of the product, you might as well place a CTA on the slides, with which the product can be added to the shopping cart.

 

The alternatives

 

carousel-videos

 

If you decide to display some kind of an effective solution at the top of your page instead of a slider, and if you don’t just want to list your pieces of content or fill up the entire part that’s above the fold with your logo or with navigation, there are several alternatives.

 

1. Static image with CTA

Don’t fritter away attention: look for just one good image and place a CTA on it. Make sure that they are in harmony with each other: the visual message should reinforce how you formulated the invitation. Feel free to use the colour theory as well in order to achieve this.

This way you can also display more significant information, because the visitors will have enough time to read them, and then to click on them. They don’t rush anywhere because they know that the offer will stay before their eyes.

 

2. Registration form

 

 

In case you have a bait offer or you’re just simply capable of formulating invitingly why your visitors should immediately register to your newsletter, you can place the registration form right at the top of the page.

Bear in mind that this has to be very simple: the more fields you use, the less people will provide their data.

In an ideal case the registration form includes 2 or 3 fields (name and email address, this way you can even personalize up to a minimal extent), but it can also be just a single one, requiring the email address. You can deal with the rest when you have already built your database.

 

Your offer should also be very concise and clear:

  • it should be obvious to the visitors right away what you give them (for which they pay with their data),
  • what they have to do (let’s say, write their addresses in the given field),
  • and what happens right after that (for example they will receive the bait item in email)

 

Of course, you can reinforce that as well with an image – by presenting your bait offer or even by presenting somehow how they will benefit from that.

 

3. Videos instead of slides

What’s the difference between a slider and a video? First of all, that the numbers show that videos convert wonderfully, they improve your conversion rate, while sliders kill it. You can check out our article on how you should apply product videos

But why is it like that?

Because videos give the control over to the users. While sliders do their job without intervention, the visitors can pause or play the videos any time they want to.

And they don’t even have to pay attention to more things at the same time: only one thing matters to them in the given moment, what they are seeing in the video. You can create the video in a logical way, with beautiful visual elements, even with sounds, which means you’ll have several ways of emphasizing your most important message. The users will get an excellent storytelling tool instead of an excellent user-irritating tool.

 

Replacing sliders: great solutions for Magento stores

 

If you have a Magento online store, or plan to run one in the future, we have good news for you. The Z-Blocks Magento extension, also compatible with the Magento 2 system, offers a great deal of different possibilities for replacing sliders.

Thanks to Z-Blocks, you can display an unlimited number of static custom blocks on frontend, e.g. banners, CTA messages, promotions, without having to make any changes in template or layout files.

 

Main features:

  • Content options allow countless formats
  • Targeting options allow customer segmentation
  • Placement anywhere within a store/page
  • Display schedule to show block at specific time  (e.g. in a specified promotional period)

 

z-blocks magento extension

 

For further information go to: Z-Blocks

 

Let’s sum it up

  • Most users don’t notice them or don’t want to deal with them.
  • Those who notice them, usually get irritated by them.
  • It spoils the user experience.
  • It hides your most valuable pieces of content.
  • It divides the attention of the user.
  • It takes the control out of his hands.
  • It has a bad effect on the SEO of your site.

You can apply a great deal of other solutions instead of the sliders – you can replace them with videos or static elements, which may bring you a much higher conversion rate later. Or, you can get rid of them totally and promote your content or your best offers on your main page.

Instead of addressing everyone at the same time with the same message, you should start personalizing based on analytics and testing. Collect the necessary data about your visitors and show them specific messages which will very much likely be interesting to them.

Sliders are outdated: they have never been effective, and they are even considered to be specifically bad, damaging solutions which often don’t even perform their only function, the enhancement of the page’s aesthetic appearance, because a lot of people don’t even notice them due to banner blindness.

Their use is not a 100 percent unsubstantiated, but you need to choose very carefully where to put them.

However, if you can help it, you shouldn’t use ecommerce sliders and carousels on your main page or other similarly important spots under any circumstances – unless you want to reduce the conversion of your ecommerce store on purpose.

 

 

5 important tasks you really should automate in your ecommerce store

Those who sell online and operate an ecommerce store, have their thoughts a lot around sustainable growth. The tasks become more numerous and more complex with time, and it’s impossible to keep operating an online shop offering several thousands of products with only the most basic automation.

 

What we will cover:

  • Which tasks should you automate?
    • Email communication
    • Stocktaking
    • Transactions
    • Customer service
    • Refunds and repayments
  • Try these software solutions
    • If This Than That
    • Buffer
    • SellBrite
    • MailChimp
  • What happens if you don’t automate?

 

Which tasks should you automate?

Automate tasks

 

Let’s see which areas are those where sooner or later you’ll need to let at least part of the control out of your hands.

 

Email communication

 

The most important communication channel of your online store is email.

You send letters to all of those who

 

  • subscribe to your newsletter,
  • purchase from you,
  • register to your online shop,
  • ask questions,
  • send in complaints etc.

 

You have the possibility of writing and preparing almost all the emails in advance – a welcome email will not change a lot with time once you refined it to be effective, and you don’t need to write your campaigns along the way.

On the other hand, you can send all these letters out efficiently only if you leave the process with an automated system.

 

A system that’s

  • capable of handling different customer groups,
  • knows when exactly it has to send a message out,
  • moreover, it knows what to do with someone who has never opened an email before,
  • and knows how to make changes to the list by itself.

 

You cannot do this task yourself, and it wouldn’t even be reasonable if you did. There are great solutions thanks to which you really have to deal only with this: with communication itself and you don’t have to affix stamps to each letter yourself.

Based on that, I suggest you prepare as many letters as possible: for all occasions when there’s an important event or interaction an easily customizable template should be made, of which the system will know exactly when and who to send it out to.

 

Stocktaking

 

Stocktaking is one of the most feared tasks of any commercial employee, no matter if we’re talking about an online or an offline shop. Keeping track of how many of what the stock contains by using human labour, tables, and continuous counting and recounting is not only a difficult task – doing this manually is not even efficient. The probability of errors is too high, which may lead to inconvenient feedback and loss of income.

 

Therefore, in an ideal case, record keeping in an ecommerce store is automated: the system monitors how many pieces of what the customers ordered, and if a product is running out, it may even be automatically reordered from the supplier.

 

It’s worthwhile paying attention to choosing an automated record keeping system that’s able to manage records of even several online shops

 

tips TIP: A great advantage of Magento is that, from a single administrative interface, you can run even several ecommerce stores that are practically independent of each other, and if you provide a unified, still clear-cut system as a basis of these, instead of providing separate ones, you will be able to operate much more effectively.

 

Synchronization should always be real-time, and you should choose an easily understandable and manageable user interface, if possible – you haven’t made much progress if you have to delve into the system for hours in order to find out how many pieces are left of a given product.

 

Transactions

 

Your ecommerce store operates well if you never, not once have to talk to customers on the phone or even by email in order to settle payments. As a consequence, you need an online store engine into which gateway tools and other solutions, which take the task of managing and monitoring cash flow out of your hands, can be well integrated.

When choosing, you should bear in mind what kind of payment methods you can integrate (it does matter what sort of cards, online payment options have been built in, whether collect on delivery is an option, and so on), and also whether the system can at all be used perfectly in the country where your ecommerce store is operating.

It’s also worth paying attention to how much you pay in exchange for this comfort: most transaction automation services ask for a commission for the management of your cash flow, just like banks. If you are working with a low margin or your financial expenses are high anyway, you should carefully consider the choice between the different plans.

 

Customer service

 

Automation of customer service brings back bad memories in most people: we all have already listened to Beethoven’s oeuvre many times while waiting for the operator of some large corporation, while pressing the various buttons in order to get through to the right place in the menu.

However, online automation is capable of making automation convenient for the customer as well. You can answer a lot of questions quite simply, without actual human intervention being necessary, because there’s a good chance that people just simply don’t find the information.

 

The aim is to have the fewest possible people get to the point of having to talk to a real person – because this will definitely be necessary up to a minimal extent.

 

The companies doing customer service automation usually employ some kind of a ticket system. The user clicks through what he is dissatisfied about, and the customer service representative has to address the complaint or question only if the user doesn’t get a proper answer. However, thanks to going through the system, the problem is much better defined, more specific in the end, which means it can be solved more efficiently later on.

You can handle even the frequently asked questions as part of this: its purpose is to answer all questions that don’t need direct contact, only a bit of guidance.

tips TIP: Of course you can make your own job easier, you can compile the Q&A content with the help of extensions or modules especially designed for that, like for example Q&A or Templatic designed for WordPress based pages.

 

Refunds and repayments

 

It doesn’t matter how good your product and your service is, you cannot please everyone. Since even the most advanced companies have unsatisfied customers, you have to take the time to deal with refunds and returns.

 

  • 1 – You should document your process in detail: describe when exactly you should do what, when is there a need for assessment, when for intervention, so that there’s never a mix-up concerning that.
  • 2 – Document properly the refund policy as well, so that it’s clear to the customers when you do what and why.

 

Then you can look for a service that’s able to automate all this. Such a service may be for example Returns Manager available for the Shopify system, which allows the customers to request the refund online.

All right – in order to automate all these processes, and maybe some others, too, you will need professional assistance: software solutions that were specifically developed for that purpose. We are just going to recommend you some of those.

 

Try these pieces of software

Softwares and tools

 

If This Than That

 

IFTTT’s name implies the principle according to which it operates: you can set a given reaction to a given action in a way that you still have access to several dozens of services, among which you can find Drive, Dropbox, Facebook, Instagram and a great deal of other channels as well.

It’s mainly automation of the communication that you can do with it, but not exclusively – you can set for example that if you change the profile photo on your corporate Facebook page, it changes on Twitter as well, or that the service sends you a text message if the price of a given share on the stock market increases above a certain level.

The bottom line is that you can set up your own automation processes, you can determine when should something happen, and you can do that pretty much freely.

 

Buffer

 

This software has been specifically designed for online social presence, which helps you in not having to spend every free minute you have with the publishing of posts.

By using Buffer you can decrease the time spent on the management of your different channels to only a couple of hours – in case you have a content calendar compiled in advance and timed pieces of content, and you also know how you want to shape your communication in the forthcoming week, all you have to do is set in advance what Buffer should post and where, and you will only have to deal with reactions after that.

 

Hootsuite

 

Hootsuite is basically used for the same purpose as Buffer: for the automation of your social channels.

What’s the difference?

If you want to manage several channels simultaneously, Hootsuite may be a better choice, just as it may also be that in case you would like to address your audience more directly.

Even though it’s somewhat more complicated, however, that’s because the functions are versatile as well. Hootsuite is the tool of the professionals, who are willing to put a lot of time and effort into running extremely powerful social campaigns.

Hootsuite is capable of enabling you to manage your Twitter, Facebook, Google+, LinkedIn, YouTube, Instagram and WordPress channels at the same place, to time your publications, and it also provides you with analytical solutions to monitor how successful your efforts are.

 

SellBrite

 

It’s a simple piece of software, which allows you to present and offer your products for sale on several channels at the same time. It offers you a platform that enables you to easily and simply manage your inventory in one place, while automation will take most of the work out of your hands.

In addition, the service also provides extremely useful and detailed reports for you, with which you can increase the efficiency of your sales provided they are managed with competence.

 

MailChimp

 

We have already written about how your ecommerce store should communicate in email. You have to automate your messages, right from the acknowledgement of receipt and thank you emails to the personalized offers.

You can send these only to the right people – that is to say: with a cost-effective, low waste coverage – in the first place, in case you do proper segmentation.

 

Therefore, you need a service that doesn’t just send out the emails, but it can manage your lists as well, and it can also be integrated well with other services, so that the information relative to the segments always remains up-to-date.

And in this case it’s MailChimp you are looking for. Besides automated email send-outs you will also be provided with useful reports, which will help you with the further fine-tuning of your communication, thus increasing the open rate and the click-through rate and thus helping you with the steering the highest possible proportion of your recipients to conversion in the end.

 

What happens if you don’t automate?

Actually nothing, and that’s exactly what’s going to be bad for you.

What will happen? You will not be able to scale your business, you will not be able to deal with the really important things because you will still be struggling with tasks in your everyday life, which a machine, even a simple piece of software or algorithm would be able to carry out.

It’s not the task of a company leader to micromanage the work of each of his employees – and if he’s operating an online shop, even alone, it’s not his job to deal with every little task himself.

A good ecommerce store operates almost on its own, and all you should deal with is communication, marketing and business planning.

If you haven’t yet reached this level, you still have plenty of room for improvement in the field of ecommerce automation.

 

 

How you can easily ruin your online store’s conversion process

No matter how professional your online shop’s design is, no matter how good your product is, you might still be far from success. A series of little things can go astray that will result in low conversion rate despite your best efforts.

 

The goal: To be able to recognize these issues, to see it for yourself what it is that prevents a user from making a purchase. In the long run you should be able not only to identify but to resolve these problems as well.

 

We will cover all these points in the article below:

  • Why you should pay attention to every detail
  • Systemic issues
    • Poorly organized webshop
    • User gets lost or puzzled
  • The two most common mistakes on product pages
    • Low quality photos
    • Poorly written product descriptions
  • Pitfalls of the checkout process
    • Not providing enough information
    • Not guiding the customer
    • Mandatory registration
  • Disharmonic design
    • Colours are way too bright or way too pale
    • Not responsive
    • Long loading times
    • Under no circumstances should you use sliders
  • This list has no end

 

Why you should pay attention to every detail

 

The answer lies in the „broken window theory” originally associated with criminology and introduced by social scientists James Q. Wilson and George L. Kelling in 1982.

The theory itself is quite easy to understand. Let’s say you are walking in a neighbourhood and there is a building with a few broken windows. For it hasn’t been repaired, one would assume that people do not care about these kinds of things in this part of the city. The problem is not with the broken window itself, but the general principle that this sort of thing is tolerated.

Most customers relate to online stores the same way: They judge on the basis of a small part of the whole.

  • If your store is full of spelling mistakes,
  • the design breaks here and there,
  • outdated solutions being used…

 

All these seemingly insignificant issues convey the message that you don’t care enough to spend time with troubleshooting, you don’t pay attention to what your customers’ experience is, therefore you don’t respect your customers’ opinions and time.

In other cases, it might be simply that some processes haven’t been optimized properly to meet the needs of your audience: e.g. instead of a multi-page checkout process your customers might prefer a one-page payment process or that the colour scheme being used in the design does not match the product.

So if you see that the conversion rate is low, you have to find out what’s not working and fix it.

By using analytics you get a tool that helps you find out where your visitors get stuck. Then by testing you have to narrow it down what specific approach should be applied to fix the issue.

Let’s go through what kinds of mistakes you might run into.

 

Systemic issues

 

Poorly organized online shop

 

Has it happened to you that you walked into a shop and for minutes you did not know exactly where to start though you had arrived purposefully with specific purchase intentions?

Puzzlement just like this has dire consequences for conversion rate and it can appear quite easily in your ecommerce store as well.

One might make it hard for their own users to find certain products without even being aware of it. This may be caused by the search box being put to the wrong place or being inadequate for the purpose.

If there is no possibility of properly refining your search terms, for each search hundreds of products will show up that will cause your customers to drown in a sea of data. After a time they will eventually get tired of not finding what they came for and leave for another online shop.

Often there are defects with the navigation in general as well. Options may be hard to find, their use unclear and too complicated to understand. For the latter it is a good example when the product categories are piled up in a drop-down menu. In this case you need to control the cursor very carefully because one wrong move is enough and the whole multi-level maze disappears. Few things can be more annoying for online shoppers than that.

 

What you should do is to observe whether visitors manage to get from one sub-page to another. Analyse your page through the eyes of an outsider and ask your returning customers about their practices and experience on how they use it. Use Heatmap analysis to see what kind of activity is happening in your online store.

 

User gets lost or puzzled

 

A good rule of thumb is to make sure a user of your website is able to find any information with no more than three mouse clicks.

However, the three-click rule by itself won’t solve all your problems. In addition to the rule, your primary concern should be to plan out the routes your customers are supposed to take.

A 2003 case study – which still many professionals refer to in the industry – says that the reason for dissatisfaction is not really that a lot of clicks are needed, but rather that the visitor is not being controlled firmly enough. It can be greatly confusing when one gets to unexpected places.

Therefore it is of high priority to let your customers know continuously where the next step will take them to. You should write down briefly what will happen, where he or she will get to upon clicking either on the CTA (call to action).

  • To the search results or the search engine?
  • To the product page or the category page?
  • To your shopping cart or straight to checkout?

Keep all these in mind at all times. Never let your visitors get puzzled and disoriented.

 

The two most common mistakes on product pages

unomptimized ecommerce page

Low quality photos

 

Pictures are your greatest weapons. This is your chance to fully showcase your product.

If your customers don’t have the possibility to zoom and see the product from every possible angle, if they cannot experience the product through photos, your chance to sell will dramatically decrease. Your conversion rate will hit rock-bottom.

It is no coincidence that in physical shops it is very important for people to be able to touch the product, to feel its weight and material, to try it on/out, before they pay for it at the cashier counter. In ecommerce stores images play the same role by enabling people to see the products’ size, colour and texture.

If you do not provide a proper insight into your products, your customers may interpret it as if you were trying to hide something. A low quality photo can easily imply that you do not want to show every aspect of the product.

When people start thinking about what might be the reason of this, some will certainly assume you try to hide the fact that something is not quite right with the product. This small, even subliminal distrust can cause your conversion rate to drop.

Therefore your ultimate goal is to meet your customers’ information need. By using high-resolution images, your communication becomes more honest and transparent. Use multiple photos on your site so the customer can truly experience your product and get every piece of information they need. It is also worth considering to hire a professional photographer to maximize the quality of the photos. These kinds of investments typically provide high return.

 

Poorly written product descriptions

 

Having a bad product description is usually even worse than not having any at all. A poorly drafted – Typos, spelling errors, meaningless phrases – description can easily discourage anybody from buying.

Running into obviously copy-pasted texts – that usually offer little relevant information – have the same effect on your visitors’ opinion about an online shop.

In addition, you should avoid copying any kind of content in general. Not just that Google doesn’t like it (you get penalty for it in terms of SEO), but your visitors won’t appreciate it either if they will have to hunt down the differences between descriptions of similar products.

 

Pitfalls of the checkout process

wrong checkout process

Most customers drop out at the very end of the process, i.e. at checkout. It may be that you don’t use „Call to action” techniques well enough – we have talked about this before. But it is also possible that your customers get puzzled by something else.

 

Not providing enough information

 

If you hide certain elements of information, you shouldn’t be suprised that the visitor gets confused. If shipping costs are not visible on the product page and there is no dynamically updated shopping cart that constantly shows how much you have put into it so far, your potential customers may see a higher sum at checkout than they have expected.

If you stand at the cash register in a shop and you need to pay more than expected, you will be likely to stick with it – if not for any other reason than because of other people in the queue waiting for you to finish. In an online store, however, buying is a totally impersonal process, there is a risk that the customer simply closes the window and leaves the shopping cart.

Therefore one should be informed about the total sum even before they reach checkout.

 

Not guiding the customer

 

You’d be surprised how many people visit an ecommerce store, add a product they like to the cart, then simply forget about it while they are browsing.

 

tips TIP: You’d better make sure that the cart is not only continuously visible and provides every necessary information – besides the total sum there should be the number of products and their names – but that it is very easy to spot as well. You can increase its effectiveness by adding a “call to action” to it.

 

Mandatory registration

 

Keep in mind: every extra step, every piece of requested additional information causes the conversion rate to decrease significantly.

 

If you require your customer to register before they could purchase your products, you make it very difficult for them to convert. As a result, you make your own life a lot harder.
Just imagine that you have been in a hypermarket for an hour, then you go to the checkout desk and the cashier tells you that you can take the goods – which you picked up and carried along for an hour – only if you are willing to sign up for their customer loyalty programme.

Registration is of course a huge advantage for you, but making registration mandatory is definitely not the right way to convince the user to do so, as this will only lead to a reduction in your income.

One way is to simply ask for an email address on the receipt: then in the confirmation letter you can offer him to sign up for your newsletter. You can also recommend your content valuable to him and there are a number of other ways to make them stay.

 

Disharmonic design

wrong ux

Colours are way too vivid or way too pale

 

If you’re curious to what extent colour combinations in themselves can affect how a user decides whether they will ultimately trust your e-store, check out our article on colour theory.

You need to choose a colour scheme that not only matches both your corporate identity and products, but doesn’t drive away the customers either. Whatever your target audience may be, if your online shop has a citrine colour scheme, they will run away from you after the first click.

Many of today’s most popular web design trends are influenced by minimalism (a web design movement that began in the early 2000’s), but many people fall into the trap of overdoing it.

If you end up with a meaningless page that looks like as if it was created in 1995 or simply as if not enough energy was invested into the creation of it, you are on the wrong track.

 

Not responsive

 

It’s 2016: if your ecommerce store is not responsive, it’s like you were deliberately hurting your own business. Like not having a website at all…

 

Smart device users are taking an increasing slice of the ecommerce pie, and they spend more and more money per purchase and per person as well – although for the time being typically these numbers are still lower in value compared to purchases made on desktops.

The important thing is making the mobile user experience completely smooth: so that one can achieve the same result on mobile with a touchscreen as on PC with a mouse. Besides making sure the site does not fall apart, you should also avoid having to scroll sideways and having to type too much.

 

Long loading times

 

Of course this could be due to the inefficient design or implementation of the backend part of the system, but most of the time it is caused by an overdesigned frontend with impractical solutions. Although it is less and less of a problem as broadband internet is getting more and more accessible, it can still lead to serious troubles when it comes to smartphones and tablets.

 

The rule of 3 works here too

None of your web pages should be larger than 3MB, and should not load more than 3 seconds. The user is impatient: at times even 3 seconds is too much, and it does not take much for an online customer to hit the go back button and look for the product he needs in another, better-working store.

 

Under no circumstances should you use sliders

 

Despite what some designers say, the use of sliders and carousels are really bad for your conversion rate.

By visiting the Conversion XL webpage you can see the test results: the moving graphic ads lead to poor results, at times not even measurable in terms of whole percentage points.

Of course the usage of moving banners is a great way of getting the attention as it is part of the evolution. The phased-out movement of the slider, as it changes and changes again with little intermittences in between, draws your attention – the same way as your brain needed to focus on stalking predators’ movements thousands of years ago in order to survive.

Nowadays though it is no longer dangerous to neglect it and the customer quickly gets used to it and learns that the movement aiming to grab his attention does nothing but distract him.

 

Thanks to banner blindness thus the “habit of neglecting” is formed as time goes by.

Not only that, the lack of control would drive the customer crazy. He would find that there is something bothersome in his field of vision which cannot be turned off. You can bet, it is one of those things that does not improve customer experience.

 

And that’s just the beginning…

There are plenty of things that can go wrong with your online shop which in turn will lower the conversion rate.

These could be identified by using the tests mentioned earlier – the best method though is to simply ask your customers. Those who have not bought anything from you yet cannot be reached this way. By using analytics you can find the problematic elements that caused these lost customers to leave.

The next step would be to start the ruthless A/B testing: you need to try all of the important elements in various ways, and run these tests all the time. It is guaranteed that you will never get to the end of it, a perfect online store cannot be built as no homogenous customer base exists that will like all of your solutions.

There are a few things you can do though to increase your conversion rate by even 10%. By recreating your menu, removing a banner or slider and by uploading a unique text which speaks to your niche market, you can get even two-digit percentage increases in conversion rate.

 

Magento 2 module development – a comprehensive guide – Part 3 (Observers)

In this article I will describe the following two topics:

  • Building up a basic sample module
  • Creating and implementing Observers

 

1) Building up a basic sample module

 

In my previous article (Part 1, Part 2) you could see how to make a sample Magento 2.0 module and how to create, edit, save and delete the database tables, admin grid and data belonging to it.

Now we are going to deal with the operation of observers within another simple Magento 2.0 module.

In the first step let’s create a basic sample module. Since I already described this topic in my earlier post, now I am presenting only the module structure.

 

magento 2 module structure

 

2) Creating and implementing observers

 

We create two Observers in the Magento 2.0 sample module that we “connect” with two separate events. In the case of Magento 1.x modules the functions (and business logics running in them), to be created with different events, were created in one Observer class.

In Magento 2.0, for every event we need to create a separate Observer class in which the business logic is created in the execute(…) function.

Before the Observer class is created, we need to define to which event your own business logic should apply. Here it’s important to decide which page you want to use it on, either on frontend or admin (adminhtml), so you need to place the definition xml file in the appropriate location.

You can place it “globally”, but I recommend placing it separately. In the first example, in case of a frontend page event, after sending the default Magento 2.0 contact form,      we want to “catch” the sent data with our own Observer class.

For this we need an events.xml file which can be found in the following location in our sample module: app/code/Aion/Sample/etc/frontend/events.xml. The file contains the following:

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="controller_action_postdispatch_contact_index_post">
        <observer name="aion_sample_post_capture" instance="Aion\Sample\Observer\CapturePost" />
    </event>
</config>

The file’s structure is very simple. The events we’d like to “catch” are defined in the name parameter within the event tag. In our case it is the event following the post controller in the -default Contact module of Magento 2.0. Then we define our own Observer class, to be called in the future, in the Observer tag located within the event tag. We also give it a name parameter.

We can define more “custom” Observers in a list- with this same event, and we can define more event tags in the xml file if we want to use additional “custom” Observers.

Next, we need to create our own Observer class and define the necessary business logic in it. In our sample module, the file is located here: app/code/Aion/Sample/Observer/CapturePost.php. The file contains the following:

<?php
namespace Aion\Sample\Observer;

use Magento\Framework\Event\ObserverInterface;
use Aion\Sample\Helper\Data as DataHelper;
use Psr\Log\LoggerInterface;
use Magento\Framework\Event\Observer;
use Magento\Customer\Model\Customer;
use Magento\Framework\Exception\LocalizedException;

class CapturePost implements ObserverInterface
{
    /**
     * Aion Sample helper
     *
     * @var DataHelper
     */
    protected $_helper;

    /**
     * @var LoggerInterface
     */
    protected $_logger;

    /**
     * Capture Post Observer constructor
     *
     * @param DataHelper $helper
     * @param LoggerInterface $logger
     */
    public function __construct(
        DataHelper $helper,
        LoggerInterface $logger
    ) {
        $this->_helper = $helper;
        $this->_logger = $logger;
    }

    /**
     * Sample post capture event handler
     *
     * @param Observer $observer
     * @return self
     */
    public function execute(Observer $observer)
    {
        if ($this->_helper->isEnabled()) {

            $controller = $observer->getEvent()->getControllerAction();
            $post = $controller->getRequest()->getPostValue();

            if ($post) {

                try {

                    $this->_logger->debug('CapturePostObserver');
                    $this->_logger->log(100, print_r($post, true));

                    // comment out to check data
                    //\Zend_Debug::dump($post);
                    //die();

                    // do some logic

                } catch (LocalizedException $e) {
                    $this->_logger->error($e->getMessage());
                } catch (\Exception $e) {
                    $this->_logger->critical($e);
                }

            }

        }

        return $this;
    }
}

If the event, defined in the events.xml file mentioned above, takes place, the execute function in the CapturePost class is executed. The function first checks if our own module is enabled or not. If it is enabled, it “catches” the data posted by the default Contact form of Magento 2.0.

For simplicity’s sake, we only log the array in the debug.log file. With the data provided this way, we can create our own business logic.

In the second example, with an admin-related event, after the default Magento 2.0 customer save, we want to “catch” the customer object and data with our own Observer class.

For this, we’ll need an events.xml file which can be found in our sample module under app/code/Aion/Sample/etc/adminhtml/events.xml. The file includes the following:

<?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="controller_action_postdispatch_contact_index_post">
        <observer name="aion_sample_post_capture" instance="Aion\Sample\Observer\CaptureCustomer" />
    </event>
</config>

 

 

The file structure is the same as with the events.xml described in the precious example, but this time the adminhtml directory is placed here, thus the defined CaptureCustomer class will be called only in the admin scope for the event of customer_save_commit_after.

 

Next, similarly to the previous example, we need to create our own Observer class and implement the necessary business logic in it.

 

The file is located in our sample module under app/code/Aion/Sample/Observer/CaptureCustomer.php. The file contains the following:

 

<?php
namespace Aion\Sample\Observer;

use Magento\Framework\Event\ObserverInterface;
use Aion\Sample\Helper\Data as DataHelper;
use Psr\Log\LoggerInterface;
use Magento\Framework\Event\Observer;
use Magento\Customer\Model\Customer;
use Magento\Framework\Exception\LocalizedException;

class CaptureCustomer implements ObserverInterface
{
    /**
     * Aion Sample helper
     *
     * @var DataHelper
     */
    protected $_helper;

    /**
     * @var LoggerInterface
     */
    protected $_logger;

    /**
     * Capture Customer Observer constructor
     *
     * @param DataHelper $helper
     * @param LoggerInterface $logger
     */
    public function __construct(
        DataHelper $helper,
        LoggerInterface $logger
    ) {
        $this->_helper = $helper;
        $this->_logger = $logger;
    }

    /**
     * Sample customer capture event handler
     *
     * @param Observer $observer
     * @return self
     */
    public function execute(Observer $observer)
    {
        if ($this->_helper->isEnabled()) {

            /* @var Customer $customer */
            $customer = $observer->getEvent()->getCustomer();

            if (!is_null($customer) && $customer->getEntityId()) {

                try {

                    $this->_logger->debug('CaptureCustomerObserver');
                    $this->_logger->log(100, print_r($customer->getData(), true));
                    // comment out to check data
                    //\Zend_Debug::dump($customer->getData());
                    //die();

                    // do some logic

                } catch (LocalizedException $e) {
                    $this->_logger->error($e->getMessage());
                } catch (\Exception $e) {
                    $this->_logger->critical($e);
                }

            }

        }

        return $this;
    }
}

 

If the event, defined in the second events.xml file mentioned above, takes place, the function in the CaptureCustomer class is executed. The function first checks if our own module is enabled or not. If it is enabled, it “catches” the customer object after the described save in Magento 2.0.

For simplicity’s sake, we only log the data of the object in the debug.log file. With the object and data provided this way, we can create our own business logic.

 

Summary

In this article we illustrated with the help of two examples how to define and create custom or unique modules in Magento 2.0, for different events on both the fronted and admin pages.

 

See also Part 1 (comprehensive guide), Part 2 (create admin grid) and Part 4 (Knockout JS).

 

 

Magento Commerce: History and Features of The Most Popular eCommerce Platform

The debut of Magento Commerce wasn’t simply the appearance of a new system in ecommerce.

It was not by chance that it became one of the most popular systems in an incredibly short period of time, and it got the immediate attention of the major brands as well.

The previous systems, no matter whether they were open-source code software applications or commercial editions, never provided enough flexibility: operators of online shops always had to make compromises.

The open-source code allowed, of course, that the platforms could be shaped, however, most of the time this involved an extremely long development time and you needed to expect security problems and many times inappropriate integration.

 

Magento Commerce was the exception.

It provided a powerful, easily shapable, flexible and scalable system that any brand could customize to its corporate image and needs – and still can today.

 

Magento eCommerce or Magento Commerce? Magento officially uses “Magento Commerce”, however, as we see, “Magento eCommerce” is just as widely used in the online commerce ecosystem.

 

Contents:

 

History of Magento Magento 2 Version history Features Magento Marketplace Magento certifications Magento events Why Magento is No. 1?

 

The history of Magento Commerce

 

The beginning

 

Magento was introduced on 31 August 2007. The two fathers of the system were Roy Rubin and Yoav Kutner working for Varien.

Magento was first planned to fork a then very popular software application, osCommerce.

 

Forking: In software development it means the process when the developers take a (usually open) source code and start its independent further development, creating a completely new fork branch – in other words, a new product.

 

However, in the end, they thought at Varien that the envisioned system had more potential than that, which is why they made a completely separate software application.

The name Mageto was derived from the colour magenta.

In 2005, when the logo design was under development, Rubin and Kutner wanted it to be of magenta colour despite the fact that no one else liked the idea at the company at the time.

As the domain magenta.com had already been registered, they examined some variants of the word and the “more masculine” Magento name popped up.

That’s how the name “Magento” came into existence.

Listen to the story here told by Yoav Kutner himself (from 23:25) – MageTalk Episode 50

The primary reason for the two developers making the decision of introducing an entirely new basis for the development was because they felt that the heritage of osCommerce tied them up too much: they could not build in all the functions they dreamed they would.

At Varien, they thought that osCommerce was not only incapable of providing the appropriate background and stability, but that it simply lacked the necessary flexibility.

So they started to build a system that could be shaped freely by anyone in a way to properly satisfy their own needs.

For this reason they completely rewrote the already started software application according to the new concepts, leaving the entire osCommerce basis behind.

Not so much later, on 31 March 2008 the first stable version was released: the open-source code Magento Community Edition, downloadable free of charge.

 

[bctt tweet=”Did you know? Magento was named after the colour magenta, the colour of its first logo.” username=”aionhill”]

 

In 2009 Bob Schwartz joined the founders and became president and then worked hard to globally make Magento successful.

He tells the story of how Bob met Magento (and many other stories too) in Episode 123 and 125 on MageTalk.

Some interesting highlights in Episode 123:

11:00

“(To me) Magento was supposed to be one of many companies. … Do a three to six month gig, and I’ll do it maybe half time.”

 

"But I fell in love with what we were doing. I fell in love with Roy and Yoav and everything that was in front of us. You could just feel it starting to ripple across the world. It was just fantastic."Bob Schwartz

 

54:40

“What means the most to me is … over half a million people wake up every day and make the majority if not all their living because Magento exists. That’s developers, that’s SI’s, that’s merchants…”

 

Popularity came fast

 

The system was a great success, and soon found supporters. Many e-merchants recognized the possibilities lying within: how much they would be capable of with such a flexibly usable, versatile piece of software. The fact that such a flexible system was created was due to the developers focusing on extensions during the building of the system, right from the beginning:

They created a system that could be freely extended and modified any time according to the needs of the given ecommerce store.

Popularity of Magento was rapidly increasing: in March 2009 it was more popular than its “ancestor”, osCommerce.

And only a few weeks later, the first stable version of Magento Enterprise Edition was released.

This was a logical step: even the biggest brands were actively interested in Magento by that time, however, the necessity of a version that could actually satisfy their needs appeared.

Magento Enterprise Edition practically provided unlimited customizability and at the same time Magento’s own developers personally helped its users.

This was the turning point that fixed Magento’s position as being an ecommerce platform that is actually useful for those looking for higher level ecommerce solutions.

 

Enter eBay and integration

 

The next major milestone in Magento’s life was in 2011. The majority of their shares was acquired by eBay in February of that year, and the giant ecommerce company became the sole shareholder in June.

Most people didn’t see the significance of this, they thought the change of ownership would not have any major effects on the lives of the average Magento website users – however, these people failed to see the fact that eBay was also owner of another company, namely the quite well-known PayPal online payment service.

So the acquisition really meant that the PayPal payment option was perfectly and permanently integrated into the Magento eCommerce system. And this was just one of the countless integrations that Magento offered its users.

Popular services like Zendesk, Mailchimp or Salesforce, and the countless other extensions gave so much freedom to the users of the system, like no other platform had given before, not to mention how superbly the system was capable of working together with the Google Analytics service.

Google Analytics is essential for all ecommerce stores: optimization of the pages, content strategy, segmentation of customers would all be impossible if Analytics didn’t provide the users with heaps of data.

Finally, the company changed its name in 2010: Varien officially became Magento under the guardianship of eBay.

A huge and committed community has formed behind it in the last few years, which is present not only online. Magento organized its first official conference in 2011 that more than 800 people attended. The Magento Imagine conference organized in 2014 in Las Vegas was already attended by 1700 people.

 

Some recent developments:

  • Magento Developer Certification was announced also in 2011: at this point the company officially started training developers who are capable of professionally dealing with the system.
  • 2012 represented a new record: the open-source code system was downloaded more than 4 million times, and it was used by more than 150,000 online shops throughout the world.
  • In 2015 Magento became independent again as a consequence of the restructuring of eBay: its new owner, Permira, a private equity firm, thought it would be better to unleash the developers.
  • On 1 August 2016 Magento acquired RJMetrics, a company dealing with cloud based analytical services, which had already been explicitly targeting e-merchants. This is the first acquisition since the company became independent, so it’s a huge step, as it opens the way for advanced business intelligence for SMBs, offering the integration of more accurate analytical solutions, thus facilitating customer acquisition and the increase of conversions.
  • In January 2017 Hillhouse Capital, one of China’s most prominent funds, made an investment of $250 million to help Magento grow further especially in the Asia Pacific region in terms of sales, marketing and client support creating new offices and focusing more on R&D.
  • In March 2017 the well-known Frost & Sullivan business consulting firm awarded Magento the 2017 Global Ecommerce Platforms Product Line Strategy Leadership Award, recognizing the platform’s excellence in providing businesses with the ability to deliver a custom experience to shoppers and differentiate and define their brand.
  • Major announcements by Magento at Imagine 2017 in Las Vegas: Digital cloud for B2B companies – it “allows merchants to handle complex B2B commerce requirements out-of-the-box, enabling them to simply and cost-effectively adapt business models and meet the needs of digitally-connected customers”; Magento Shipping – it “provides merchants with out-of-the-box access to leading regional and international carriers to automate fulfillment, drive cart conversion, uncover new revenue and expand addressable markets”

 

Magento 2

 

Eight years after Magento’s system was imagined at Varien, in 2015 Magento 2.0 was finally released.

The renewed platform contains new APIs that make the integration of new, modern services even simpler for the developers, and they even paid attention to fine-tuning the payment system according to the requirements of today’s needs, thus making the maximization of conversions possible.

The disadvantage of the new system is that if you want to switch from the core Magento eCommerce system, you practically have to rewrite everything from the basics, migration is almost impossible.

The data are transferable with different tools, however, you have to give up on transferring the unique themes and extensions.

A set of modern technologies were built in the new software, which greatly facilitate development work and make the operation of the online shop faster as well:

  • PHP 7
  • Varnish (entire page cache for quicker use)
  • Redis
  • Modern JS Stack
  • RabbitMQ
  • Solr
  • PHPUnit
  • Composer

 

User experience also improved: when reviewing the order, you can also see the photos of each product, checkout became much quicker and simpler (it has been reduced to only 2 steps), and even entering the bill-to address is not obligatory anymore.

Also, the system supports several payment systems (WorldPay, CyberSource, Authorize.Net), which have not been integrated before.

 

The popularity of Magento 2 is steadily increasing as more and more ecommerce businesses realize that they either need to “upgrade” their Magento 1.x website or have their brand new web store developed in Magneto 2 right away.

The Magento 2 usage statistics provided by BuiltWith show a steep increase among the Top 1 million sites and also tell us that currently (May 2017) there are more than 10,000 live websites globally using Magento 2.

 

magento 2 usage growth may 2017

 

Version history

Magento Commerce version history

2008:

The first stable version, Magento Community Edition is published. Not much later 1.1 comes out as well, in which API can be found, it can handle both bundled and virtual products, and it also has individual product settings.

1.2, in which downloadable products, layered navigation and FTP appear, is released in the same year.

2009:

CE 1.3, which introduces catalogues, is released. However, what’s bigger news is that Magento Enterprise Edition sees the light of day, which has version number 1.6 at its launch.

2010:

The year when CE 1.4 and EE 1.8 versions are published, bringing important changes in customizability of appearance, they introduce widgets, WYSIWYG editor and other novelties.

2011:

With CE 1.6 and EE 1.11 versions, handling several databases simultaneously from a single Magento website interface becomes possible, thus allowing you to simply and comfortably manage several ecommerce stores running parallel.

2012:

In the shaping of the appearance of CE 1.7 and EE 1.12 even more freedom is provided by the introduction of mobile theme, but the automatically generated coupon codes also appear, just like the possibility of pricing the products according to user groups, and REST API as well. The system is in line with the cookie regulation of the European Union, and even CAPTCHA appears.

2013:

The year of CE 1.8 and EE 1.13. The new versions bring more developed price calculation options, while EE gets a new indexing.

2014:

In case of versions CE 1.9 and EE 1.14 you already have the possibility of using infinite themes, just as responsiveness is added to the system with the obvious expansion of the mobile era, also including responsive emails.

2015:

The long awaited Magento 2, the newest, completely modernized version of the ecommerce platform is released. Several functions have been renewed, and the architecture of the system has also changed compared to the previous versions.

Magento 2 was announced already back in 2010, however, its development took much longer than planned: originally it was supposed to be released in 2011, but in the end, its beta version came out only in July 2015. Since then, versions Magento 1.x and Magento 2 have been running alongside each other, however, only the latter system is being actively updated by the developers at the moment.

2016:

In July 2016 Magento 2.1.0 CE and EE was released.

Main features of the new Community Edition:

PayPal developments: solutions facilitating the increase of conversions, saved bank cards implemented in order to simplify repeat purchases

Braintree hosted fields: it collects payment information securely, while the process of checkout is still being under full control

Improved management interface: faster and easier searches in the Admin, enhanced new product, category and CMS content creation

 

Main features of the new Magento Enterprise Edition:

Content update: simple content creation, content preview and content timing (e.g. for products, categories, CMS content, promotion, pricing)

Elasticsearch: a revolutionary search solution replacing Solr, it’s scalable with the increase of search traffic, it flawlessly manages large size catalogues as well, it handles 33 languages by default

PayPal developments, Braintree hosted fields, Improved management interface (see CE version)

2017:

Magento Commerce Cloud enhancements – advanced Shipping, Business Intelligence, Content Management and Social Media Capabilities were developed, to be available to all 260,000 merchants around the globe from the summer of 2017.

tips New Product:  Magento Social helps merchants better engage with their customers on social networking sites such as Facebook and Pinterest. To be available as a free extension, Magento Social will “turn your profile into a commerce channel.

 

 

History of Magento

 

Magento Go

 

Magento Go was a cloud based version of the software application, released in 2011, which is no longer available.

Its purpose was to offer an option for the small enterprises that did not require the installation of the software, as the system was entirely run from the cloud.

At the same time, this was (obviously) the least customizable version, it was exactly Magento’s flexibility that was lost. Finally, in February 2015 the Magento Go platform ceased to operate for good.

 

Magento Enterprise Cloud Edition

 

The latest cloud based solution was announced recently, at the 2016 Magento Imagine conference.

The system uses Amazon AWS’s cloud service, thus allowing greater scalability for the corporate clients without having to establish on-premise systems to be able to use their Magento website.

Having learned from the mistake of Magento Go, there will be no limits whatsoever set to customizability in this version.

 

Magento eCommerce characteristics & features

 

Since we have praised flexibility, scalability and customizability of Magento eCommerce so much, it will do no harm examining a bit more deeply what features you can work with if you decide to choose this system as the engine of your online store.

So let’s see what the Magento platform offers, for which hundreds of thousands of ecommerce stores are built on it throughout the world.

 

Do it with Magento

 

Complex system with complex features

 

Using Magento eCommerce cannot in the least be considered easy. It was not at all made for those who are beginners in ecommerce, and if you have not yet come across an administrative interface more complicated than an online word processor, it’s guaranteed that you won’t be able to handle it smoothly.

At the same time, it will be a great friend of those who are capable of understanding even the more complex admin interfaces: they will be able to manage everything in the same place, from analytics through the simultaneous operation of even several parallel online shops, to the data of the products and the users.

 

Design and templates

 

If you want to customize Magento in its appearance as well, you have practically unlimited possibilities. All you have to know is where exactly you should look for these.

The Magento company itself doesn’t offer templates for purchase or for download, so looking for those would be in vain.

For ready templates you can visit Magento Connect that presents the most creative solutions of several design companies –, solutions you can then tailor to your corporate image provided you have the appropriate expertise.

ThemeForest is another place where you can keep looking, and you can come across countless Magento store themes, each of which your ecommerce store can apply righat away or just with some minimal modifications.

At the same time, it has to be mentioned that in case you want to customize your online shop to a greater extent – and the Magento platform’s biggest advantage is exactly this kind of flexibility –, you may need professional developers even for the development of the design, who will guarantee that nothing goes wrong during the process.

There’s definitely no doubt that you are immediately able to choose from several thousands of themes, which you will be able to shape according to your own taste later.

Of course there are some that are freely downloadable, however, the really good ones are paid solutions, in a price range between 50 and 100 US dollars.

 

Inventory management

 

A Magento store is highly capable of performing stock management tasks, with its help you can continuously follow how much of what you still have in stock, which products are running out of stock, which you can freely advertise and which you need to immediately reorder.

Of course it’s part of management that you can set everything yourself: what is considered little or few, when is the storage complete, and when does your system have to warn you that there’s time to contact your supplier.

Certainly, you can sell virtual, downloadable products as well with Magento – in this case you can set that an unlimited number of items are included in the inventory.

If you are selling e-books, software applications or other digital products in your ecommerce store, that doesn’t represent even a little bit more of a challenge to Magento eCommerce than if you offered T-shirts, socks or electronic devices.

At the same time, you should know about the inventory management function that it has only a basic functionality: no matter how useful it is, it’s unable to substitute an ERP system, in which you can effectively manage even several warehouses and premises simultaneously. Of course integration of external ERP systems is also possible.

 

Product management

 

It can be said without exaggeration that this is an area in which Magento eCommerce beats most of the open-source code or commercial edition systems on the market.

It’s expected from an ecommerce platform to be able to handle any kind of product, however, this remains a pipe dream in most of the cases.

While you can organize a physical shop as you like, you write whatever you would like to on the boards and on the price tags, this is a bit more complicated in the online world.

 

It depends on the product type what kind of specifications have to be defined.

  • Food will have expiration date,
  • a vehicle will have weight,
  • a screwdriver set will have number of pieces.

You can work with an infinite number of attributes, and the appropriate flexibility necessary for this is missing from most of the systems.

 

Naturally, Magento is an exception in this respect.

You can define any kind of attributes in the system, and you can even freely work with them: the users will be able to filter, narrow down searches according to these, until they find the suitable product. (You can read about how exactly you need to handle product attributes in the Magento ecommerce system in this article.)

 

Marketing and SEO

 

Another great strength of the system. Of course, integration of a few external tools like HubSpot or Buffer and Hootsuite ensuring social media automation still can fit in the system, however, it still has outstanding functionality compared to other systems.

Due to the integration, praised so much earlier, Magento practically offers everything you may need.

The platform is capable of defining cross-sell and up-sell offers, of converting the customers  in many different ways.

SEO works automatically, but at the same time Magento falls a little bit behind in this field: it’s not that perfect for search engine optimization, mostly because of the searches that automatically generate a great deal of individual pages.

On the other hand, you can easily counterbalance that with more focused attention and a good content strategy.

 

Recent developments:

  • Holiday Dashboard – This cloud analytic service helps merchants better analyse holiday campaigns as well as compare their performance with competitors.
  • Partnership with Adobe – In September 2016, Magento and Adobe announced a new partnership focusing on delivering e-merchants solutions for providing their customers with a consistent, high standard, personalized user experience and promotional tools to achieve better engagement and loyalty.
  • Partnership with Acquia – Acquia, providing cloud SaaS for building, delivering and optimizing digital experiences, announced a partnership with Magento in November 2016. Thanks to this cooperation, clients can utilize Acquia’s highly advanced content management and personalization solutions while enjoying Magento’s flexible commerce capabilities.
  • Partnership with Nosto – In March 2017, Nosto, a personalized shopping experience solution provider, was selected by Magento as a Premier Technology Partner. This allows merchants to show personalized recommendations not only on their websites but also in email and on different social networking sites.

Payment options

 

In Magento ecommerce stores you are free to decide how customers can pay:

  • you can tie it to registration,
  • you may allow the checkout for guests as well,
  • you can use a single-click payment,
  • but you can also offer more complex solutions,
  • moreover, billing the purchases later is also possible.

 

The system automatically displays the costs – the price of the products added to the cart and the delivery costs as well – at the necessary points, not to shock the customers in the end.

And by the way, the whole payment process has been optimized by default in a way that you can realize the highest possible conversion with its help.

Certainly, you can further fine-tune that if necessary, based on your own needs, after having studied the behaviour of the specific customer segments.

 

Data protection and security

 

The developers tried to build Magento eCommerce in a way that no exploitable back doors or vulnerabilities remain (or in case they find such things, the patch arrives immediately).

On the other hand, security depends also on how you operate your own online shop, what extra protection you equip it with, what sort of server you run it on, and so on.

So the company is trying to give you all the support to be able to operate a secure online Magento store: their Security Center welcomes Magento users any time turning to them with questions and problems.

Online shops of lots of major brands run on the Magento platform currently, and these can’t afford even the slightest chance of their customers’ personal data getting into unauthorized hands.

(Of course it’s also important what kind of extensions you are using, because if you purchase from less known module producers, it may occur that the security gap is created because of the extension.)

Generally, of course, you don’t need to be worried even if you don’t have a budget of several thousands of dollars for cyber protection: the Magento platform is one of the most secure ones among the open source code systems, which you can freely entrust with the data of your business and your customers as well.

 

Support and community

 

Developers of the Magento team operate a customer service only for Magento Enterprise users: they provide an opportunity for the large enterprises to consult them in person as well. At the same time, they don’t leave the smaller ones completely alone either.

On the one hand, you can find an amazing quantity of training material not only on sites dealing with Magento, but also on the website of the company itself.

So with a little patience you can learn practically everything about the installation, management of the system, and also about the solution of eventual problems.

And if this hasn’t been enough, the good news is that there’s an enormous developer community behind Magento.

Many thousands of enthusiastic professionals deal with the development, shaping and customizing of the system around the world, who you can find any time on the appropriate websites, forums, community sites, and there’s a good chance of you getting professionally substantiated answers even to your most complicated questions.

 

ERP systems that can be connected with Magento eCommerce

 

Magento eCommerce is also capable of being synchronized with ERP systems.

Corporate governance systems can be applied superbly in case you want to set the company on a growing path, if you want to ensure the proper allocation of resources – and due to its flexibility, Magento’s programming interface can be connected to several systems like that.

 

The most important ones are:

  • Microsoft Dynamics AX: it’s a really good choice for multinational corporations, it provides a comprehensive financial, human resources and management solution.
  • SAP: a system that can be applied in more than 20 industrial areas, small- and medium-sized enterprises and large corporations can also be found among its users.
  • NetSuite: a cloud based system that provides real-time data for the users, thus making the elaboration of reports effective, and thus supporting and facilitating decision-making.

 

Magento Marketplace

 

magento marketplace

 

 

Magento Marketplace is the biggest global ecommerce website where you can find applications, services, extensions and themes, which help you in customizing, optimizing your Magento ecommerce system, and in increasing conversion rates.

This platform is intended to entirely replace Magento Connect, at present they are running parallel.

You can find both free and paid download options: you can browse through several thousands of products, among which you will almost certainly find the ones you need.

And that is because there’s a huge intellectual base behind Magento: thousands of developers who make the most creative and extremely diversified extensions to the system, which can make the lives of e-merchants easier.

From November 2016, Magento 1.x extensions have also been available in the Magento Marketplace.

 

"Magento Marketplace embodies the passion and creativity of our global ecosystem of industry innovators who work tirelessly to continually enhance our platform in a way that none of our competitors can match."Bhavin Rawal, Head of Magento Marketplace and Technology Partnerships, Nov 2016

 

Magento Certifications

 

As Magento has grown to be one of the most professional and most wanted ecommerce platforms available, obviously, a great demand arose for developers who are perfectly familiar with its development.

Major brands cannot afford to hire professionals who are not perfectly aware of Magento’s official development policy – this is exactly why Magento’s trainings were created.

The certifications issued by the company guarantee that the given developer can deal with the challenges of Magento: that he solves the problems, that he’s capable of tailoring the system completely to the needs of the given business.

 

Let’s see what kind of certifications Magento offers:

Magento Certified Solution Specialist

Those who obtain this certification can declare that they have a comprehensive knowledge of the Magento ecommerce application according to the best practices, and thus may become valuable employees of any online business.

Front End Developer Certification

This certification justifies that the developer is an expert in Magento frontend, that he or she perfectly understands how the appearance and the admin interface of the platform can be customized, how the user experience in the online shop can be optimized.

Certified Developer and Developer Plus

Higher level certifications that justify that their owner is capable of handling inventories, catalogues, checkout processes, widgets, plugins and extensions – he has a higher level overall knowledge of how to shape Magento’s system to the tiniest details.

 

Magento events

 

Magento Imagine

 

The biggest Magento event in the world, which was organized for the first time in 2011.

The event traditionally takes place in Las Vegas that several thousands of participants visit from more than 45 countries in order to learn, listen to or to give lectures, or to build relationships with other professionals.

The conference of 2017 will be sponsored by big names like eBay, Rackspace, Symantec, and numerous other leading technological companies.

 

Meet Magento

 

A series of events continuously ongoing all over the world: this is not a single event, but a series of get-togethers where the developers working with the Magento system can meet, exchange ideas and discuss novelties.

Its great advantage is that it helps connecting the professionals from all around the world.

 

Developers Paradise

 

DevelopersParadise is a conference, organized by Inchoo, dedicated to top Magento developers. During the four days long event experts share their first-hand experince with each other, discuss great topics of Magento 2 and having great fun „in the sun” all day long.

A few numbers about the conference: 200+ attendees, 25+ talks and 3+ parties.

We definitely recommend this event to everybody who would like to learn about the most recent insights and how-to’s of Magento 2.

 

Why Magento reigns in the ecommerce sector

 

Magento Rules

 

In our previous articles we have already mentioned that Magento, compared to other platforms, has been one of the most popular ecommerce systems for years, and that’s not by chance.

Although it may not exactly be ideal for smaller enterprises and beginner e-merchants due to its complexity, still, many tens of thousands of ecommerce stores run on it, and several of the world’s biggest brands operate their own online shops on Magento bases.

All this is the result of long years’ of hard work: the developers have built an amazingly enthusiastic, professional community including a lot of experts, who are continuously maintaining Magento while they ensure with newer and newer developments that the system meets the changing requirements, like for example the challenges of the mobile era.

 

Magento is the most customizable system on the market

It can satisfy practically any need within the limits of ecommerce. The heaps of extensions, integration, the freedom of scaling and shaping ensure that Magento doesn’t have to be worried about its leading role.

And the next few years promise to be quite exciting: since Magento 2 has just started to try its wings, and for the time being we don’t know for sure what new possibilities will open up with the introduction of the new architecture.

It’s quite sure that Magento eCommerce will dominate the 2010s in ecommerce, thanks to the fact that two developers at Varien dared to dream bigger than just making a simple fork branch of a previous system and instead they created the platform, which is today the obvious choice of any bigger company aiming to achieve major successes in ecommerce.

 

While among the Top 1 million websites WooCommerce leads the ecommerce market, in the Top 10k sites range Magento is the No. 1 ecommerce platform (according to BuiltWith’s data, May 2017):

 

ecommerce platform market share

 

 

ecommerce platform market share, top 10k sites

 

Sales Worth $101 Billion With Magento Stores

 

IDC research estimated that merchants using the Magento platform made sales globally worth $101 billion throughout 2016.

 

  • Global transaction volume – Merchants sold over $101 billion in 2016 to nearly 51 million customers.
  • Expansive economy – Merchants, in all kinds of sectors, sell a wide range of products, from IT and business services to clothing and electronics. More than 60% of Magento merchants are in both B2B and B2C.
  • Worldwide jobs – There are over 280,000 Magento-specific jobs, including developers, merchants and partners.
  • Outpacing digital commerce – Magento is expected to grow faster than online commerce in general. In 2016, the ecosystem collectively generated $4.2 billion in revenue and is expected to grow to $14.2 billion by 2020.

 

8 ways to find blog post topics easily for your ecommerce store

However, if you read this article, you won’t be struggling with such problems for long. Below, we will provide specific topic ideas after the trends and the most effective formats, which you can start elaborating even right now, and soon you will have so many topics that you can fill your content calendar for months ahead.

(If you don’t yet know exactly why you really need to blog in your online store, read our article about ecommerce blogging.)

 

This is what we’re going to talk about:

  • Content trends in ecommerce
  • What content formats should you work with?
  • How to get a plentiful amount of topics
    • Monitor opinion leaders
    • Answer the questions
    • How-to, in other words, how the customer should solve the problem?
    • Publish personal stories!
    • Tell your own story!
    • Make your customers produce content
    • Pay attention to topicalities!
    • News-jacking: dive on sensation
  • It’s never enough

Content trends in e-commerce

 

You cannot neglect regular content publication: beyond satisfying the audience, it also helps in community building, which plays an increasing role. You want to build a lovable, helpful and useful brand, and regular publication of content is indispensable for that.

Video content plays an even more important role, especially as it has found its home in social media as well: live coverage, 360-degree videos today are already common, which means you cannot neglect video marketing.

Some people think that machine-generated content may be a solution for the content deficit of the online merchants, at least in the field of product descriptions – on the other hand, we think you should never ever use automatically generated content.

This doesn’t only involve a quality problem, Google also penalizes it, and it won’t be attractive in the eyes of your customers either. You should rather read our earlier writing instead on how you can create texts for your product pages that will help you in search engine optimization and in the persuasion of hesitating customers as well.

Pay attention to mobile devices: many users search and consume content on mobiles today, and usually in a different way then on the desktop: they may choose different formats, they are more impatient and they search differently as well – so you should dig into the analytics and create pieces of content optimized for the mobile users.

You shouldn’t care about those who shout content shock. The last time we had an actually processable quantity of information at our disposal during the history of humanity was at the time of cave paintings: your goal is to emerge from the crowd, due to creating something so high quality, useful and relevant.

What content formats should you work with?

In order to reach the above mentioned audience, you can work with several tools.

Text blog posts still serve as a basis, especially because your page can be brilliantly search engine optimized with them – and because if you write well about a good topic, you can forget Jakob Nielsen’s almost twenty-year old warning about people not reading on the web.

You can write short, thought provoking, concise entries – even one of the fathers of content marketing, Seth Godin doesn’t bother, because he writes better in a couple hundreds of characters than almost everybody else using the complete set of blogging tools.

Other times of course you must make long formats: you have to produce listicles or skyscraper articles about solution of problems, about analysis of trends, and so on.

You will definitely need to make videos – they perform superbly in the searches, you can very well present your product, have your audience commit themselves with their help, and you may even be very successful with them on the social networking sites.

Use infographics as well, if you can: they are spectacular, they are easy to share and they are informative: in case they answer interesting questions or they offer an insight into relevant problems, you may have excellent reach with those – from Facebook to Pinterest, users love them.

You can make podcasts as well: about things you think could be better introduced in spoken word, about topics that are too loose for a blog, or in case you simply like talking better than writing, you should make your own show. Podcasts live their renaissance, you can easily test whether your audience is a fan of this format.

You can try a great deal of things in addition these as well – but these formats are those that you can really launch an ecommerce blog with.

And how should you add value to all of this?

 

How to get a plentiful amount of topics

 

Follow opinion leaders

One of the simplest ways of getting topic ideas is to follow the opinion leaders of your field. Influential opinion leaders, celebrated professionals, analysts, specialized journalists etc.

They usually have their own professional blogs and community channels, which you can easily analyse.

And in case you are selling mattresses, you should follow sleep experts, those who post about healthy lifestyle.

Analyse which topics are popular within the audience: what they share, what generates a discussion, what creates major activity within the professional and consumer groups. You can use these topics.

But you should never ever steal them: just use them. Say your own opinion about them, use them as a living basis for sharing new thoughts, develop their thoughts further – and first of all, refer to them, because this way there’s some chance that they will even share your pieces of content.

 

Answer the questions

You do have a customer service, right? So you definitely have to answer lots of questions.

Customers continuously ask questions from a company: on social channels, in emails, on delivery of the products and at events.

But they also ask each other questions: on forums, in consumer groups created on social networking sites, on Questions & Answers pages.

 

How-to, in other words, how the customer should solve the problem?

You could already read about this in our article on video content: if you analyse thoroughly how your potential customers should solve their problems, you’ve already helped them a lot – and beside building your brand, you can even show them your products as well.

Show them what exactly the problem, because of which they need your product or your service, requires from them in order to be solved. If it’s about complex things, they could be especially grateful to you for not simply handing them over the given tool, but for showing how to use it as well.

For example if you sell a nail gun online, you can be sure that a post, in which you describe in detail how it can be used safely, how the users should avoid shooting in the foot, maybe enriched with some humour and not morbid illustrations, can be extremely popular.

 

Publish personal stories!

  • What kind of events the members of your target market attend?
  • Where do they go that can be relevant for you?
  • To expos, exhibitions, public get-togethers, fun runs?

The point is that you also need to be present. In this case, the reason for this is to be able to report on these events later. People read with pleasure personal stories of events they attended or they would have liked to attend – the opportunity is in your hands to take advantage of this, because in most fields, nobody provides similar content.

It’s not generally applicable, but even live coverage can be a great idea, in case you have an already established audience to whom you are able to spread content rapidly.

 

Tell your own story!

In content marketing you can hear this a lot: nobody cares about your company. This is still true: it doesn’t make a difference for how many years you’ve been in the business or how youthful and innovative the staff is.

What are your personal motivations?

Why do you do what you do?

What kind of challenges did you have to struggle with during the years?

Have you come across problems that your potential customers are having at the moment?

What sort of interesting things have happened to you since you started working in this field?

 

These are stories and topics of a more personal tone that cannot only make your brand more of human interest, but if you are capable of exciting storytelling, they may even be quite fascinating.

It’s always worth sharing stories with happy endings: the ones that have endings suggesting that the world is an unjust place, that the customer is stupid, that some problems are insurmountable, are not at all motivating, and thus people will be more reluctant to read them – at best you may have an effect on indignation, anger and similar feelings.

Then again, you want commitment, loyalty, you want to be loved: so you should stay positive. The problems you bring up should have solutions, the conflicts should be resolved.

 

Make your customers produce content

User generated content (UGC) can often be  most valuable for you.

Customer opinions for example can become great content: search for those who have solved some kind of a problem with the help of your products and present these personal stories.

This way you can get closer to your audience, they can imagine themselves being in the position of the other, without feeling that you want to sell them something. They can get useful information and hints this way.

You can organize different competitions as well: encourage your customers and your followers to send you pieces of content, then select the best ones and publish them. It’s best if you do this by fully exploiting the social networking sites, so that your news spreads more easily.

Pay attention to topicalities!

There’s a great chance that you can create interesting content almost every week in connection with a relevant event or holiday. Here are some ideas:

  • How to prepare for Christmas?
  • New Year’s resolutions…
  • How to beat the summer heat more easily?
  • Snow shovelling in a simpler way

Do you have something relevant to say in connection with a national holiday? This may even be something practical: for example what kind of shoes is it worth wearing when walking around every holiday spot in town with your family? This is an ideal choice for ecommerce stores selling clothing products. How can you use fireworks legally? – pyrotechnic online shops can become really popular with that.

Always keep in mind what thoughts your target audience may have concerning each event, and play them up – but don’t start the thinking only a few days earlier. You can start writing down your ideas even months ahead, or at least you can plan what kind of content campaign you will build on that.

 

News-jacking: dive on sensation

The news that keep the general public excited is relevant for you as well? Then this is a perfect chance for you to join in and take advantage of the currency and popularity of the topic.

Find a field where you can enrich the already published pieces of content: with your own expert opinion, with research, with the addressing of experts, or even with public vote.

 

You have to bear two things in mind:

  • Don’t dive on events of extremely negative tone – this can backfire on you in the end.
  • You should deal with something only if it’s really relevant for you.

 

After you’ve filled up the content calendar for six months ahead, you still cannot lay back – and not only because you still have to write, but because you still need to do layouts and infographics, shoot videos, take or download images, record sound etc.

You have to conceive how you will spread the pieces of content, how you will address your audience, how you will connect the new pieces of content with the other, previous ones – in short, you will need a complex strategy.

And you still cannot lay back because you continuously have to fine-tune your content calendar. You have to react, reshape – parallel to new questions emerging, news coming in, new trends rising.

Keep paying attention to these, and you won’t have problems with what you should blog about – at most with choosing the best of the mountain of ideas.