E-Commerce Website Case Studies

E-Commerce Website Case Studies

If you’ve read any of our other e-commerce articles or started making an e-commerce site, you already know about the slew of choices that exist. The decision between using Drupal Commerce and Ubercart is the most glaring, but even after you make this choice, further options present themselves. How do you want to present your products? What goes on the homepage? How many filters should you implement? What additional features should you include?

It is helpful to start by looking at what other e-commerce sites with successful designs have done. Hopefully, this demonstration will give you ideas of what your unique needs are and how you may implement similar (or dissimilar) websites to meet them. To meet this goal, this article will cover Ubercart and Drupal Commerce sites that differ in their additional functionality; and also differ in their reasons for using Drupal.

Gemini Lights

Gemini Lights, the cycling light manufacturer, is home to a sleek Drupal e-commerce site that uses Ubercart. Their catalog functionality is limited because they don’t have too many products. If your business is one that makes a few, high-quality items, this site might be a good model to follow. The Gemini Lights homepage doesn’t feature their products outright. Instead, it has a Field Slideshow that shows them being used and a description of why they are useful and important.

In addition to providing links to various catalogs, the product menu also displays links directly to the product display pages of the four most important items. If you do go to the catalog, each product type is displayed as a view in a grid format. Overly complex catalogs with excessive information may be detrimental – Gemini Lights provides the customer with exactly what they need and nothing more. Simplicity is not a bad thing. That said, a more complex layout might be needed if you have a large number of products that people need to sort through.

The Ubercart functionality for this site includes additional battery selection on product display pages, estimated shipping costs, and discount coupons at checkout. The battery selection is accomplished through giving the products multiple attributes. One of the attributes adds $30 dollars onto the order for a bigger battery.

The estimated shipping costs feature uses the Ubercart shipping quotes module that can be found in the Ubercart optional core section of the module administration page. You may choose from various shipping quote methods, including flat-rate, UPS, and USPS shipping.

Ubercart Discount Coupons is a module that provides users with the ability to configure coupons. These enable fixed-price or percentage-based discounts. It also includes a sub-module that allows coupons to be created upon product purchases.

Cladco

Cladco sells roofing materials and accessories on their Ubercart website. Immediately visible on the homepage is a limited grid view of six roofing materials. Above that, they have a Views Nivo Slider featuring pictures of their products. Their catalog links are also already on the homepage in a sidebar, though you can easily get to many of the same places through the main navigation.

Like Gemini Lights, this company has a limited variety of key items. One of the main differences between them, other than the sidebar, is the use of a table view as opposed to a grid view. If you also have a small number of products, using a table layout is a great option. You can easily feature each one fully, showing a description as well as the picture and price. That said, this kind of view is not recommended if a customer has to scroll through rows of pages.

A unique part of the Cladco site is its ‘Purchase Wizard’. When you add certain items to your cart, it lets you configure them further. This wizard is essentially an extensive form with additional customizability when purchasing a product. Certain e-commerce sites have no need for this feature, but it may be a good option for yours.

OnFlooring

This company uses Ubercart to offer innumerable do-it-yourself flooring options for people to save money on flooring their homes. The choices are incredibly diverse, so a large number of products exist to manage.

They use Views in two ways on their homepage. The first is a Views Slideshow of their products and company promotion. They also have a jCarousel view showing their most popular products. With jCarousel integration into Views, this scrollable interface is a very nice, easy way to show products on the homepage.

Since they have a lot of products, their site features a full grid-view catalog. Since such a large number of products exist, there is no ability to see all products at once. You must choose the type of floor in the main navigation bar to view a catalog. Only then can you filter using the left sidebar by shade, luster, brand, and more. The grid view’s sort is also exposed to customers so that they can sort by featured items, price, and title.

OnFlooring also uses the Ubercart shipping quotes and Discount Coupons modules in their checkout process. The unique aspect of this website is their feature that adds what they call ‘Subordinate Products’ into the cart when you put an item into the cart. To help them add relevant items, they use the Entity reference module to establish a product hierarchy. They used a custom module to handle adding products. Generally speaking, it finds the related products by using the hierarchy and hooks into the cart. If you consider including a similar functionality, make sure the related products are highly related.

Lifeguard Press

Lifeguard Press has a Drupal Commerce site that sells gifts and accessories from a very broad spectrum. As such, their grid view catalog with exposed sorting filters is extensive. In fact, their homepage leads right into it, with a specific part of their catalog featured on the home page that links to a view. No main menu exists to navigate to a view, but rather a vast number of links in the sidebar function as filters. The gifts section might be something you want to include on your own site depending on your type of products.

If you have as many categories in a menu as they have, you might take a leaf out of their book. The developers of this site used the Drupal API to create their own menus and styled them rather than using the menu blocks in Drupal itself. This strategy offers much more flexibility if you have a similar variability of stock as they do.

Since they chose Drupal Commerce, they used the Commerce Coupon module for coupon codes to allow for discounts. The developers suggest creating Rules in conjunction with their module to make discounts for certain products, roles, or users. For example, you could allow only authenticated users to be able to use coupons. You may also want customers to have been users for a certain amount of time. Perhaps you could give your employees discounts on your e-commerce site.

Bikes, Gear & More

This Drupal Commerce Kickstart site is comprised of four main product types and a large number of products. As such, it has a similar grid view layout for its catalog and a left sidebar for filtering products. The site relies heavily on Views. It features front page teaser displays, recommendations on product display pages, and views to show items on clearance or sale.

Multiple sizes of products are also included on their display pages. Drupal Commerce is at work here. Since products are separated from their product pages, you can feature multiple products on the same page. Making each product size or color a product of its own is helpful to manage inventory.

It is also important to note that this e-commerce site features 11 currencies. With little developer effort, Commerce Multicurrency watches for changes in currency exchange rates to accurately convert raw prices to formats that any customer can relate to.

Eurocentres

Eurocentres is not a standard Drupal Commerce site. It allows users to find schools around the world where language classes will be held and register for them. However, once you select a course, the e-commerce behavior is evident. The site allows you to choose between a number of weeks, lessons, and lodging options. While selecting these options, the Views-managed shopping cart block updates to show the items in the cart.

In addition to the price shown in the currency of the school in question, it also lists the total in the customer’s local currency. Though you could configure this capability using Commerce Multicurrency, another module is also worth mentioning: Currency for Drupal Commerce. Using this module will replace price displays with the currency of the customer’s current location.

Eurocentres also uses Rules to change fees based on the time of year and enrollment. If you have season-sensitive merchandise, you might want to create rules for your product prices as well.

Commonalities, Differences, and Takeaways

Between Drupal Commerce and Ubercart installations, some notable differences exist. Having multiple currencies and switching between them is more common and easier on Commerce sites. That said, the discount coupons and shipping quotes are already included in the Ubercart package. Commerce Coupon is easy to include, but the quick shipping quote isn’t something you see on as many Commerce sites.

While Drupal Commerce has been identified as lacking in payment options compared to Ubercart, none of the sites listed here used any payment methods that weren’t available for both Ubercart and Commerce. The fundamental differences between the two modules lie in the development and administrative organization of products rather than how they are presented to and bought by customers. As illustrated, both types of sites have the capability for quite advanced features.

Whichever direction you choose, you may draw from the ideas in these e-commerce sites to help guide your development.