Optimizing an E-Commerce Website

Optimizing an E-Commerce Website

An e-commerce website represents a business’s storefront. As such, the value of making it presentable and aesthetically pleasing cannot be overstated. It should have features people are used to seeing and expect to find, in addition to allowing them to browse easily through the catalog. Getting customers from the homepage to the final payment screen is the ultimate purpose of creating and maintaining a digital store.

To accomplish this goal, it’s a good idea to go through some common expectations of e-commerce sites as well as additional best practices to put your e-commerce site over the top. You want your site to stand out enough that people remember to share it and come back to it.

Fundamentals of Product Finding

People use four primary methods to locate products on your site. The first is your catalog. Making a great catalog has been covered extensively in our Using Views in E-Commerce article. Also somewhat covered in that article is the second way that customers find products – recommendations.

Whether the recommendations are on your home page, product display pages, or the cart, these suggestions provide users with other great places to look. Striving to present truly related products is important. Of course, homepage suggestions may rely more on overall popularity or featured products.

A third way to navigate to products is through dropdown menus. Sometimes, these menus can be a part of your catalog. They can be utilized for more than directing customers to the ‘Shoes’ page, however. Using dropdown menus to allow people to see groupings of products that are unique, creative, or innovative can boost sales. Think of thematic or seasonal similarities between objects that can bind them together. Some people might find interesting objects this way that they might not find conventionally.

Search functionality is the final, and arguably most important, way that people find products. Sometimes customers are looking for one kind of product on a number of different sites. Be sure to include the permissions for anonymous users to find that product quickly by searching rather than navigating to the product page through browsing the catalog.

Drupal’s included Search module is easily configurable through the ‘Administration’ > ‘Configuration’ > ‘Search Settings’ menu. At the top of the page is the indexing status. Whenever you add products, check that the site is indexed. If need be, re-index the site. Further down on the page, you also have the ability to alter rankings by giving weight to keyword relevance, number of comments, or whether the node was recently created.

Catalogs can be time consuming to develop, but these other additions can make a significant difference to the customer without requiring a large amount of setup time.

Minimizing Noise

You should be mindful of two aspects of minimizing noise while creating your e-commerce site. The first applies to the entire site. If there is anything that could distract the customers in the sidebars or in the main content region, you might want to consider hiding or removing it.

Advertisements in particular can be detrimental, but links to your own service pages can be dangerous as well. Try putting them under the filter sidebar, beneath the catalog entirely, or as secondary links in the main navigation bar. Maintaining attention on your products and catalogs is essential.

The second aspect applies to the checkout windows. In order to reduce checkout abandonment, include as few blocks as you can. That said, a block present to clearly indicate the next step is good to have. Allowing customers to smoothly go to the next and previous steps is important. They should also know what the requirements are on each page. However, all menus, links, or irrelevant blocks to the customer’s current purchase are discouraged.

Also related to the checkout process is user accounts. If an account is required to checkout, 25% of people are less likely to purchase something. Thus, requiring accounts is usually not recommended. Some administrators make a checkout step dedicated to allowing users to create an account or continue as a guest. This strategy, however, is also not ideal. Minimizing noise includes minimizing checkout steps.

A better solution is a two-pronged approach. First, offer customers a small, but legitimate percentage-based discount on one or two items in their first order. Publicize this offer on other pages before they begin the checkout process. Then, you can include a login box (in addition to the site-wide one) either in the cart or during the customer profile checkout step as an optional form.

Product Pages – Videos and Images

Once a user navigates to a product page, you want to provide them with any information they want. Usually such information includes a visual component. Including a product video is always a good idea, though more useful for some products than others. Be sure to install theVideo module so that you can easily upload clips or demonstrations of your products. These videos can be placed as a field on the product display page and may follow the initial description of the product.

Videos can be superior to images in a number of ways. They can show a product in action and view many angles that your pictures might not capture. However, many times people won’t stop long enough to watch a video unless they are interested. It is important to have, but don’t expect it to replace good images.

You should always try to post multiple images of a product. Take pictures of the product in use and from multiple perspectives. To display these images, you may want to experiment with aField Slideshow to upload as many pictures as you want.

In order to use this module, you’ll also need the JQuery Cycle plugin to put in your ‘sites/all/libraries/jquery.cycle’ folder. Once you enable the module, go to the ‘Manage Fields’ tab in your product display page content type settings. Add an ‘Image’ field type. Towards the bottom of its options, in the ‘Image Field Settings’ panel, you should change the ‘Number of values’ to ‘Unlimited’.

Now go to the ‘Manage Display’ tab of the product display page content type. In the ‘Image’ field you just created, change the ‘Format’ to ‘Slideshow’. Then click on its configuration button all the way to the right. Feel free to change any of these options, but there are two you must change. First, change the ‘Timeout’ to 0, disabling automatic transitions. Then, make the pager image style a thumbnail. You can even make the pager a Carousel if you install the jCarousel plugin by placing it in the ‘sites/all/libraries/jquery.jcarousel’ folder.

You may also want to theme your slideshow, which is easily accomplished by editing the page template file (page.tpl.php) or accessing the relevant classes (e.g. ‘field-slideshow’, ‘field-slideshow-wrapper’) in your theme’s CSS files. Providing a nice way to view multiple images of a product goes a long way.

Product Pages – Reviews and Ratings

We touched on providing rating systems and reviews in our Getting Started: Drupal E-Commerce article. Enabling users to look at reviews before buying products has been proven to increase sales. Not only does it benefit your e-commerce site in this respect, but it also improves your site SEO. Reviews make your content more unique. They also make it more trusted, both to potential link providers and to Google. Allowing users to upload videos or images with their review is even more compelling for SEO and sales.

The Fivestar and Rate modules both allow for various rating systems; the functionality is similar. Using Fivestar, you can follow these steps to integrate ratings into your review system. First, go to the Fivestar configuration page and make a relevant tag (e.g. product ratings). Then, make a ‘Fivestar Rating’ field for the product display content type, choosing ‘rated while viewing’ as the ‘Widget’. Use the tag you just created and choose your display options. Remember the number of stars that you choose.

Now go to the ‘Manage Display’ tab of the product display page. Click on the configuration button for the rating field (the gear to the far right). Uncheck the box next to ‘Expose this Fivestar field…’ and ensure that the ‘Average vote’ will be displayed. Update and save your content type.

Finally, click on the ‘Comment Fields’ tab. Add a new ‘Fivestar Rating’ field here with the same settings as the initial field you made. However, where it gives a dropdown menu for ‘Voting target’, choose ‘Parent Node’. After saving, customers will be able to rate the product in their reviews. The ratings will be averaged automatically and displayed in the first Fivestar field you made on the product display page.

This ‘Comment Fields’ tab is also where you should add the capability for users to add images and videos to their reviews. Add Image and Video field types, making them optional for the user to include.

Reaching Out to Customers

Simplenews is cited as a great way for e-commerce sites to keep users updated with new products, special offers, and company news. Allowing administrators to organize different mailing lists, Simplenews allows anonymous and authenticated users to receive updates.

You can do more than email though. It has become increasingly common for businesses and e-commerce to participate in social media integration. You can get more reviews, publicity, and gain a new outlet to promote products by following suit. Integration doesn’t only implicate creating social media sites, but also incorporating it into your own sites. In light of this development, there are a few Drupal modules worth mentioning that you might want to consider using.

Twitter allows users to associate their Twitter account with their Drupal account. Logging into an e-commerce site through social media is often more desirable than creating yet another account. It is even easier for people to do if they see something they like that their friends posted. This module also allows site administrators to easily post to the site’s Twitter account every time they put up a new product.

Facebook Connect and Facebook OAuth are two modules that provide similar functionality for Facebook integration. Users can log in using Facebook and have all of their information recorded in the Drupal site’s record of them. Facebook Connect allows users to see which of their friends have an account, invite friends to make one, or post messages about their account creation.

Even if you do not include such full integration, you may install a module like Facebook Comments Box, which provides administrators with a block to allow Facebook users to post comments in addition to using Drupal core's comments.

The use of social media will form a loyal customer base in addition to improving SEO and product sales.

Following these suggestions will help you to make a full-featured e-commerce site.