COAL Headwear

Drupal has a very easy to manage theme layer and template engine. We built the custom Coal website theme based on the designs that we worked out with the Coal branding and graphic designer. We used HTML5 and a lot jQuery with a custom module to hook into the theme functions and other modules where needed.

Instead of using Commerce Kickstart, we opted to build our website from a vanilla install of Commerce with a number of contributed commerce modules for adding functionality such as inventory, coupons, reporting, receipts, payment processing and many other facets of eCommerce. Here are a list of contributed Commerce modules that helped us get the most out of our web store:

Product Attributes
This module extends Commerce Attributes with a new display mode to line items and a great way to display attributes on the shopping cart page.

Commerce Coupon
Essential for quick promotions on your eCommerce site. You can take this a few steps further by coupling this with Commerce coupon fixed amount, Commerce coupon percentage, Commerce coupon by product Reference and even generate them in batches for things like variable data coupon codes printed on physical collateral.

Shipping
Shipping is always one of the most complex aspects of eCommerce. Every business model is difference so a one-size-fits-all is almost impossible to construct. Usually a good shipping API module like USPS or Fed-Ex will be a good fit.

Flat Rate
For COAL, we use a set of flat rate shipping values which are validated through the Rules module.

Reports
Great for a quick overview of what what products sold best, who the spent the most, what was the revenue yesterday, etc. It's a great starting point for a quick bird's eye view of your eCommerce stats.

Authorize.net

Commerce Address Book
We use this mainly for the UX. Repeat customers get the benefit of using their previous address data or adding temporary shipping locations to their order. You can take this a step further by integrating back into your User Page template or custom customer dashboard. Commerce Kickstart (profile) did this pretty well, take a look there to see how to integrate it with your next project.

Commerce Backoffice Order
This module has been essential to our order fulfillment process. We extended the filtering criteria on the included view to search by SKU and a few other facets. We opted not to use the entire suite of Commerce Backoffice and instead decided to just use Backoffice order. We did this because we found the UX for admins was a bit confusing and we could create our own admin experience for Product listings vs SKUs in a more efficient manner just using views or just providing a custom Admin dashboard through our own custom module set.

Commerce Email
We use this mainly for the Admin UX. It creates a page with 3 of the most common email templates all in one place with WYSIWYG editors (where applicable by your own site configuration) and uses Token module to place important customer and order data with ease. At this time there is a bit of PHP that you must use to get the correct customer account link (refer to issue queue on that project).

Invoice Receipt
An absolutely beautiful way to create, send, and print invoices for customers. You will have to dig up your old HTML table coding skills on this one to theme correctly, but the results are great. This module works in conjunction with the Emogrifier PHP Library to inject relative CSS as inline styles within your template.

Commerce Extra Price Formatters
You can take advantage of this module by using setting up Commerce Pricing Rules. When the calculated price is different than the retail or RAW product price, this module handles the display. With a bit of theming we got this to look pretty clean.

Commerce Fancy Attributes
This module was essential for how we not only construct our Product SKUs, but also how we render our Product Displays. The purpose of this module is to render Term data (fields used on terms) used as SKU Attributes as selectable product options instead of the standard radio button or drop-down list on product landing pages. We took this a step further by using EPSA Crop to determine a small image swatch for the Term image field. With this new rendering of attributes, we were able to display all of the thumbnail cropped swatches on the Product Teasers (taxonomy pages). We took this a step further by creating an AJAX call to change the product thumbnail image based on the data from these attributes via a custom module.

Epsa Crop
As mentioned, this is a great little module that integrates jQuery EPSA image cropping into Drupal.

Commerce Feeds
Importing thousands of SKUs is a daunting task especially when Drupal Commerce relies on Product Displays and Product SKUs. We also had to factor in each Color Swatch Taxonomy that we used in conjunction with Commerce Fancy Attributes. We now have a 1 -> 2-> 3 step process cleanly described on our Feed Import admin page. It is also important to mention that the Feeds Tamper module was absolutely key to this process especially to create feed subroutines based on delimited SKUs within Product Displays.

Commerce Stock
In our opinion this is what separates Ubercart from Commerce. Drupal Commerce takes full advantage of the 1-to-1 SKU relationship to commerce line items. We no longer have the ambiguity and anomalies of stock that we did in the days of D6 and Ubercart. This module provides stock management for Drupal Commerce stores. With it comes a plethora of Rules to prohibit checkout with items that are currently out of stock. #winning

Physical Product
Mainly used for determining shipping rates, this module appends fields to the Product SKU allowing the input of product dims.

Commerce Google Analytics
A simple and effective way to send Drupal Commerce Order data to Google Analytics. For other conversion tracking such as AdRoll re-targeting we used Rules and or the Checkout completion message configuration pane.

Along with Commerce, we used many of the major contributed modules such as:

Context

Dynamic Background
This module was a great solution for customizable Context driven full screen background images. We had to adjust a few things to get it to work well across various devices using Browscap.

Browscap
Great way to check for browser capabilities and react to them. It also integrated well with ThemeKey and allowed us to set up if/then rules for mobile theme switching.

Features
Pretty much the Drupal standard for modularizing Drupal Content Types and other awesome reusable content, views and site configuration.

Feeds
Create standalone way to import content, but even better when extended with other contrib modules like Commerce Feeds and Instagram Feeds. That being said, our Instagram sidebar images is nothing more than an Ajax call to a custom jQuery function to communicate with the Instagram API.

Field Collections
This is one of our favorite modules of all time although I think it has room to improve especially from the theming end. We pride ourselves on building easy to use Administrative UX. Field Collections allows us create subsets of fields that can be added together as a group on custom Content Types.

HTML5 Tools
There is no perfect solution for getting your Drupal 7 website HTML5 perfectly coded, but this module sure gets you in the right direction. It allowed us to add new HTML5 tags to things like Views, Fields, etc.

Media: YouTube, Vimeo
COAL is a media rich site with News, Look Books, Ambassador clips and media module was a great way to manage that content and data. Not all content on the site was managed through Media module. In fact, all product videos were simply comma separated values referencing URL strings to videos that were manually uploaded via FTP or Amazon S3.

Meta Tags
Essential for SEO, Facebook, etc. Don't forget to render $content on the node.

Nodequeue
COAL is very deliberate about their product presentation. We used this module and the taxonomy nodequeue sub module to automatically create groupings of products and arrange them in a particular order that followed our catalog pages.

Rules
Invaluable to creating condition/reaction rule sets.

Taxonomy Menu
Our product groups are organized by good old taxonomy. Taxonomy Menu allows us to dynamically update our menus and Menu Block makes them render with ease into any region in your template file.

Menu Block
This is how we break down menus by season or product collection.

Theme Key
In combination with Browscap, ThemekKey allows us to switch to our mobile specific theme based on device user agent.

Variable
A great way to share and extend data between modules.

Views
Thank you.

Views Bulk Operations
Managing thousands of SKUs can be a pain. Thankfully VBO is here to help.

Webform
It might be a bit overkill for what we used it for on this project, but let's just say it is one of our favorites. We love how you can set rules, define drop-downs via _hooks and catalog all communication.

With all the advantages to responsive web design, we decided to create a mobile specific theme and activate it using theme key and some custom functionality for theme switching. This allowed us to keep the page loads small, rendering the pages extremely fast and displaying content that was truly only relevant to customer on the go. Although we might not choose this method for all projects, we feel it was the best choice for this project.