Quantcast
Channel: Pro nopCommerce: Blog
Viewing all 91 articles
Browse latest View live

nopCommerce Tutorial for Beginner - Ep. 1 - Installing nopCommerce on Shared Hosting

$
0
0

Transcript

Hi everyone, this is Lam from pro nopCommerce. I am extremely happy to announce that are starting a video tutorial series to teach nopCommerce beginners how to setup and run their own nopCommerce stores.

In this 1st episode of the series, and we are going to start from the basics by learning how to setup a nopCommerce store on a shared hosting. I’ll teach you two methods to do so, and the second one is much easier than the first.

To begin with the tutorial, head over to nopcommerce.codeplex.com and you’ll see a button to download the installation files. Click “download” to get the file, we’ll need it later.

Next, you’ll need to setup nopCommerce on your host. I’ve chosen myasp.net as an example as it offers a free 60-day trial. So head over to myasp.net to sign up for your free account. After e-mail verification, you’ll be brought to the sign in page. After signing in, click ‘try now’ to begin your trial on myasp.net. Follow through the simple steps, and you’ll have your account ready within minutes.

When your account is ready, click ‘login cp’ to verify that you have setup your account properly. You’ll see your FTP account information. You need this information to upload nopCommerce files to your hosting.

And to do that, open your regular FTP client. If you do not have an FTP client, I recommend you downloading FileZilla which is free. Now, enter the FTP information shown on your myasp.net control panel into FileZilla, and connect to the FTP server. You’ll see that the FTP server is empty now, with only some placeholder files.

You need to move nopCommerce files and put them into your FTP server. The upload can take some time as there are quite many files. Once everything is uploaded, do a quick check to verify that you’ve all the required files on your FTP server. Then, click your website’s link to load the installation page.

Enter all the required information such as admin username and password. You might want to tick “create sample data” to get nopCommerce to load some sample product data. You’ll also notice that we need to enter a database connection string.

To do that, go back to myasp.net and navigate to “database manager”. You need to create a MS SQL database by clicking the ‘add database’ button under ‘ms sql manager’ page. Enter a database name and a password for your database and create the database. You can then copy the connection string of the new database and paste it into nopCommerce installation page.

When everything is ready, click ‘install’. You’ll then see nopCommerce’s home page after waiting for a few minutes.

What we’ve just learnt is the manual way of installing nopCommerce. But there is actually an easier way.

Most modern web hosting service now supports installing applications through their application store. To try this, go back to myasp.net control panel. You’ll see “1-click installer” on your left, and you can see that nopCommerce is one of the supported applications.

Now, click the ‘install’ button, which will bring you through a few easy steps to setup nopCommerce. On the last step, review all information and click ‘confirm & install’. nopCommerce will then be setup within minutes! Note that installation done through the ‘1-click installer’ on myasp.net does not include sample data, so you’ll see a homepage that is almost blank.

See you in next video!


Black Friday Sales: 3 nopCommerce themes at $200 (instead of $407)

$
0
0

nopCommerce theme sales - Black Friday 2014

Hellow nopCommerce-ers!

We know you like our nopCommerce themes! And we want to offer you a very special deal on this shopping season!

We are now selling our bundled premium themes at $200! That means you get NopLite, NopStyle, NopMarket at a total of $200 only. And all the themes come with free 1 year upgrades and free e-mail supports.

That is a massive $207 discount!

If 1 theme is sold at $149, I don't know why you would want to refuse the offer for you to get 3 high quality premium nopCommerce themes at only $200...

With only $50 more, you can get additional 2 themes! That is just a steal!

Not to mention that all our themes are crafted by hand with the highest quality! And don't take our words for it, read how other customers say about us!

So what are you waiting for? The deal ends on 2 December! So act fast!

Here is how you can enjoy the deal:

  1. Add the three products to your shopping cart: NopLite, NopStyle, NopMarket.
  2. Enter bfcm2014 as the coupon code when purchasing. Note that, when prompted to enter domain name, you can just use your current company domain.
  3. Check out normally. You should see the cart reflecting the discount.

Enjoy the themes & happy holiday!

Improving nopCommerce UX (User Experience) - Credit Card Form

$
0
0

We at Pro nopCommerce are addicted at User Experience, i.e. UX. As good as we think nopCommerce already is, there are still many UX improvements that we thought can be done.

Credit card forms is one of the areas that allows a lot of room for UX enhancement. For those who are familiar with nopCommerce's typical credit card forms, you know it looks very 90-ish. Below is how a typical credit card form in nopCommerce looks like:

Typical nopCommerce Credit Card Forms

There are a few things we don't like about the original implementation:

  1. Credit card type should be inferred, instead of forcing users to choose
  2. Card number should be formatted. Basic verification should also be done on client side
  3. Expiry date should be implemented as input, drop-down list is too cumbersome
  4. Basic CVV / CVC format validationn should be done on client side

Luckily, there are quite a few useful jQuery libraries on client-side credit card validation, such as jQuery.payment.

Let's try to integrate jQuery.payment into the Payments.AuthorizeNet payment plugins that comes originally with nopCommerce.

Setting up jQuery.payment in nopCommerce

The first thing you need to do is to download the package from jQuery.payment project page. Once downloaded, copy jquery.payment.js into the appropriate folder shown below:

Setting up jQuery.payment in nopCommerce

Note you need to mark the file as "Copy if newer".

Integrationg jQuery.payment into nopCommerce credit card form

Now, open PaymentInfo.cshtml from Payments.Authorizenet.

Therea are a few places you need to change. I am pasting the full source code of PaymentInfo.cshtml below.

@{
Layout = "";
}
@model Nop.Plugin.Payments.AuthorizeNet.Models.PaymentInfoModel
@using Nop.Web.Framework;

<table width="100%" cellspacing="2" cellpadding="1" border="0">
<tr>
<td>
@Html.NopLabelFor(model => model.CreditCardType, false):
</td>
<td>
<span class="cc-brand"></span>
@Html.HiddenFor(model => model.CreditCardType)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.CardholderName, false):
</td>
<td>
@Html.TextBoxFor(model => model.CardholderName, new { style = "Width: 165px;", autocomplete = "off" })
@Html.ValidationMessageFor(model => model.CardholderName)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.CardNumber, false):
</td>
<td>
@Html.TextBoxFor(model => model.CardNumber, new { style = "Width: 165px;", autocomplete = "off", maxlength = 22 })
@Html.ValidationMessageFor(model => model.CardNumber)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.ExpireMonth, false):
</td>
<td>
<input type="text" class="cc-exp" placeholder="MM / YY" />
@Html.HiddenFor(model => model.ExpireMonth)
@Html.HiddenFor(model => model.ExpireYear)
</td>
</tr>
<tr>
<td>
@Html.NopLabelFor(model => model.CardCode, false):
</td>
<td>
@Html.TextBoxFor(model => model.CardCode, new { style = "Width: 60px;", autocomplete = "off", maxlength = 4 })
@Html.ValidationMessageFor(model => model.CardCode)
</td>
</tr>
</table>

<script type="text/javascript" src="~/Plugins/Payments.AuthorizeNet/Content/jquery.payment.js"></script>
<script type="text/javascript">
document.ready(function () {
$('#@Html.FieldIdFor(m => m.CardNumber)').payment('formatCardNumber');
$('.cc-exp').payment('formatCardExpiry');
$('#@Html.FieldIdFor(m => m.CardCode)').payment('formatCardCVC');

$('#@Html.FieldIdFor(m => m.CardNumber)').change(function () {
var cardType = $.payment.cardType($('#@Html.FieldIdFor(m => m.CardNumber)').val());

$('.cc-brand').text(cardType);
$('#@Html.FieldIdFor(m => m.CreditCardType)').val(cardType);
});

$('.cc-exp').change(function () {
$('#@Html.FieldIdFor(m => m.ExpireMonth)').val($(this).val().substring(0, 2));
$('#@Html.FieldIdFor(m => m.ExpireYear)').val('20' + $(this).val().substring(5));
});

$('.payment-info-next-step-button').removeAttr('onclick');
$('.payment-info-next-step-button').click(function (e) {
e.preventDefault();
var valid = true;

if (!$.payment.validateCardNumber($('#@Html.FieldIdFor(m => m.CardNumber)').val())) {
alert('Invalid card number');
valid = false;
}

if (!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal'))) {
alert('Invalid card expiry');
valid = false;
}

var cardType = $.payment.cardType($('#@Html.FieldIdFor(m => m.CardNumber)').val());
if (!$.payment.validateCardCVC($('#@Html.FieldIdFor(m => m.CardCode)').val(), cardType)) {
alert('Invalid card CVC');
valid = false;
}

if (valid)
PaymentInfo.save();
});
});
</script>

nopCommerce-jQuery.payment integration explained

Below are screenshots showing how the form looks like after integration with jQuery.payment.

 nopCommerce integration with jQuery.payment

[Credit card form when empty]

nopCommerce integration with jQuery.payment

[Credit card form when filled]

nopCommerce integration with jQuery.payment

[Credit card form with invalid data]

Notice that:

  1. There is no need for users to select the credit card type. It is automatically inferred.
  2. Card number and expiry date are properly formatted better visualization (notice the spaces and slash).
  3. Basic validation is done on the client side.

A better credit card form for nopCommerce

What I have shown here is just a very basic integration of nopCommerce with jQuery.payment. If you are adventurous enough, it is absolutely possible to create a beautoful credit card form like below. All you need to do is to extend the code I've shared here, plus some other CSS codes to beautify the form.

Even better nopCommerce credit card form

Choosing nopCommerce Themes

$
0
0

Having a great nopCommerce template can help attract more customers to your nopCommerce store. Pro nopCommerce provides high quality, hand-crafted nopCommerce themes for stores of various types. Here are a few things to consider when deciding on a template for your online business.

Choosing nopCommerce Themes | nopCommerce Templates

Products and target markets

A well-chosen theme can make your products resonate with your target audience, so it is important that you choose a theme suitable for your business. For example if you have a florist shop you might want to choose a brighter and more lively-looking theme than say a restaurant.

Integration with special features

Perhaps you want a video player on the home page of your store. Some themes will do a better job of highlighting key features than others. If you go to the trouble of creating video or having live sales representatives, you want to be sure that your theme works with those features.

Ease of use and user experience

A theme used for e-commerce should be as easy as possible for your customers to navigate and interact with. A frustrated customer or potential customer might turn to an easier-to-use online store thus hurting the bottom line of your company.

Mobile-friendliness

In today's busy world, many people shop online using a tablet or smartphone. Themes can appear differently on these devices so it is vital to check and make sure that your theme is equally optimized for mobile platforms as they are on desktop.

Second Opinion

With many different themes available, it can be wise to seek the opinion of a business associate or friend when deciding on a theme. And remember, basic theme customizations are always encouraged! You wouldn't want your online store to look exactly like other stores who has also purchased the same theme!

Check These 10 Points Before Launching Your nopCommerce Website

$
0
0

So you have completed your new nopCommerce website and can't wait to launch it. But you are holding off because you are worried you've missed important things.

Fret not, I've compiled a list of 10 most important points you need to take note of before launching. (Of course, none of these points are more important than having a workable website in the first place).

nopCommerce Store Launch Checklist

1. Google Webmasters

Being a new site, it's nothing more important than getting indexed by Google. Make sure you submit your site to Google Webmasters so that it'll be noticed by Google. Need even faster indexing? Try posting it on Google+!

2. Google Analytics

Google Analytics is every webmasters / online marketers essential tool. Integrating it with nopCommerce is super easy too! There is no reason you can forget this one!

3. E-mail account setup

Transactional e-mail forms the important part of any websites, even more so for online stores. You should use nopCommerce's "send test e-mail" feature to make sure your e-mail account is configured correctly.

nopCommerce Send Test E-mail

4. Favicon

This is quite obvious, but I see many websites forgetting to update their favicon. You should generate a favicon out of your JPG / PNG logo, and replace it with the original favicon.ico. favicon.ico is located at your website's root folder.

nopCommerce Favicon

5. Broken links

What is sadder than having broken links on your online store? It can lead to lost of sales in the worst case. To make sure all your links are working properly, use broken link tools to check your website from time to time.

6. Meta tags & on-page SEO

Need better ranking? Make sure your meta tags and other on-page SEO are optimized. Here is some inspiration on e-commerce on-page SEO.

7. Payment method & Shipping method

I have seen many cases where customers have decided to purchase, but are confused with the payment and shipping options. Even worse, customers are so ready to pay but are stuck at the payment page because of incorrectly-configured payment settings. At least run through a few times of your checkout process to check for any misconfiguration. Also, make sure you are have turned off SandBox / Test Mode for your payment method.

nopCommerce payment unsuccessful

8. Site speed

Your customers don't like waiting, so is Google. Make sure your site is loading fast by using tools such as Google Page Speed Insight and WebPageTest

9. Keep alive

Most shared hosting turn off your site when it is idle for more than 20 minutes. It can take some time for your website to "wake up". So make sure you use Keep Alive service to keep your site awake.

10. Remove unused plugins

nopCommerce plugins can be resource hogs. My recommendation is to remove any unused plugins from your server. (Remove here means to delete the plugin folders and files under ~/Plugins folder.)

Conclusion

Do you have your own checklist for launching nopCommerce websites? Share with me in the comments! :)

nopCommerce REST Service API Implementation

$
0
0

nopCommerce REST Service Implementation

Being a popular e-commerce platform, nopCommerce is used in a variety of senarios. One popular nopCommerce use case is to integrate it with third-party ERP / CRM / POS solutions. For example, it is possible to develop an integration such that the POS system pulls product & customer information from nopCommerce, and places order to nopCommerce.

There are several method to implement the integration and nopCommerce already comes with a Web Service plugin (Nop.Plugin.Misc.WebServices). However, with the popularity of REST service, I feel a need to develop an nopCommerce REST API plugin to fill in the gap - and that's how NopRest - nopCommerce REST Service Plugin is born.

Using NopRest is easy as it follows a very intuitive, MVC-like architecture. In fact, it is implemented on top of MVC. For those who are familiar with ASP.Net Web API, you might be wondering why NopRest is not implemented on top of Web API. The reason is simple - I want to reuse as much code from nopCommerce as possible. A more detailed explanation is published here.

To provide a real world example of how NopRest can be used, I am sharing with you a use case whereby my client requires to clear nopCommerce cache from external WPF application.

Implementing NopRest nopCommerce REST API

Imagine you are using WPF to add / update product data, and for the URL record to take place, you need to clear the cache.

If you download NopRest's source code, you find that we do not have any existing method to do this. Since this is an open-source project, there is nobody stopping you from adding the method on your own!

Assuming you have downloaded the source code, all you need to do is to add the following method in ApiController.cs.

[HttpPost]
public ActionResult ClearCache(string apiToken)
{
if (!IsApiTokenValid(apiToken))
return InvalidApiToken(apiToken);

_cacheManager.Clear();

return Successful(null);
}

What this method does is to simply make use of ICacheManager to clear the cache. There is nothing fancy you need to do as the REST API architecture has already been coded in the plugin.

Using NopRest nopCommerce REST Service Plugin

Now that you've implemented the required plugin code, all you need to do is:

  1. Rebuild the plugin in Visual Studio.
  2. Deploy the plugin (and install it) on nopCommerce
  3. Once the plugin is installed, you need to generate an API Token. (Look at the method we have implemented earlier)

Now that everything is in place, you need to actually issue a HTTP POST request to the plugin. In WPF's case, you can make use of WebClient or WebRequest to issue the request from within your code. The URL to which you should issue the request has the format of http(s)://yourstore.com/Api/ClearCache?apiToken={REPLACE_WITH_YOUR_TOKEN}. You will also receive a response in JSON format.

Help Develop the Plugin

What I've describe here is a very simple use case. The plugin can of course do things that are much more meaningful, such as Add to Cart, Register New Client, Add New Product and etc. from external applications.

I invite you to Fork the source code to implement your new methods, and do a Pull Request when you have done. With the Pull Requests, I then can merge your code into the main branch! By doing so you'll be contributing directly to this exciting plugin!

Rendering nopCommerce MessageTemplate Using Razor

$
0
0

When it comes to e-mails, nopCommerce has a very flexible Message Templates system to render e-mails by replacing what are called Tokens with actual values. For example, %Customer.FullName% will be replaced by a customer's full name.

While nopCommerce's Message Templates system is flexible enough to handle most scenarios (version 3.50 even supports attaching a static file), there are at least 2 deficiency with the implementation:

  1. Conditional rendering (if... then... else...) is not allowed
  2. Common layout has to be copied over to each and every Message Templates

To overcome these shortcomings, we can make use of Microsoft's powerful rendering engine - Razor. I believe most MVC developers are vary familiar with Razor syntax.

Below I'll show a proof-of-concept of using Razor engine to render Message Templates.

Razor-powered Message Templates System 

Before I begin, I want to give credit to this article for laying out the foundation for this experiment. While I can't confirm it is the first to introduce the concept, it is what I base my experiment on.

To continue, open up nopCommerce source code using Visual Studio. Continue to launching Package Manager Console and enter Install-Package RazorEngine. Note that you need to do this for both Nop.Services and Nop.Web.

Installing RazorEngine on nopCommerce projects

Next, open and edit WorkflowMessageService.cs. Enter the following code as a new C# Method.

Note: You also need to update IWorkflowMessageService.cs with the same Method Signature.

public virtual int SendTestEmail(Customer customer, int languageId)
{
if (customer == null)
throw new ArgumentNullException("customer");

var store = _storeContext.CurrentStore;
languageId = EnsureLanguageIsActive(languageId, store.Id);

var messageTemplate = GetActiveMessageTemplate("Test", store.Id);
if (messageTemplate == null)
return 0;

//email account
var emailAccount = GetEmailAccountOfMessageTemplate(messageTemplate, languageId);

//tokens
var tokens = new List<Token>();
_messageTokenProvider.AddStoreTokens(tokens, store, emailAccount);
_messageTokenProvider.AddCustomerTokens(tokens, customer);

//event notification
_eventPublisher.MessageTokensAdded(messageTemplate, tokens);

var toEmail = emailAccount.Email;
var toName = emailAccount.DisplayName;
return SendNotification(messageTemplate, emailAccount,
languageId, tokens,
toEmail, toName);
}

In the above code, I did not remove the support for existing Token format. So both %Store.Name% and @Store_Name will work. And note that, since Razor syntax views dot (.) as a special character, we replaced dots (.) with underscores (_).

Also in WorkflowMessageService.cs, update SendNotification() by adding:

//Replace subject and body tokens 
var subjectReplaced = _tokenizer.Replace(subject, tokens, false);
var bodyReplaced = _tokenizer.Replace(body, tokens, true);

// add these (below)
var viewBag = new RazorEngine.Templating.DynamicViewBag();
foreach (var item in tokens)
viewBag.AddValue(item.Key.Replace(".", "_"), item.Value);

bodyReplaced = RazorEngine.Razor.Parse(messageTemplate.Body, null, viewBag, null);
// add these (above)

var email = new QueuedEmail
{
Priority = 5,
From = emailAccount.Email,
FromName = emailAccount.DisplayName, 

Now, open CommonController.cs (the one in Nop.Web project) and enter the following as a new Action Method.

public ActionResult SendTestEmail()
{
var workflowMessageService = EngineContext.Current.Resolve<IWorkflowMessageService>();
workflowMessageService.SendTestEmail(_workContext.CurrentCustomer, _workContext.WorkingLanguage.Id);

return Content("SENT...");
}

This is just a quick way for us to test out the code.

Razor-sharp Message Templates

Now, go to your database, and insert a new Message Template with the system name "Test". Mine looks very simple:

nopCommerce Message Template with Razor syntax

Run the code by navigating to http://localhost:{port}/common/sendtestemail, and the result is promising!

Note that what I am showing here is only the mast basic thing Razor can do. Remember that it can run C# codes if it's written to like so!

Results of Razor-powered nopCommerce Message Template System

Pitfalls of Razor-powered Message Templates

"Is there any disadvantage of this approach?", you asked. And unfortunately, YES!

Because Razor Engine is so powerful, it can actually break things if the end users (and I mean all non-programmer webmasters) doesn't know how to use it properly. For example, @ is a special character, and shall be escaped with @@

Shall we rewrite nopCommerce's Message Templates to use Razor Engine? Let's discuss!

Why Today's E-commerce Stores Have To Be Mobile-friendly?

$
0
0

With technological advancements happening each and every day, it is no wonder the number of sales made from mobile phone users continues to rise each year. There is not much left in the world that we cannot do or see from the palm of our hands, and this includes online shopping.

In fact, Google has recently make it very clear that they are taking serious consideration of a website's mobile-friendliness. As part of the initiative, they've even launched a mobile-friendly test tool.

Mobile-friendly nopCommerce themes

How important is mobile-friendliness to an e-commerce store?

The world has quickly become more accessible for us and has caused consumers to become a bit impatient. Research shows that if a website takes longer than three seconds to load, 57 percent of mobile users will actually abandon the site! Another 30 percent will abandon a transaction if the check-out screen is not optimized for mobile use. Those are easy dollars going right down the drain for businesses, as mobile purchases are usually more impulsive and more expensive than purchases made elsewhere.

In the age of information, people are constantly on their phones everywhere they go; restaurants, shopping malls, restrooms, schools, parks, etc.! Everyone is thirsting for more information and more connectivity. What does this mean for businesses? More sales opportunities! Consumers are seeing ads for all types of products, including ones they may not have heard of otherwise. Social media is also drawing attention to certain products. Word-of-mouth has taken on a whole new platform with sites like Facebook and Twitter, where we are constantly hearing about products our friends have purchased. This puts these products into our heads and often times causes us to do some research. We can spend all day online shopping without even realizing it.

Having a mobile-friendly website increases brand-loyalty and consumer confidence in the retailer. Customers do not want to spend time trying to figure out how to navigate a site that is not optimized for mobile devices. Forget about pinching and zooming; they want to get on your site, choose their product, experience a simple check-out, and move on to another site. It is important to make the experience as simple and quick as possible so that they complete the transaction and return to your site for future needs.

Mobile-friendly nopCommerce Themes

Our team here at Pro nopCommerce has long been a fan of mobile-friendly nopCommerce themes. All our nopCommerce themes (free and paid alike) are responsive themes which adapt their layouts according to screen size. 

In fact, our own site - http://www.pronopcommerce.com - is also designed to be mobile-friendly:

Pro nopCommerce - Mobile Friendly

Final thoughts...

Now the question to you - is your nopCommerce store(s) mobile-friendly? How far have you gone to ensure you website has the best mobile experience? Share with us in the comments! 


NopLite nopCommerce Responsive Theme Updated to 3.50

$
0
0

With the announcement of nopCommerce 3.50, we are glad to announce the availability of our popular NopLite - Responsive nopCommerce Theme.

NopLite Responsive nopCommerce Theme available in version 3.50

And the good news is, we did not just upgrade it to 3.50, there is also a couple of features upgrades in the 3.50 version.

What's New in NopLite?

  • Latest version of Bootstrap - Bootstrap is a fast-changing tool, and we have updated NopLite to use Bootstrap v3.3.1
  • Clean up - We've also taken some time to clean up the theme itself, which improves the already-clean NopLite source code. The results? Dead simple customizations!
  • Layout tweaks - You probably won't notice this one if you did not look closely. But we have also tweaked the layout to make it look nicer across multiple platforms.

More to come...

We'll continue to upgrade other themes as well, stay tuned!

5 E-commerce Best Practices You Should Implement Right Away!

$
0
0

Let's admit it - running an online store is not easy! While there might be tons of article (like this one) telling you how easy it is to open an online store, running it can still be a chore if you want to be successful.

With so many factors out there that can affect how successful your online business is, it is hard to focus on all of them, especially for small business owners where resources are limited. Here's a list of 5 e-commerce best practices to keep in mind. Tackle these, and you will be on the right track!

5 E-commerce Best Practices

Mobility is Key

One funny thing happened when I looked around during a birthday party - literally everyone in the room was doing something on their smartphone. If you're not taking advantage of mobility in your e-commerce strategy, you are playing a game you can't win.

I have covered earlier on another blog post on the importance of mobile-friendly online stores and I have to say it again - mobility is key! People are on these devices constantly. Get mobile or get lost in the shuffle. 

Fortunately, nopCommerce has good support for mobile-friendliness and all our nopCommerce themes are mobile-ready!

Service Please

Customer service, that is. Strange how shopping has transformed so much today away from brick and mortar and into many more online transactions. One thing remains the same, however - customer service is still everything! People still want their service contacts to be easy, pleasant, and available.

To put it short - they want reliability and certainty. They don't want to get lost in your shop; and if they unfortunately did, they need someone to help them!

Online chats are great. Email and phone conversations still work wonderfully too, but whatever the method of communication is; make sure it is a pleasant, simple, and successful one.

For us, we have mainly used Zendesk to provide free e-mail supports and our customers have been happy so far! (See below for proof!)

Pro nopCommerce real customer reviews and testimonials

Free Shipping

It is no doubt that free shipping can be a great way to lure your customer to buy. In fact, the majority of customers have shown in the past that they will actually increase their order if they know it will get them free shipping.

But simply offering free shipping is not enough. You need a strategy! Done correctly, free shipping is a great way to make your customers happy and feel like you are literally giving something away in exchange for their loyalty. But it can increase your over-head per order on the flip side. 

Need an inspiration? Read this article for ideas on how to strike a balance between happy customers and low overhead.

Track Attack

Allow your customers the ability to track their orders. Let them see that the order has shipped and give them its whereabouts. This sort of peace of mind can be invaluable to relieving the stress of your customers and making them want to come back to you again.

As with customer service, reliability and certainly are keys! There are many shipping APIs (such as AfterShip) that you can make use of to provide up-to-date shipping information.

The good thing about shipping APIs is that they provide a single point for you to access shipping info across multiple shipping providers. So if you are offering a few shipping options for your customers, shipping APIs like AfterShip can cut down on your development time.

Make it Easy

Perhaps this is that one golden rule that should really sum up all the others! Make it easy, be it with the browing of products, checkout process, contacting customer service, tracking packages. Just make it easy for your customers!

The harsh truth is that people are choosing e-commerce mainly because it is far easier to buy than it is compared to shopping mall. If it isn't easy, then it defeats the purpose of online shopping in the first place!

Make sure your customers' e-commerce experience is as good as possible with the best in web design and user experience you can offer.

PS:/ All our nopCommerce themes are designed from user experience (UX) point of view, and we continuously push the limits of our offerings. 

Conclusion

Again, this list is far from complete for what you need to do with your online store to make it successful. But you really need to get these 5 correct before you can even advance to the next level! 

5 E-commerce Tips & Tricks To Improve Sales

$
0
0

Many e-commerce website owners work diligently on search engine optimization (SEO) to drive massive amounts of traffic to their site, only to discover that their sales aren't keeping pace with their web traffic. These business owners learn the hard way that selling online is not just a numbers game. Raw web traffic does not necessarily translate into e-commerce sales.

4 e-commerce conversion rate optimization tips

So what more can you do after your SEO effort is starting to pay off, and your website has a steady stream of visitors? Enter Conversion Rate Optimization (CRO)! CRO is those techniques that convert your visitors into paying customers.

Here are essential 5 e-commerce tips & tricks that can help you improve sales:

Use web analytics

This is an important first step. Using web analytic tools can help you get the answers to the following important questions:

  • Who is visiting your site?
  • Where are they coming from?
  • How long do visitors stay on your site?
  • Which pages are they visiting?
  • How far are potential customers going in the buying process before abandoning their carts?

Many e-commerce platforms include these tools with their service. You might have already used the famous Google Analytics to track your visitors. There are also free web analytic tools available like PIWIK open source analytic software, or paid tools like MixPanel

Whichever tool you use, it’s wise to regularly review your site’s analytics to help discover areas where you might need to improve. Once you have a good handle on your analytics, you can use the remaining tips to help increase sales. Here is an excellent article to help you quickly get started on using Google Analytics for conversion rate optimization.

Engage your visitors

Avoid the common temptation to just publish what is essentially an online catalog. Certainly you want to provide specific information on the products you sell. But don’t stop there. Instead, provide some useful content that’s related either to your overall industry, or each individual product you sell.

According to SmartBugMedia.com, 61% of consumers feel better about a company that delivers custom content. They’re also more likely to buy from that company.

For example, if you sell finish carpentry tools to residential do-it-yourselfers, your site could include a library of how-to videos that demonstrate how to fabricate and install new trim woodwork. Or in the case of Zappos, producing sales video for each and every product has proven useful in CRO!

Upgrade your site

If your website is more than a few years old, there are probably new and better design and functionality options that can make your site easier to use. Internet access via mobile devices is increasing every day. So, if your site isn't mobile-ready, you should make that a priority by incorporating responsive web design.

You should also add social media integration to your site. This will allow your visitors to easily share your site on their social media pages. That's is like word-of-mouth on steroids. According to a social impact study, 75% of shoppers who read comments shared by their friends clicked on the product link contained in the post.

Even just updating your photos and tweaking your copy can make a big difference in the quality of your visitor’s experience. The simple rule? Make your site looks credible, and make it easy for users to find information - be it on desktop or mobile.

Make it easier to buy

If you’re finding that visitors are leaving your site after having placed items in their shopping cart, it may be a sign that your shipping charges have given them a case of sticker shock. Statistics published on FactBrowser.com show that 45% of consumers abandon their cart, and 46% of those cart abandoners do it because of high shipping costs.

To mitigate this, you could provide information about your shipping rates earlier in the process. Another option is to have a pop-up offering a discount when visitors try to abandon their cart and leave your site without buying. You should also implement some kind of cart recovery mechanism to convert those abandoned carts into sales. 

PS:/ Checkout our very useful nopCommerce plugin that deals with cart abandonment.

Conclusion

Conversion rate optimization is an interesting field to study, and you should really invest in CRO like how you've invested in SEO. Below are a few resources to get you started:

Creating nopCommerce Database Backup Programmatically Using C#

$
0
0

Being a nopCommerce programmer, have you ever encountered a situation where you need to take over an existing nopCommerce projects from other developers but are not provided with enough information? I have!

Recently, I am working on a project on nopCommerce customization that put me in hot water. The client has only provided FTP access to compiled files - no source code, no database backups, no RDP access, no nothing!

Because the project is an already-customized version of nopCommerce 3.40, I am faced with the following issue:

  1. No source code means I can't check what has been customized
  2. No database backups means that I can't even infer the customization from database
  3. The database is fire-walled. That means even if I can get the Connection String from Settings.txt, I can't connect to it using Microsoft Sql Server Management Studio

Creating nopCommerce Database Backup Programmatically Using C#

Although the project was only involving theme development & theme customization, the challenge is big enough to have stopped my team from normal development for a few hours.

We needed a solution to solve [1], [2] and [3]. And the solution? Programmatic generation of nopCommerce SQL Server database backup using C#!

SQL Server Management Objects (SMO) to the help!

Is it even possible to create MS SQL Server database backup with C#? It turned out that the answer is a big YES. Microsoft is kind enough to provide a suite of C# SDK to program against MS SQL - it is called SQL Server Management Objects (SMO).

Microsoft's explanation of SMO is (quoted):

SQL Server Management Objects (SMO) is a collection of objects that are designed for programming all aspects of managing Microsoft SQL Server. SQL Server Replication Management Objects (RMO) is a collection of objects that encapsulates SQL Server replication management.

So we are very sure that C# creation of MS SQL Server backup is possible! The next problem?

Because I've only access to the compiled files (.DLL and not .CS), there is no way I can add new codes to the project! Or maybe I can?

Thanks to Microsoft's ASP.Net Web Pages technology, I can add codes just by using .CSHTML (no need for .CS)!

So the plan? To create a new ASP.Net Web Pages .CSHTML that allows me to generate a database backup. And the backup is generated in the form of SQL scripts, just like what will get generated using the "Generate Scripts" feature of SQL Server Management Studio.

SQL Server Management Studio "Generate Scripts" tool
Sample screenshot of using the "Generate Scripts" feature of SQL Server Management Studio to generate database backup scripts

Writing the codes...

Before we actually writes the code, there is one thing we need to do - to enable Web Pages in nopCommerce. Web Pages is, by default, disabled in nopCommerce's web.config, so we need to enable it temporarily:

Enabling ASP.Net Web Pages in nopCommerce

There are also 2 very useful resources you need to refer to. The techniques documented in this blog post is based largely on the following articles:

Below is an excerpt from the actual codes I've written. The full source code can be downloaded here:

var filePath = HostingEnvironment.MapPath(string.Format("~/App_Data/Backup_{0}/script.sql", DateTime.Now.ToString("yyMMdd-hhmmss", CultureInfo.InvariantCulture)));
var folderPath = filePath.Replace(@"\script.sql", "");
if (!Directory.Exists(folderPath))
{
Directory.CreateDirectory(folderPath);
}

ServerConnection connection = null;
if (string.IsNullOrWhiteSpace(dbUserId) ||
string.IsNullOrWhiteSpace(dbPassword))
{
connection = new ServerConnection(dbHost);
}
else
{
connection = new ServerConnection(dbHost, dbUserId, dbPassword);
}
Server srv = new Server(connection);
Database dbs = srv.Databases[dbName];
ScriptingOptions options = new ScriptingOptions();
options.ScriptData = true;
options.ScriptDrops = false;
options.FileName = filePath;
options.EnforceScriptingOptions = true;
options.ScriptSchema = true;
options.IncludeHeaders = true;
options.AppendToFile = true;
options.Indexes = true;
options.WithDependencies = true;

foreach (Table tbl in dbs.Tables)
{
tbl.EnumScript(options);
}

string zipPath = filePath.Replace(folderPath, ".zip");
ZipFile.CreateFromDirectory(startPath, zipPath);
File.AppendAllLines(HostingEnvironment.MapPath("~/App_Data/BackupLog.txt"), new List<string>() { filePath });

Notice that I am creating a ZIP file from the generated .SQL. This is very useful, as the generated uncompressed text file can be very large (in my case about 2GB) for large database. And it can ZIP down to use only a few hundreds MB. (Yes, text files are highly compressible!)

You can download the full source code here. (Remember to change the database info!)

Also note that you need to add a few DLLs to your /bin folder.

  • Microsoft.SqlServer.ConnectionInfo.dll
  • Microsoft.SqlServer.Smo.dll
  • Microsoft.SqlServer.SqlEnum.dll
  • Microsoft.SqlServer.Management.Sdk.Sfc.dll
  • Microsoft.SqlServer.SqlClrProvider.dll
  • System.IO.Compression.dll
  • System.IO.Compression.FileSystem.dll

How to use the tool

After you've updated web.config, and added the required .DLLs to /bin folder, upload the full source code to your nopCommerce website. If you uploaded it to the root folder, it is accessible at http://yourstore.com/sqlutils.cshtml, with an interface that looks like below:

Generating nopCommerce SQL Server Database Backup Programmatically Using C#

I've included a few other features in the tool:

  • Get SQL Server Version - useful if you want to find out the exact version of the SQL Server database installed
  • Clear nopCommerce Log - useful if you want to clear nopCommerce log before backup, as nopCommerce log can take quite some space
  • Get Database Size - list out, in descending order, the size in KB of each database table
  • Generate Script from Database - the actual backup generation feature

Enjoy the code! :)

Best E-commerce Design of 2014

$
0
0

Consumers today have a much different expectation than they did 50, 20, even 5 years ago. The faces of small businesses have also greatly changed. That is why it is so important to make sure your business is changing to meet the needs of its consumers. Often times, first impressions either make or break your customers' willingness to continue their shopping with you. 

In fact, all it takes is 0.2 second for your customers to establish their first impression. This makes it so vitally important to have a functioning, aesthetically pleasing and profitable website for your business.  

2014 E-commerce Design Round-up

Some websites have perfected this technique and have reached great success. Here is a list of the year's most beautiful e-commerce websites according to AWWWARDS where you can gain inspiration and learn from the best.

Here are the list of well-designed e-commerce stores:

Reebok

Reebok e-commerce website

My Own Bike

My Own Bike E-commerce Store

Kipling Brazil

Kipling Brazil Online Store

Le Coq Sportif

Le Cog Sportif E-commerce

Tatchies

Tatchies E-commerce

Spyder

Spyder E-commerce

Now that you have the best of the best to study from, its time to look to your own e-commerce store and decide if its time for an upgrade. They are plenty of ways and tools out there to enhance you e-commerce website. You might also want to checkout our beautiful nopCommerce themes to help you in your nopCommerce store facelift.

Things You Need to Know About nopCommerce Templates

$
0
0

In case you do not already know, we sell a couple of free and paid nopCommerce themes on our website. We like creating beautiful and usable nopCommerce themes, and I would like to lay down some guidelines in this blog post on how to choose the perfect nopCommerce template for your next store. (I've earlier written a more generic article on the same topic, make sure you read it before continuing.)

nopCommerce themes | nopCommerce templates

When it comes to e-commerce, the layout of your shop can be crucial to positive user experience (UX), how long a user stays on your site, and even conversion rates. When users visit an e-commerce store they want to easily find what they're looking for while viewing a website that is aesthetically pleasing to their eyes. In fact, a well designed e-commerce template can directly increase your store's sales. 

So how do you choose the perfect theme?

Not all e-commerce templates are created equal

Choosing the right template is not always an easy decision. You would usually want to pick a template or theme that is the best for your customers. Ease of use, color pallets, and how effectively a user can navigate the website are just some of the important factors when considering which template to use.

In terms of colors, it has long been known that it will directly affect sales. Here are two articles detailing the relationship between color and sales:

  1. 10 Colors That Increase Sales, and Why

  2. How do colors affect purchases?

But even with the correct color, most themes still missed another important thing - usability or UX as more commonly known. And usability is not just about beautiful design. I've seen many websites that have beautiful design but are very hard to use.

And the sad thing is, most template designers in the market would sacrify UX for aesthetic. Why? Because aesthetic is usually the more attractive element that causes customers to buy their template. And most customers would just choose templates that please their eyes, forgetting about UX.

In case you want to know more about e-commerce usability, here are 2 articles you can borrow some ideas from:

  1. Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid

  2. 5 Fundamental Guidelines for eCommerce Usability Design

About Responsive Templates

Responsive templates have become the new standard when it comes to website functionality and UX. While "responsive design" techniques are initially introduced to improve usability, it often does not work like intended. Instead of improving the websites, many badly-implemented responsive themes breaks them. Things like broken menu, misplaced elements, messy layouts are a few common issues with responsive templates.

In case you are wondering, a responsive template (at the simplest form) is a website layout that adapts to a user's "viewport". A viewport is the visible part of the canvas inside of a web browser (what the user sees of a website on varying types of electronic screens). Responsive templates can be viewed on a desktop, a laptop, a notebook, a tablet, a mobile phone, and even a television without sacrificing its design or functionality. A website with a responsive template is truly cross-platform and can be used on almost any device.

So, the next time you are choosing an e-commerce templates that uses responsive design, make sure you run through enough tests to make sure it works across most device.

Choose your nopCommerce theme wisely

Again, a well-designed e-commerce store can positively affect user experience, which in turn increase sales. Remember: good design does not only mean aesthetical value. User Experience (UX) is also an important point to consider!

Further readings:

  1. Best Websites Examples of Designs with Responsive Design
  2. The 14 Best Examples of Responsive Design

How to Maximize Your E-commerce Revenues

$
0
0

Often time, setting up your nopCommerce store is just the start. If it doesn't bring in sales and revenue, it's meaningless to set up the store anyway.

E-commerce sales are on the rise and expected to continue growing over the next several years. That’s the conclusion of a recent Forrester study. Total e-commerce sales in 2013 reached $262 billion, a 13% increase over the previous year.  Forrester predicts e-commerce will grow by an additional 10% annually for the next five years.

Of course, some sites are more successful than others.  According to a recent survey of online shoppers, the most popular sites are Amazon, eBay, Newegg, ASOS and Sephora, in that order. What shoppers like about these sites includes affordable pricing, simple navigation, easy checkout, free shipping and useful product reviews, among other qualities.

How can you increase your e-commerce profits and give site visitors the kind of experience they want? 

How to Maximize Your E-commerce Revenues

Here are 4 common sense tips to maximize e-commerce revenues:

Make your site mobile-friendly 

Mobile sales increased from 7% of total e-commerce in 2013 to 16% in 2011 and are projected to increase to 27% by 2018. You can’t take advantage of this trend and maximize your e-commerce revenues without a responsive design website. It’s a mistake to assume that a site which works well on PCs will work on mobile devices.  The truth is that 79% of mobile shoppers will abandon your site if they have a bad or frustrating experience, and a site not designed for mobile devices is likely to be frustrating for users. 

Avoid pricing surprises

If you think your goal is to take shoppers to your shopping cart, think again. In fact, 74% of shoppers abandon shopping carts before making a purchase.  One of the main reasons for shopping cart abandonment is an increased price due to shipping and handling. To avoid cart abandonment, let shoppers know from the outset what their total price will be. 

Offer price incentives

Another way to increase purchase completion and enhance customer retention is to give shoppers financial incentives like discounts, coupons and free shipping for larger orders.  For example, Walmart offers free shipping of groceries for orders of $50 or more. Schwan’s, an online food retailer, gives discounts for subsequent purchases. These strategies build customer loyalty and trust and promote customer retention.

Provide helpful product descriptions and reviews

One of the reasons Amazon tops the list of most popular e-commerce sites is the extensive product descriptions and reviews they provide. Take the time to create product descriptions which give shoppers all of the information they need. One smart tactic is to imagine all of the questions shoppers will have and then answer each of those questions in the description. When it comes to product reviews, avoid the mistake of cherry picking only positive reviews, as this will make shoppers suspicious.  Note how Amazon includes both positive and negative reviews.

Conclusion - Prepare for growth

E-commerce sales will continue to grow through 2017, and most likely into the foreseeable future. Building a smart e-commerce site that gives online shoppers what they’re looking for will help you penetrate this growing market.


Migrating Old (Existing) URLs to nopCommerce URLs

$
0
0

Being a popular e-commerce platform, it is very common for store owners to want to migrate to nopCommerce for its powerful features.

One common problem developers face is to migrate old, existing links (from some other e-commerce platforms) to new links (nopCommerce). Especially for old sites which are already getting tons of traffics and are having very good SEO rankings, it is very important to make sure the old URLs are 301-redirected to new nopCommerce URLs.

If it's static URLs (e.g. those for content pages), you can already use IIS URL Rewrite to do the migration manually. But the problem arises when it comes to product and category urls. Because the URLs are dynamic (and there are tons of those URLs), it is usually impractical to manually add URL Rewrite entries one-by-one.

Take the following URLs for example:

  • http://oldsite.com/product-slug-one-p1234.htm
  • http://oldsite.com/product-slug-two-p4567.htm
  • http://oldsite.com/category-slug-one-c12.htm
  • http://oldsite.com/category-slug-two-c34.htm

If you look at the URLs, they are pretty dynamic. Product URLs follow a pattern of {product-slug}-p{product-id}.htm. Category links also follow a similar pattern.

And to make the problem worse (which happens very often), old product IDs (and category IDs) do not correspond to new product IDs. That means in old system, product ID 1234 is product ID 4321 in new system.

So the question now is - how can we make sure old URLs, such as http://oldsite.com/product-slug-one-p1234.htm, will be 301-redirected to new nopCommerce URLs, such as http://nopcommercesite.com/product-one-new-slug?

Step 1 - IIS Url Rewrite

We still need to use IIS Url Rewrite to do part of the job. We want to catch all URLs that has the pattern of {product-slug}-p{product-id}.htm and redirect them to one of our MVC Actions (that we'll write in next section).

The URL Rewrite entries can be entered in web.config very easily:

<rewrite>
<rules>
<rule name="Old Product Urls" stopProcessing="true">
<match url="(.*)p(\d+).htm$" />
<action type="Redirect" url="old-product-url/{R:2}" redirectType="Permanent" />
</rule>
<rule name="Old Category URLs" stopProcessing="true">
<match url="(.*)c(\d+).htm$" />
<action type="Redirect" url="old-category-url/{R:2}" redirectType="Permanent" />
</rule>
</rules>
</rewrite>

TIPS: You can use Regex Hero to test your regex patterns.

What the above code does is to redirect all URLs that has the pattern of {product-slug}-p{product-id}.htm to old-product-url/{product-id}, the latter being an MVC Action we'll write.

Step 2 - Map old Ids to new Ids

Once you've captured old product URLs, you pass the old product IDs to C# code to do the actual mapping.

The old-id-to-new-id mapping is stored in a simple .txt file (placed inside App_Data), which has entries that look like:

1234    4321
2234 4221
/* ... and so on ... */

It is basically a tab-delimited file, with first row being the old IDs and the second row being the new IDs.

And below is the MVC Action (for product URLs) we've mentioned:


public ActionResult OldProductUrl2(int oldId)
{
    var cachedUrlMappings = _cacheManager.Get("OldProductUrl",
        () =>
        {
            StreamReader reader = new StreamReader(new FileStream(
                HostingEnvironment.MapPath("~/app_data/old-products.txt"), FileMode.Open));
            var urlMappings = new Dictionary<int, int>();

            while (!reader.EndOfStream)
            {
                var line = reader.ReadLine();
                var tokens = line.Split(new char[] { '\t' }, StringSplitOptions.RemoveEmptyEntries);
                int key, val;

                if (tokens.Length == 2)
                {
                    if (int.TryParse(tokens[0].Trim(), out key) &&
                        int.TryParse(tokens[1].Trim(), out val))
                    {
                        urlMappings.Add(key, val);
                    }
                }
            }
            reader.Close();

            return urlMappings;
        });

    int newId;
    if (cachedUrlMappings.ContainsKey(oldId))
        newId = cachedUrlMappings[oldId];

    var product = _productService.GetProductById(newId);
    if (product != null)
        return RedirectToRoutePermanent("Product", new { SeName = product.GetSeName() });

    var logger = EngineContext.Current.Resolve();
    logger.Information(string.Format("Product Old URL Not Found - {0}", oldId));

    return RedirectToRoutePermanent("HomePage");
}

Basically what the code needs to do is, given the old product IDs, find out the new IDs and do the final redirection to actual nopCommerce product page.

Note that we've made use of CacheManager of nopCommerce to cache the entries into IDictionary<int, int>. Remember that IO (Input Output) is very resource intensive, so we want to do as little as IO as possible. So we want to read the text file once, and use the cached results repeteadly for subsequent requests (until cache is cleared).

One last thing we need to do is to make sure MVC Routing works nicely for our new MVC Action (to be added in Presentation\Nop.Web\Infrastructure\RouteProvider.cs):


routes.MapRoute("OldProductUrl",
                "old-product-url/{oldId}",
                new { controller = "Catalog", action = "OldProductUrl" },
                new[] { "Nop.Web.Controllers" });

Conclusion - Adapt to your own URLs

Note that the URL patterns I've shown is just one of the many patterns you'll see in real life e-commerce stores. Most probably you are required to migrate URLs of different format. So what you need to do is to adapt the IIS URL Rewrite regex to capture your URLs, and send the relevant info into your MVC Action to do further processing.

Good luck migrating!

Further Resources

  1. SEO Migration Strategy that will Save Your Rankings
  2. Web Site Migration Guide - Tips For SEOs

How e-Commerce Can Win Customers and Make Profit

$
0
0

nopCommerce is a great way to get started cheaply and easily with your online retail route. But merely getting your nopCommerce stores up and running is not good enough, even with a beautiful nopCommerce theme. You need to win customers and make profit!

nopCommerce Stores Win Customers and Make Profit

Every successful e-commerce business has one thing in common: happy customers. But how each business interacts with their customers is unique. In 3 years, the annual revenue for online retail will hit $370 billion. How a business passively or actively engages with their customers will determine how big a piece of the pie they'll take.

For e-commerce businesses, customer satisfaction is becoming more and more paramount to good reputation, success, and revenue. Here are 3 e-commerce best practices to engage your customers and increase conversions.

Spread the love

A study done by Forrester Research found that word of mouth accounts for 80 percent of all purchasing funnels. Linking to social media websites such as Twitter and Facebook spreads this word of mouth and connects people to your business at the click of a button, increasing sales, traffic, and awareness.

Keep in mind that every visitor to your website is not just a potential customer - they're also a potential promoter.

PS:/ Check out our Pay with a Tweet - nopCommerce Social Sharing Discount Plugin which can help you supercharge your store's social sharing.

Give a Gift

Giving a gift or something free builds customer loyalty and brand reputation- not to mention, it increases profits. Customers that are given something free are more likely to make a purchase.

Discounts no longer have the same impact as they once did, and so excite the customer less. Besides that, a gift is far more personal than a discount. It implies a personal connection between the customer and your business, creating loyalty and a positive experience the customer will always remember.

So, on top of offering discounts, try to find a way to engage with your customers with special gifts that could trigger their buying decision!

Ask For Feedback

Value, appreciate, and utilize what your customers have to say about your website. Insights into your customer's experience coupled with other analytics such as sales, site traffic, and page views give your business good indicators as to what works and what doesn't work. Building off of customer feedback also keeps your business improving alongside customer demands and opinions.

Repeat customers spend 300 percent more than new customers. So getting feedback from your customers not only improves their shopping experience, but increases profit for your business.

There are a few tools out there (such as Yotpo) that helps your store acquire social reviews. If used properly, they can help increase your online store's credibility and trusts!

Don't Ignore the Customer Experience

Studies suggest that 70 percent of purchases and buying experiences are based on how a customer feels they are being treated. The way a business engages with their customers is a reflection of a company's values and brand, so while there may be no universal approach to customer satisfaction, it is always important to keep your customers happy. In fact, when a customer is satisfied, they'll tell 9 other people, but if dissatisfied, they'll tell 22 other people!

 

5 Tips for the nopCommerce Conversion Rate Optimisation

$
0
0

nopCommerce is a great platform for quickly (and cheaply) setting up a new e-commerce store. As you get started, seeing new traffic on your website is always exciting; but there is nothing more disheartening for a business than watching those visitors leave without becoming new customers.

5 Tips for nopCommerce Conversion Rate Optimisation

How can you convert those clicks into cash? Enter Conversion Rate Optimization (CRO). Check out these five great tips for enhancing your site's conversion rate.

Quality Content

As any SEO or copywriter will tell you: Content is king. There is no replacement for quality content when it comes to conversions. Use your site's copy to engage users and move them in the direction you need them to go. Good content is your chance to connect with new visitors and show them why they need your products. Don't skimp on this valuable asset!

Good Results

Whether you highlight case studies, user testimonials, or survey results, make the positive eventualities and outcomes of using your products a visible component on your website. Showing off your accomplishments gives you an inherent essence of credibility, allowing your visitors to better connect with what you have to offer. Infographics, review widgets, and more can build great trust and also contribute to your content.

Create Urgency

Limited-time promotions or offers create a sense of urgency within your visitors, prompting them to invest rather than exit. Big players like Amazon utilise this tactic to add inherent value and excitement to the products offered. Just a little bit of productive pressure can incite more follow-through with purchases.

The Competition

If it seems as though you've tried out all of the basics and still aren't seeing the results you'd like, there's absolutely no problem with checking out the competition. Compare what you've done with what they're doing to see if you may be missing something. The point is not to copy what someone else has implemented, but simply to shed light on an aspect you may not have tried to give you some new ideas.

Trial and Error

No matter your CRO strategy, you should always count the conversion game as one of trial and error. As with most web-based fields, eCommerce is constantly growing and changing, so what worked last month may no longer be pertinent today. Test new forms, different colour schemes, varying CTA placement, everything! Monitoring the difference from old to new can help continually steer you in the right direction for conversions. 

Further Readings

nopCommerce SEO Pitfalls and How To Solve Them - Part 2

$
0
0

We at Pro nopCommerce like writing blog posts and tutorials about nopCommerce themes, nopCommerce plugins and nopCommerce customizations. But sometimes we can get overwhelmed by works that we have very little time to write blog posts ourselves!

In view of this, we are happy to feature Robert Bourne in this blog post, who happens to be our first guest blogger! Kudos to Robert!

Below is what Robert has to say in our second installment of nopCommerce SEO Pitfalls and How To Solve Them.

-- Robert's Writing Starts From Here --

Being a developer on a large commercial website, I have not been able to escape a heavy indoctrination into the world of Search Engine Optimization (SEO).

The site for which I have my experience has ranked in the top of its (very competitive) category ever since search engine rankings have existed.

I mention that not because the site owes its ranking to me, it certainly does not. I simply wanted to point up that I have some real world experience with search engine from a developer perspective. It is the basis of my knowledge and that knowledge is hard fought and worth sharing.

While SEO and IIS Url Rewrite are the topic of this post, my post is not intended to cover either topic in any depth. Rather I wanted to use my experience to outline some steps that should be easy for any developer to understand and implement.

Disclaimer: Individuals should do research before implementing steps outlined in this post. Do your homework!

SEO matters a lot to those of us who are transacting business online and rely on organic search results to encourage traffic to our sites.

Obviously, it should not be ignored. Being that it is proprietary to the search engines with only some rules and weights being made public, SEO is not something you do on your site once and then consider it done. The content on your site should evolve with your business. You must constantly review and revise your content to stay relevant in organic search and to stay abreast of sites in your space. Search engines want to rank you higher if you have relevant content that is updated over time rather than remaining static.

There is content on your site for human consumption, and there are other elements on your site that are for the consumption of the search engines. Think of the latter as how you are viewed by search engines.

Common SEO rules that most developers ignore

There are however, some fairly static things (rules) that you can set up once and they should not need to change. They are very important to how your site is viewed by search engines.

Following is a list of basic SEO rules that your site should accommodate in order to avoid negative results when your site is indexed. They are:

  • canonical - force non-www to www or vice versa. Pick a scheme for your site, do it the same all the time
  • consistent trailing slash - either append the trailing slash in cases where it's missing or do the reverse by removing it. Do it the same all the time.
  • consistent casing of pages/routes/paths - force requests to pages/paths to your site to have consistent casing, force lower case, do this the same all the time.

You can implement the above rules fairly easily using IIS Url Rewrite.

There are a couple of other things you can do that can be accomplished using IIS Url Rewrite. These are good to know but not as fundamental as the three listed above. I am listing them for awareness:

  • http:// to https:// (you can do this in IIS Url Rewrite with a bit of awkwardness but easier to turn on in nop backend)
  • maintenance page - while your site is down for maintenance - (http status code returned matters!)
  • under construction page - just an easy way to put something up before your site goes live

Common misconceptions about SEO and Google

Here is why you want to implement the first 3.

If there are links to your site that are both www and non-www, guess what? Both requests will get to your server, great right?

Not necessarily. Search engines can index you as two different sites. And this can hurt your ranking.

As silly as it sounds, Google may think that www.yoursite.com is different than yoursite.com. And it can (I have lived this nightmare), index you as two sites. This can, among other things, erode your domain authority. Also, you don't always notice this has happened. So if your site is up for 6 months (being indexed as 2 sites) before you realize it, it can take months or longer after you have corrected the problem before you see improvements as a result of your fix. Just do it correctly from the get go!

And the same holds true for links to pages on your site that are mixed case (www.yoursite.com/Home.html and www.yoursite.com/home.html). Again, these can be perceived as different pages, negatively impacting the rankings of your content.

And the same holds true for trailing slash.

Why these SEO rules matter?

The fact of the matter is you can't control who is building links to your site and how they are casing, or using www or not, trailing slash, etc.

You will want to implement a rule that forces a redirect of any requests in the inconsistent format to your consistent format.

And you will want your redirect (response) to the requestor to use an http status code of 301 (permanent redirect). This is a way of telling the search engines how they should store your urls in their index, and the links they display in search results. Search engines will index links to your site’s content using your preferred, consistent format. By redirecting with a 301 you are effectively removing ambiguity and telling Google the correct format to request in the future.

And the search engines like when you respond with a 301 redirect. (FYI if you were to use the temporary (302) redirect you can get flagged as a 'spammy' site. Not a good thing)

You can instruct IIS Url Rewrite what type of redirect to use, but it’s default is permanent (301).

Example rules in IIS URL Rewrite

Here is an example of a rule I implemented on my site to force mixed case urls to lower case. This is very straight forward. This snipet of xml can be placed in your web.config. You must be running on IIS 7 or above where IIS Url Rewrite is available.

Note, though, that since this rule is applied to ALL requests to your site, the rule will have to work overtime to translate resource requests such as image, .css, .js, etc to lower case. Those requests to your site do not factor in search, so you should create exceptions that allow mixed case resource requests to pass thru unmodified.

I had to add some exceptions that are specific to nop. I found that some of the resources requested within the Admin interface will actually cause the Admin dashboard to be overwhelmed and issue an error.

Excluding by folder is easy as you'll see in my example rule.

<system.webServer>
<rewrite>
<rules>
<rule name="Force Lower Case" enabled="true" stopProcessing="true">
<match url="[A-Z]" ignoreCase="false" />
<action type="Redirect" url="{ToLower:{URL}}" />
<conditions>
<add input="{URL}" pattern="^/content" negate="true" />
<add input="{URL}" pattern="^/admin" negate="true" />
<add input="{URL}" pattern="^/Administration" negate="true" />
<add input="{URL}" pattern="^/Scripts" negate="true" />
<add input="{URL}" pattern="^/Themes" negate="true" />
</conditions>
</rule>
</rules>
</rewrite>
</system.webServer>

I hope my post will help you understand what is possible to accomplish with IIS Url Rewrite and how it can help you gain consistency with search engine indexing of your site. I hope you will investigate other possibilities for IIS Url Rewrite and how you can enhance your nopcommerce site with it!

Debugging nopCommerce - Common nopCommerce Exceptions and Their Fixes

$
0
0

Being an nopCommerce MVP (AKA nopmvp) myself, if often see people asking, repeatedly, about the similar questions. These questions are related to nopCommerce / C# exceptions, and can actually be solved relatively easilly if you know what the error messages mean. Unfortunately, many developers are not trained to properly read C# and ASP.Net exceptions and make sense of them.

So, in this blog post, I'll try to lay out a few common exceptions that nopCommerce developers face, and provide insight on each of them.

1) AutoFac issue - None of the constructors found with...

When implementing your own custom services, you'll often find issues similar to the following. It is taken from a forum thread that I've replied.

None of the constructors found with 'Autofac.Core.Activators.Reflection.DefaultConstructorFinder' on type 'Nop.Plugin.Widgets.DodSlider.Controllers.WidgetDodSliderController' can be invoked with the available services and parameters:
Cannot resolve parameter 'Nop.Services.Localization.LocalizationService localizationService' of constructor 'Void .ctor(Nop.Plugin.Widgets.DodSlider.Services.IDodSliderService, Nop.Services.Localization.LocalizationService, Nop.Core.Plugins.IPluginFinder)'.

The issue is quite obvious - AutoFac, the IOC container / dependency injection manager, was not able to locate and instantiate the required class. It can be due to your custom service not properly registered in DependencyRegistrar, or you have supplied the actual Class (instead of the C# Interface) in the constructor.

2) Object Reference Not Set To Instance Of Object

If there is a "hall of fame" for the common issues .Net developers will face, this will easily take the Number 1 spot. Sadly, as common as this issue appear, many .Net developers doesn't seem to know what it means exactly.

I've replied many times on the forum regarding this issue (such as here), and people seem to keep asking the same question - never endingly!

So that does this error message mean? It means you are trying to use a variable that has not been initialized. Codes like the following will trigger the issue:

MyCustomClass myClass = null;
myClass.ThisProperty = true; // this will throw error, myClass has not been initialized

And the fix is easy (and self explanatory): initialize your variable!

Conclusion

There are many other common problems that are being asked repeatedly on nopCommerce forums. When I get a chance, I'll continue on this series. Stay tuned!

Viewing all 91 articles
Browse latest View live