8 Steps to Creating a Drupal E-Commerce WebsiteGuest_Blogger | Oct 11, 2011
Using Drupal to build your business' e-commerce store has several advantages, including search engine visibility, a tested security framework, and a highly scalable CMS system to work with. Monica S. Flores, Elancer and principal Drupal web developer at 10K Webdesign, walks through the process of getting your e-commerce store up and running so you can acquire customers immediately.
(Click on the thumbnails to open the full image in a new window)
Step One: Specify the Desired Features
Planning, planning, planning: When working with your e-commerce clients, it's easy to say "we do e-commerce and shopping cart," but part of the web development process is going through the nitty-gritty of specifying the overall process.
When you uncover more information about how the proposed e-commerce website will work, you can better ascertain which modules will best "fit" the desired tasks.
Some questions to help guide your process include:
a) Who is allowed to sell on this website?
Will it be one main brand that is selling multiple products? Or will there be representatives from multiple stores that are selling in a "marketplace" fashion?
b) What level of detail will be on a product listing?
Typically, a product listing has, at a minimum: 3-5 product photos, the "category" of the item (e.g. "women's" or down to more detail like "women's dresses"), the title and description, SKU and price. Additional features may include "attributes" like sizing (small, medium, large), color, texture, materials. Or you may need to display keywords or additional categorization levels. Work with your client to understand their needs.
c) Do products come singly and/or in groups?
For example, a retailer selling an "emergency preparedness kit" may want to pre-create a selection of individual products into a "group" of products that are sold as one unit.
d) Do different "classes" of products need to have different information on the data entry form?
For example, your client may have warehouse products where they need to store additional information such as warehouse location and number in stock, but they may also sell "dropship" products where they need to store information on a a supplier contact or internal link.
e) Will there be a member rewards program or community-building aspect of the site?
We hope you'll work with your client to flesh out the member component of the website. Inform your client that, in today's retail environment, it's expected that they'll reach out to their customers and potential customers through programs like loyalty programs, points programs, social media, discussion boards, and other community-building aspects of their website. Drupal helps your client roll out these kinds of features.
f) Are there any kinds of "gotchas" or special needs?
For example, there may be a request to show the location or origin of a particular product on Google Maps. Perhaps your client requests each product to have a "range." Perhaps you'll need to offer a radio button for if an item is currently "on sale" or not. Potentially your client needs customers to store multiple addresses. Maybe they require a "you may also like" section on the product details page, or a "people who bought this item have also bought" section on the cart page. Does your client need to sell physical products alongside digital downloads?
Step Two: Understand the Desire "Look-and-Feel"
Clean, uncluttered, visually striking design: Design of e-commerce websites centers around three main "displays": the homepage, the category landing page, and the product details page. Within each of these major sections, work with the client to understand how they want the "flow" of the site to work.
For example, we've requested PowerPoint or Keynote samples, or even hand-drawn sketches, where the client identifies items they need on each page ("the member login box goes on the right sidebar") and desired functionality ("can we put a newsletter signup here at the top?). By going through the exercise of laying the desired elements out on paper, you can then assign a specific Drupal module or custom functionality to the desired need.
We've found it helpful to request our clients to find 7-10 other websites that match the look-and-feel that they're attempting to achieve, and what specific parts they like about each website. With that list, we have better information when creating design samples in Photoshop that "embody" those desires.
Steer your client towards established brands so they get a sense of how they want their website to "fit." Tiffany, Coach, Gap, and Wal-mart all have distinct markets and a "type" of look-and-feel. Help your client review existing websites and even go through the checkout process so they can get practice in how they want their own website to function.
Step Three: Digital Assets -- Good Model and Product Photography or Video
Many e-commerce startups do not have a conscious understanding of the time involved and the necessity of creating crisp, clean, appropriate photographs for their website.
Imagine walking into a brick-and-mortar establishment and seeing only titles and descriptions on the shelves - no one would buy anything. It's the same with shopping online. Because the end customer can neither touch, smell, nor taste the products while shopping, your client must offer eye-catching, engaging, delicious-looking photographs and video, if possible. Multiple angles of a specific product are recommended. Front-page or accent photos may be found through existing free or paid services, but photos or video of the model holding or using the product will sell better.
If the client needs to bootstrap, they can feasibly take their own product photographs, at least 3000 pixels across and 5000 pixels high in 300 dpi. However, recommend to your client that professional photography makes a big difference: we work with the Greener Photography directory to find local photographers.
Sample free or low-cost sites for stock photography:
- flickr (advanced search, within Creative Commons)
- Big Stock Photo
- Stock Xpert
Step Four: Moving Into The Initial Build
Keep it Simple: We recommend Drupal 6 with Ubercart for new e-commerce websites. Out-of-the-box, the standard Ubercart installation will be able to handle 80-90% of your needs for a full-fledged shopping cart. If you are looking to install Drupal 7, we still recommend Ubercart although some of the features are still getting rolled out, so depending on the nature of your e-commerce site, you may want to stick with Drupal 6.
Here is a list of additional modules I use, depending on the project and desired client needs. Pick and choose to fit your situation.
What We Typically Use: (Recommended)
|addthis||AddThis button added to specific content types|
|backup_migrate||For easy backups to SQL, or full backups of your site.|
|better_formats||To assist you with sorting "input formats" - for example, so that admins can always use "Full HTML" in their page edits.|
|ckeditor||Our favorite WYSIWYG Editor of the moment.|
|flag||For things like user-specific "Save to Wishlist" or "Flag as inappropriate" functionality|
|logintoboggan||This module allows you to sequester new signups and make sure they have a real e-mail. Also allows users to sign in using their e-mail address|
|nodequeue||Helpful if you're assigning content to a specific section, like a "Featured Products" or a "Featured Designer" area|
|simplenews||An easy-to-use newsletter function, with subscribe & unsubscribe options|
|site_map||Create a site-wide, user friendly sitemap|
|xmlsitemap||Create a machine readable XML version sitemap for submission to search engines|
For More Community-building Features
|invite||For allowing visitors to invite others|
|privatemsg||Private messages through the website|
|user_badges||To offer a "badge" on completion of specific tasks|
|user_relationships||To allow "friend" or "follower" type relationships|
|userpoints||Allow users to earn points for actions on the sites|
|userpoints_ubercart||Allow users to earn points for purchases|
There are many more hundreds of community-oriented and membership-building modules. Do a search on your desired function and typically an existing or an emerging module will come up.
Step Five: Setting up the Store
Configuration requires a few things to think about:
1) Overall Store Variables: What is the name of the store, the mailing address and phone number, and the e-mail for questions related to orders? Configure this information in advance in the Store Variables section.
2) What is your categorization going to be? There is a pre-built "Catalog" module that may be turned on within Ubercart that allows you to sort your products into specific "categories."
If you use the Catalog function, you can set new categories using "Taxonomy".
3) Payment procedures: PayPal and/or Google Checkout are usually very easy for your clients to set up: enable these in your Modules list.
4) What are your "attributes"? You may have to pre-configure the different "attributes" related to each product. For example, on an attribute of Size, you may have the options of Small, Medium, Large, and Extra Large. Then, when creating a new product, you may add an attribute to that product (and sometimes a new price associated with that attribute).
5) Stock Inventory: It is possible for Drupal to auto-decrement your stock, so you know at any time how much of the product is still available. You can set up the system to send you a reminder e-mail when stock levels reach a certain level.
6) Shipping information: Do you need to sign up for a USPS Developer Key or a UPS Developer key? Depending on the shipping arrangements and the type of items in the store, you'll want to list out the different Shipping Quote options.
7) Tax: If your company is based in a state and shipping within that state, there's a high probability that sales tax will need to be collected. Work with your client to understand their reporting needs to their Board of Equalization. For California, we've created a list of these rules effective July 2011 (at the bottom of the thread). Review and change to fit your client's requirements, if any.
Step Six: Preparing your Product Details Page
The default product details page may work fine for your client's purposes, especially if they're a startup. However, you can also re-do the node-product.tpl.php file (and store it in your theme folder) if you need more fine-grained control over the display of the page. The "Contemplate" module is also helpful for configuring the look-and-feel of that product details page.
Step Seven: Accepting Payment
We have used PayPal, Google Checkout, and Authorize.net as the most common payment methods in Ubercart.
If your client has a PayPal account to start, this usually works well as credit card information is not stored on the website. If you choose to go with the Authorize.net option, you'll also want to add some additional securitization on the site, including the setup of a dedicated IP address, setting up a Certificate Signing Request (CSR), purchasing a secure sockets layer (SSL) certificate, and installing the "Secure Pages" module.
Step Eight: Testing
The only way to test the store is to make some sample purchases on the site to make sure that everything works as expected. Debugging information appears whenever there is an error, and in the "orders" confirmation page, you'll be able to see all relevant orders. Moving forward, we recommend you install Google Analytics and Google AdWords for more targeted marketing purposes.
About the Author
Monica S. Flores, principal Drupal web developer at 10K Webdesign, has been creating websites since 1999. She works with green businesses, progressive organizations, and minority women entrepreneurs. Find her on Elance here and on Twitter at @monicadear.