Register Shopping cart (0)
You have no items in your shopping cart.

Blog

Overriding (Intercepting) nopCommerce Controllers and Actions

Many developers have asked on nopCommerce forums for ways to override nopCommerce Controller. Others have asked about how to intercept certain events or actions (such as add to cart) on server side, run some custom codes, and continue with the original process.

The answer is simple - Action Filter. But what is Action Filter? Think of it as a custom method that gets called before or after a desired Action. If you are familiar with WebForms, you can think of an Action Filter as a Http Module

In this article, we'll talk about the power of Action Filter, and how you can use it to add behaviour to your nopCommerce code.

Hierarchical Product Url (with Category Breadcrum in the URL) in nopCommerce

I've received many requests lately asking for a blog post to explain how to (or whether it's possible to) achieve hierarchical URL for products in nopCommerce. What is hierarchical URL anyway?

The default implementation of product URL in nopCommerce is by constructing an SEO slug based on the product title, and use the SEO slug as the URL. So if you have a product named "my fancy product", the SEO slug would be my-fancy-product; and the actual URL would then be www.yourwebsite.com/my-fancy-product.

But if you have categories assigned to the product, an ideal case would be to have the URL taking the format of www.yourwebsite.com/cat/sub-cat/my-fancy-product. Note the URL now contains the category hierarchy of the product. That means by looking at the URL, you would know that it's under Sub Cat category, which in turn is under Cat category.

People are requesting this kind of URL structure because Google likes it. Other than that, it also gives visitors a straightforward way of understanding the hierarchy of the page, which is often essential for an e-commerce store.

Note: If you do not already know how nopCommerce deals with ID-less URLs, make sure you read the article before continuing.

pro nopCommerce Redesigned, Upgraded to 3.30

I am glad to announce that pro nopCommerce has been redesigned and upgraded to version 3.30. The upgrade is the result of 2 weeks of works from all the folks in the team, and the process has been extremely fun and engaging! 

This blog post is meant to be a brief of what we've achieved, and why we think it's useful to our website. This is not a technical discussion, but rather a conceptual one. We hope that you can learn a thing or two, and implement similar tricks on your store to improve user experience and conversion rate on your website.

Below are a few important changes we've done:

  1. Responsive design, new logo
  2. Better checkout system
  3. Site speed optimization
  4. Cart recovery system integration
  5. Social reviews & social comments integration

A more technical discussion of each of the above point is on the way, in the form of individual blog post for each topic. For now, let's get to the high level discussion of how each part was done!

pro nopCommerce Redesigned

4 Essential Tools to Increase Conversion Rate on Your E-commerce Website

After months of SEO campaigns, you now finally have all the traffics you need on your online store. But chances are, you are not seeing the same increase in the conversions, i.e. paying customers. And what's the use with the traffics if the visitors are not converting?

In this article, I am going to share 4 tools that will help you increase and optimize the conversion rate of your e-commerce store.

Conversion Rate Optimization for E-commerce Web Sites

Crazy Egg - Heat Map & Scroll Map

Have you ever wondered what are the hot spots of a single web page on your side? Perhaps you also want to know if they've ever clicked on your call-to-action button? And how many of them are scrolling to and clicking on a particular area?

Introducing Crazy Egg - a tool that allows you to know more about your visitor's behaviour such as scrolling and clicking.

Crazy Egg - Heat Map & Scroll Map

Crazy Egg allows you to create snapshots of your website's pages, and show you hotspots of your that particular page. By looking at the heat map and scroll map, you get an idea of how users are interacting with your websites. On a deeper level, you also get to know if users are paying attention to the important areas, such as call-to-action buttons, sales banners and etc.

Why are these important? Because the way you designed and laid out your web page might not be driving attention of your visitors. Let say you have put up a new sales banner, and you want to know if people are actually seeing it or clicking it.

Crazy Egg provides heat map that tells you the percentage of people clicking your banner. It also provides scroll map to show you how people are scrolling around your web page. If you see a hot spot around the sales banner, you are mostly certain that the sales banner is getting attention; otherwise, you know something must be wrong. And with this kind of quantitative measurements, you can then adjust your web page accordingly.

Crazy Egg Heat Map Interface

Another important feature of Crazy Egg is the Confetti Tool. Think of this feature as a light-weight version of Google Analytics, but with precise information about who (and how) are interacting with your page. For example, you can filter the result by 'referrer', and Confetti Tool shows you a list of referring websites, and how visitors from each type of referral source are clicking within your page. There is a list of categories that you can use segment your visitors, such as search terms, search engine, country, device type and etc.

Crazy Egg Confetti Tool

TIPS: Make good use of Confetti tool. When running multiple campaigns simultaneously (newsletter, CPC, retargetting), make sure you tag the URLS of each different source by using Google's URL Builder. You can then filter the traffic by campaign source, and get immedidate information about the effectiveness of each campaign.

Optimizely - A/B Testing

With Crazy Egg, you probably have found some areas on your page that is worth optimizing. But what is optimization without proper measurement? Blindly optimizing without actually measuring the effectiveness can actually worsen the results.

Enter Optimizely, an easy-to-use tool that helps you create A/B tests without writing codes. 

Optimizely - A/B Testing

If you have not known about A/B testing already, it's a kind of tests that you run on a particular subject with 2 slightly different test sets. One example of an A/B test is to measure which of the 2 call-to-action buttons - "Add to Cart" or "Buy Now" - are getting more clicks. Parts of the visitors are shown one of the variants, and the rest will be shown another variant. By tracking the number of clicks of each call-to-action button, you then use one of the buttons with the confidence that it'll drive more clicks than the other.

Of course, A/B tests are not limited to wordings, it can be variations in placement, layout, color and etc. And you are not limited to two sets of variant, you can add more than two if you need to. 

Optimizely offers a user-friendly, WYSIWYG interface that allows you to create A/B tests in a few easy steps. The screenshot below shows how Optimizely allows you to select a particular element / section on your webpage, and change its text, placement, color, and etc. 

Optimizely User Interface

And by installing the JavaScript provided by Optimizely on the page you want to track, Optimizely automatically randomizes the test sets for you, as well as capturing the results of the test.

One particularly important feature of Optimizely is goal setting. In fact running A/B test without a goal in mind is like not runnig the test at all. The following picture shows how Optimizely allows you to set different type of goals (clicks, page views or custom events) for your test. Clicks and page views normally suffice, but if you want to track other types of events, you can write custom JavaScript codes to do so.

Setting goals in Optimizely

TIPS: To increase the accuracy of the A/B test, only vary one element / section at a time. Make sure you do not have more than one variable to test on. For example, do not test on page title and call-to-action button in a single test.

Rejoiner - Shopping Cart Recovery

If you are frequent online shoppers, you probably knows that visitors often abandon their cart after adding items. And the thing with abandoned carts is that a high percentage of these visitors are actually highly potential to be converted into paying customers. Afterall, adding items to cart means that they are pretty serious about buying the items.

There are quite a few Shopping Cart Recovery providers on the market. I am writing about Rejoiner in this particular post simply because it's easier (zero cost) to start with - you get a 14-day free trial and the trial only starts after you've converted the first customer.

Rejoiner - Shopping Cart Recovery

The concept of Rejoiner is pretty straightforward: you capture the information (most importantly e-mail) of visitors abandonining their cart, and send them e-mails reminding them of their abandoned cart.

Rejoiner allows you to setup multiple e-mails, and configure the number of days after the date of abandonment that the e-mails should be sent. The picture below shows the e-mail editing interface - yes, you can fully customize the HTML e-mails that are sent.

Rejoiner E-mail Campaign Interface

Rejoiner supports most of the popular e-commerce platforms. By downloading the plugins, you can integrate Rejoiner on your online store with ease. It also come with a detailed developer documentation in case your shopping cart software is not supported by their official plugins.

Rejoiner also offers a comprehensive dashboard that shows you various statistics, such as abandon rate, abandoned carts, cart details, e-mail open rate and etc. With these data, you can then measure the effectiveness of your campaign, and adjust accordingly.

Rejoiner Dashboard

TIPS: Try offering a small discount for abandoned carts. This might increase the conversion rate of cart recovery.

Yotpo - Social Reviews

Reviews and testimonials could easily be the most important factor that affects the convertion rate. Naturally, products with a lot of (positive) reviews suggests that it's a good product to buy. Similarly, testimonials of an online shop can greatly increase the confidence of the visitors with that particular merchant.

Yotpo offers a great suite of tools that deal with both product reviews and site testimonials, and it does so socially! 

Yotpo - Social Reviews

The core feature of Yotpo is to send e-mails to customers X days (configurable) after their purchase, asking them to review the products they have purchased. It also allows you to send a follow up e-mail to all reviewers, offering them a discount for their sincere reviews.

On the website integration aspect, Yotpo offers a number of widgets that you can put on your website to display reviews on your e-commerce store. For example, the following picture shows the product reviews widget that you can include in your product page to show the current reviews.

Yotpo Reviews Widget

Other than collecting reviews, Yotpo also offers integrations with Twitter and Facebook, allowing you to post the reviews across these social networks. If configured, the reviews can even be automatically posted on social networks (and you can set rules to limit posting of positive reviews only).

Another very useful feature offered by Yotpo is Zendesk integration. If you have not done so already, you should try using Zendesk as your support ticketing system. With the Zendesk integration, Yotpo automatically sends out e-mails to the customers after tickets are solved, asking them of their experience with the support received. This can be a good and organic way to generate site reviews.

Yotpo with Zendesk Integration

Of course, Yotpo comes with a dashboard that shows you the performance of your campaign. You can easily get an idea of various important metrics to confirm that the review system is working as planned.

Yotpo Dashboard for Analytics

TIPS: Make sure you send mutliple e-mails asking for product reviews from paying customers. You can set the intervals for each e-mail sent, for example sending the first e-mail 4 days after purchase, and the second e-mail a week after. Setting up discount can also increase the chance that your customers writing reviews for you.

Conclusion

Remember, conversion rate optimization (CRO) is as important as traffic building. The key with CRO is testing. Repeatedly testing the effectiveness of each CRO is essential in finding the best setup that'll get people to buy from your website.

Free nopCommerce Hosting - myASP.NET

As nopCommerce gets popular, you start to see more and more ASP.Net hosts putting high priority on nopCommerce hosting. There are already quite a few in the market, but today I am going to introduce a FREE one to you!

Yes! FREE NOPCOMMERCE HOSTING! And I assure you that it runs as smoothly as any paid hosting you see on the market nowadays, with the same (or even more) features!

And the good thing? There is no ads or banner or whatsoever! It works exactly like a paid hosting! Not even credit card is required!

This is especially useful for newbies on nopCommerce who just want to quickly setup a test store to try out nopCommerce. It's also suitable for smaller businesses who do not have big budget on hosting, but still want to have an nopCommerce store up and running with the lowest cost within minutes!

Interested? Keep on reading!

Hosting nopCommerce on Windows Azure Web Sites with Automatic Source Control Deployment

Before I start, just want to let you know that Pro nopCommerce is now hosted on Windows Azure Web Sites. The thing I like about Windows Azure Web Sites is its seemless deployment process. As I am a heavy user of BitBucket, I hosts all of my codes on it, including the codes for Pro nopCommerce. And the good thing about Windows Azure Web Sites is that it can link to various code hosting platform, including BitBucket.

By linking Azure Web Sites with my code repository on BitBucket, I can then setup automatic deployment on Azure. My codes get automatically pulled and compiled whenever I make changes and push it to BitBucket. There's very little FTP-ing (unless you need to upload some HGIGNORE-ed files). The process is effortless. I just change my code, push it to BitBucket, and Azure deploys the code for me.

If you are also using Azure Web Sites for your nopCommerce websites, this tutorial is going to teach you how to link up your code repository to Azure Web Sites to enjoy automatic deployment. No more FTP-ing! :)

Deploying nopCommerce to Windows Azure Websites from Source Control

Launching of nopLite nopCommerce Responsive Theme and Giveaway

We are proud to introduce NopLite, a new nopCommerce responsive theme we've spent many hours to develop!

For those who are familiar with our existing NopWired free nopCommerce theme, this is also a similar general purpose theme that you can just install quickly and start selling any kind of products! Totally pain free!

Curious of how it looks and run? Click this link for a full demo of NopLite responsive theme.

NopLite currently supports nopCommerce 3.20 and nopCommerce 3.10. If you want it in older versions, please do not hesitate to let us know in the comment. We'll consider it if there's enough requests.

To celebrate the launch of this theme, we are giving away 8 copies of the theme to 8 lucky winners! Below is the steps to win yourself a copy of NopLite.

Using Entity Framework (EF) Code-First Migrations in nopCommerce for Fast Customizations

I've seen a lot of nopCommerce forums users asking how they can use Entity Framework (EF) Code-First Migrations to customize nopCommerce, add new fields and entites to the core. I actually use a lot of EF Migrations myself when doing nopCommerce customization projects, and I must say it helps a lot in the development.

Today, I'll share with you how you can do that in nopCommerce project! I'll be using nopCommerce 3.20 as an example, but you can easily apply the concept to other vesions!

Setting Up EF Migrations in nopCommerce Solution

The first thing you want to do is to enable migrations in your nopCommerce solution. So fire up nopCommerce in Visual Studio, look at Nop.Web project, and open Web.config. You need to add a connection string to your development database. Note that adding the connection string in Web.config doesn't affect how nopCommerce works, since nopCommerce doesn't look for connection string in Web.config.

EF Migrations in nopCommerce - Setup Web.config

Sponsored Giveaway: 3 Digital Copies of "Getting Started with nopCommerce" Book [2]
Tags

Not long ago, we've organized a giveaway here on Pro nopCommerce, sponsored by Packt Publishing. The contest has given away 3 copies of "Getting Started with nopCommerce - An in-depth, practical guide to getting your first e-commerce website up and running using nopCommerce" to 3 luckly winners.

Weeks after the contest was over, Packt Publishing is generous enough to sponsors 3 more (digital) copies of the same book to us for ANOTHER giveaway. So here we go again: complete the following steps and you'll stand a chance to win 1 copy of this book (3 winners in total).

Sponsored Giveaway: 3 Digital Copies of "Getting Started with nopCommerce" Book
Tags

We've recently reviewed the book "Getting Started with nopCommerce - An in-depth, practical guide to getting your first e-commerce website up and running using nopCommerce" published by Packt Publishing. You may read the review if you have not already done so.

"Getting Started with nopCommerce" Giveaway

Packt Publishing was generous enough to sponsor us 3 digital copies of the book for us to run a giveaway. And here's the deal: 3 lucky winners will be randomly picked by us and each of them is going to receive 1 digital copy of the book. To take part in the contest, please do the following:

Hello, welcome to pro nopCommerce!

I am Woon Cherk, an nop mvp; and this blog is the place where I share my experiences developing nopCommerce themes and nopCommerce plugins. I also give out free nopCommerce plugins and free nopCommerce themes from time to time, make sure you subscribe to our e-mail newsletter to get updates and freebies! Click here to read more about me.

Enter your email address to receive 15% off discount code.