07 Sep' 15

Customize the Look and Feel of Your Drupal Commerce Website

Drupal Commerce Website

Your online store is like a needle in a haystack, with thousands of competitors offering similar products and services. In order to stand out from the crowd, you need an e-commerce solution that lets you fully customize the look and feel of your website. Drupal Commerce, an open source e-commerce software with more than 53,000 active users, has grown in strength and size to support both big brands and small-to-medium businesses (SMBs) by individualizing their Drupal-based online stores.

Make no mistake; we’re talking about heavy customizations here. Lucky for you, Drupal Commerce is one of the few e-commerce software that allow users to make extreme modifications. Without further ado, let’s dive in to know the possibilities that Drupal Commerce offers in customizing the appearance of an online store:

#1. Customizing the Product page

The design of a product page determines whether a visit will transform into a conversion or not. A good design clearly showcases a product, and highlights the key areas of interest. If you’re using Kickstart Omega, the default Drupal Commerce website theme, a product page will probably look like this:

drupal ecommerce

As you can see, it’s not a very enticing page to attract a conversion. If you open the CSS stylesheet of the page, you’ll get the option to edit the font size and color of the product price. The default ‘Add to cart’ button can be modified to include more weight, better padding, color change, and even a shopping cart icon. A prompt message to redirect customers to continue shopping can also be added below the ‘Add to cart’ button. Once you clear the cache from ‘Site settings -> Configurations’, you’ll see the following changes:

drupal ecommerce website

#2. Customizing the Checkout page

A plain and unattractive checkout page will not make yours a successful online store. If you want the site to provide an experience worth remembering, you need to up the ante and make the checkout process as clear and smooth as possible. You need to customize the default layout and make it your own.

drupal ecommerce checkout

Open the CSS stylesheet of the page, and alter the style of the ‘Order total’ block. As an extra measure, you can overwrite the default template for the checkout page and include regions based on your requirements. Alter the theme’s page–checkout.tpl.php file to simplify the header area and facilitate conversions. Clear all cache to see the following changes:

drupal ecommerce checkout page

#3. Enabling Product Ratings

The best way to influence a visitor to purchase a product from your online store is by displaying ratings given by previous customers. In order to achieve the rating feature, install the Fivestar module from http://drupal.org/project/ fivestar, as well as the Voting API module from http://drupal.org/project/ votingapi.

Navigate to ‘Site Settings’ and locate your ‘Product Display’ content type. Select ‘Fivestar Rating’ as a type of data to store, and choose ‘Stars’ as a form element. You also need to select ‘Product rating’ from the Voting Tag dropdown, and set the ‘Number of stars’ field to 5. Once you’re done, the result will look like the following image:

ecommerce product rating

#4. Adding a Contact Form

As an online business, you must make it possible for your customers to contact you easily. A contact form will make it convenient for customers to contact you in case of queries, thus increasing the trust with your brand. In order to include a custom contact form, locate and install the Contact module.

The process of configuring the form details is quite simple. Once you are done, enable the Contact module and you’ll be good to go. A complete contact form will look similar to the image below:

checkout page design

#5. Enhancing UX at Checkout

A great e-commerce website is defined by the satisfaction that customers get using it. One way to make them happy is by letting them see their actions (such as, adding or removing a product to/from the cart) take place without loading the entire web page. You can achieve this functionality with the AJAX module that you can find here: http://drupal.org/project/dc_cart_Ajax.

Navigate to ‘Site settings -> View’, and click on the edit button of the ‘Shopping Cart form’. Expand the ‘Advanced’ settings in the ‘Page’ display. Find the ‘Use AJAX’ option and toggle the value to “Yes”. The final step is to set the ‘For’ field’s dropdown to ‘All displays’. The changes will result in the following image:

drupal shopping cart

The reason why Drupal Commerce is regarded as one of the leading e-commerce software is because it offers users enhanced options to customize a Drupal commerce website, making it super easy to for online merchants to create their stores with their distinct personal touch.

Sougat Hajra

Global Delivery Manager

Sougat is the Global Delivery Manager with Code{UR}Idea. He is an expert with e-Commerce- development, deployment and design.

Leave Comment

Your email address will not be published. Required fields are marked *