ubercart guide: how to make your drupal e-commerce website look great

29
Drupal + Übercart + TopNotchThemes = Win! ...1 Drupal? Übercart? Sounds expensive! Before you get started How to read this guide One more thing… Step 0: Tweaks for every e-commerce site .........4 Fine-tuning Übercart’s default settings Step 1: ATTRACT with better catalog and product views .....................................................6 Graphic design 101 Give them enough info… but not too much Changing graphics with ImageCache Flexible catalog browsing with Taxonomies and Views Increasing sales through creative point-of-sale marketing Step 2: INTERACT with your customers ............17 “Tell ’em what you just told ’em”: Emphasizing useful information Give customers ways to contact you Reach beyond the website Step 3: TRANSACT and get paid .......................23 Step 4: REACT to increase customer engagement .....................................................24 Help your customers help you How can I get more help from TopNotchThemes? ...........................................28 Gallery of TNT themes ......................................28 Copyright 2009, TopNotchThemes How to make an ONLINE STORE look great with your new theme from TopNotchThemes Quickstart Guide

Upload: topnotchthemes

Post on 12-Nov-2014

49.684 views

Category:

Documents


3 download

DESCRIPTION

Ubercart is an open source, feature-rich online store module for the Drupal CMS. Once you've got the basics up and running, there's a lot more to a successful online store than a catalog of products. This guide will show you how to improve Ubercart's default configuration and add features, make your store look great, drive more business, and keep you busy with happy customers!

TRANSCRIPT

Page 1: Ubercart Guide: How to make your Drupal e-commerce website look great

Drupal + Übercart + TopNotchThemes =Win! ...1Drupal? Übercart? Sounds expensive!Before you get startedHow to read this guideOne more thing…

Step 0: Tweaks for every e-commerce site.........4Fine-tuning Übercart’s default settings

Step 1: ATTRACT with better catalog andproduct views.....................................................6

Graphic design 101Give them enough info… but not too muchChanging graphics with ImageCacheFlexible catalog browsing with Taxonomies and ViewsIncreasing sales through creative point-of-sale marketing

Step 2: INTERACT with your customers............17“Tell ’em what you just told ’em”: Emphasizing useful

informationGive customers ways to contact youReach beyond the website

Step 3: TRANSACT and get paid .......................23

Step 4: REACT to increase customerengagement .....................................................24

Help your customers help you

How can I get more help fromTopNotchThemes? ...........................................28

Gallery of TNT themes......................................28

Copyright 2009, TopNotchThemes

How to make an

ONLINE STORElook great with your new theme from

TopNotchThemes Quickstart Guide

Page 2: Ubercart Guide: How to make your Drupal e-commerce website look great

Drupal + Übercart + TopNotchThemes = Win!Congratulations on your decision to use a TNT theme for your online store! We’vedesigned many of our themes to work well with Übercart, the open-source onlineshopping cart software that we think has the most features and easiest set-up of anyin the market. And it’s free!

This guide will show you tricks to make your Übercart site look great.We’ll show you how to takea stock Drupal + Übercart installation and make it shine by changing basic settings, selecting usefulmodules, and combining pieces in unexpected ways.

We’ll look at your online store through the same eyes as your customers — because ultimately, they’rethe ones who’ll decide whether you stay in business! To serve them, you have to do four things:

Step 1: ATTRACT customers with a site that’s easy to understand at a glanceStep 2: INTERACT with them so the product-selection process becomes a friction-free conversationStep 3: TRANSACT the purchaseStep 4: REACT to the customer’s actions in ways that reinforce your relationship and encourage

future purchases

We’ll demonstrate with a variety of TNT themes. Most of the features you see here are common to all ofour themes, while some Übercart-specific features require a TNT theme built specifically for it, such asthose listed at topnotchthemes.com/drupal-ubercart-themes. If you have questions about a theme’sappropriateness for a particular use, send us a note — our job is to provide the best theme for yourapplication.

Drupal? Übercart? Sounds expensive!

If you haven’t heard of Drupal (drupal.org) or Übercart (ubercart.org) before, you’rein for a pleasant surprise: Both are free, open-source software created andmaintained by volunteers. Together they power hundreds of e-commerce sites —including our own, at topnotchthemes.com.

Übercart lets you sell products of all kinds, including file downloads such as e-books and software; siteaccess for members-only websites; and, of course, physical products. Properly configured, it calculatesshipping, prints invoices, adds tax when needed, tracks stock levels, and lets you discount products inflexible and complex ways. And because it’s integrated with Drupal, your customers can automaticallybecome site members, opening up a world of possibilities for online interaction — and improvingcustomer engagement and retention.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 1TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 1

Page 3: Ubercart Guide: How to make your Drupal e-commerce website look great

Like Drupal, Übercart comes ready to handle international business as well, with a variety of settings forinternational shipping, number formats, and currencies.

Before you get started

This guide assumes that you have basic computer skills and administrative access to your server, alongwith some ability with Drupal and Übercart already. If you don’t have these skills, here’s how to getthem.

Technical requirement Where to get it

Drupal 6 installed and running • drupal.org/getting-started

Übercart 2 installed and running • ubercart.org/docs/user/8075/installing_ubercart

Ability to install other modules • drupal.org/node/120641

Comfort administering Drupal • drupal.org/handbooks

• drupal.org/support

• Our Quickstart Guide, “Build a great Drupal website with your

new theme from TopNotchThemes”

Comfort administering Übercart • ubercart.org/docs

Products in your Übercart store • For an excellent step-by-step guide to setting up Ubercart, we

recommend the “Online Store” chapter of the book, “Using

Drupal”. This chapter is included free with any theme purchase

from TopNotchThemes, or get the book from the publisher’s

website at oreilly.com/catalog/9780596515805.

Can’t get the answers you need there? TopNotchThemes provides up to an hour of one-on-one help toits customers: See the end of this guide for details.

Besides technical assets, you’ll also need some business systems in place:

Business requirement Where to get it

A business entity set up • Various government bodies (municipal, county, state, federal)

to conduct business online

A tax ID to charge sales tax in • Your state and federal government

the state where your business

resides (if applicable).

Banking services • A local bank that handles business accounts

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 2

Page 4: Ubercart Guide: How to make your Drupal e-commerce website look great

Payment services • If you want to accept anything other than cash and checks, you’ll

need either a third-party processing provider such as PayPal

(paypal.com) or a true merchant-card service provider, such as

Authorize.net. For more information, see the section later in this

guide, “Step 3: TRANSACT and get paid”.

A reliable, reputable web host • For a list of web hosts that support Drupal, see

drupal.org/hosting.

Finally, we recommend you install some modules in addition to Übercart itself (which is atdrupal.org/project/Übercart). They are:

Recommended module Where to get it

Token (required) • drupal.org/project/token

ImageAPI • drupal.org/project/imageapi

ImageCache • drupal.org/project/imagecache

CCK • drupal.org/project/cck

Views • drupal.org/project/views

Administration Menu • drupal.org/project/admin_menu

Pathauto • drupal.org/project/pathauto

Lightbox • drupal.org/project/lightbox2

All of these additional modules are also included with the Acquia Drupal distribution, available atacquia.com/downloads.We’ll tell you about other modules as they’re needed.

How to read this guide

Whenever we direct you to a website page, we cut out the “http://” and (if it’s your own site) thedomain name. So if your website’s home address is http://www.example.com, we’ll say“/admin/build/modules” to mean “http://www.example.com/admin/build/modules”.

Any parts of a website address that changes from situation to situation are given in square brackets, forexample “/admin/build/themes/settings/[theme_name]”. To reference a page on someone else’s website,we also give the domain, for example “drupal.org/project/pathauto”.

Website addresses are given as unformatted text, while locations on the server (i.e., those reachedthrough an FTP or SSH program rather than a web browser) are given in italics, for example/sites/all/modules.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 3

Page 5: Ubercart Guide: How to make your Drupal e-commerce website look great

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 4

Most TNT themes were created with astandard three-column layout in mind:That is, a main content area in the middle,and sidebars either flanking it or both onthe right. To see all three columns, place ablock in both the “sidebar first” and“sidebar last” regions at/admin/build/block. But if you plan to uselarge graphics in the main content area ofyour site, consider using only one of thosesidebar regions: The content area willexpand to take the missing sidebar’s place, giving your graphics more breathing room.

For details on how to install your TNT theme, see our Quickstart Guide, “Build a great Drupal websitewith your new theme from TopNotchThemes”.

One more thing…

Before you start working on your site, we recommend you change the administrative theme to Drupal’sdefault, “Garland”.While this isn’t strictly necessary, we’ve found that doing so allows us to workquicker and with less distraction, since administrative functions will always look the same no matterwhat theme we choose. You can make the change at /admin/settings/admin. (But we won’t follow thatadvice in this guide’s screenshots:We want to show off our themes!)

Step 0: Tweaks for every e-commerce siteDon’t get us wrong:We love Übercart just as it is! But before we start walking in our customers’ shoes,there are a few simple things to take care of to improve Übercart’s behavior across the board.

Fine-tuning Übercart’s default settings

• Show “Dashboard with expanded submenu links” at /admin/store/settings/store/edit/display, so you’ll always have quick access to administrative links at /admin/store.

• Check “Display an optional quantity field in the Add to Cart form” at/admin/store/settings/products/edit/general — that is, assuming someone might want to buymore than one of whatever you sell. Changing this setting lets customers buy multiples of anitem with one click, saving them the hassle of remembering to change the quantity when theyreach the Shopping Cart page.

Übercart’s main administration page. Theme shown: Floristo

Page 6: Ubercart Guide: How to make your Drupal e-commerce website look great

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 5

• Check “Display products in grid” at/admin/store/settings/catalog/edit/grid. Übercart’s usesa table format to display products on its catalog pagesby default:While that’s not bad, the grid fits moreproducts in the same space, with (we feel) a moreeffective presentation. In addition, the “Quantity” fieldonly shows up on catalog pages when products aredisplayed in a grid.

• Make the “Shopping cart” block visible bymoving it to a block region at /admin/build/block.Shoppers appreciate knowing exactly what they’regoing to buy at all times, no matter what page they’reon. Plus, the Shopping cart block includes handy “Viewcart” and “Checkout” links, driving them to completethe transaction. For even better interaction, considerinstalling the “Übercart Ajax Cart” module(drupal.org/project/uc_ajax_cart), which (among otherthings) displays shopping cart changes immediately,instead of requiring the page to reload.

• Ensure that image support is enabled. Not every e-commerce site requires product images.But if yours does, check the “Images” section under “Status messages” at /admin/store.Whenyou first install Übercart, there’s a good chance that there will be error messages there;fortunately, it usually lets you correct any errors with a well-labeled click or two. Doing socreates a field for images on product pages and sets up ImageCache “presets” so that eachproduct image is automatically processed into a variety of sizes and styles appropriate forcatalog pages, lists, and so forth. (We’ll talk more about ImageCache settings in the section,“Changing graphics with ImageCache”.)

• Consider bypassing the Shopping Cart step after customersclick “Add to cart”, in favor of sending them straight to theCheckout screen. This is best if you’re selling a single item andwant to drive customers directly to the payment step withoutseeing an unnecessary screen. To do so, change the “Add to cartredirect” field at /admin/store/settings/cart/edit from “cart” to“cart/checkout”. To avoid confusion, you can also change the “Addto cart” text at /admin/store/settings/products/edit to somethingmore appropriate (such as “Sign up” or “Subscribe”) to avoidconfusion.

The Shopping Cart block.Theme shown: Sharp Sales

Übercart’s default catalog display, vs. theeffect of checking “Display products in grid”.

Theme shown: Floristo

Page 7: Ubercart Guide: How to make your Drupal e-commerce website look great

• Indicate a store help page in settings at /admin/store/settings/store/edit/contact. This URLshould lead either to an existing page or one you plan to create. People browsing an onlinestore have very different help needs from those at a non-commercial site: They want to knowabout return policies, shipping costs, and so forth.We recommend that you put all thatinformation on one page, and change this setting to point to it. (We also recommend that youput some of this information in high-visibility, static blocks throughout the site, and show youhow to do that in the section, “Step 2: INTERACT with your customers”.)

Step 1: ATTRACT with better catalog and product viewsOur job at TopNotchThemes is to give you a solid foundation for your site’s design. You could say we’relike home builders:We create a clean, new structure that’s ready for you to move into without anychanges.

But because we don’t know your tastes, we leave the finishing touches to you. You’re free to change thedisplay of catalogs, individual products, and the site’s interface.

This section shows you several options and how to apply them on your site.We’ll show you somegraphic-design concepts to get your ideas across clearly, with the least distraction; how to put productsin their best light; and above all, how to make customers more involved and drive them toward themoment of purchase.

Graphic design 101

TNT themes take care of most aspects of a site’s graphic design. Buthere are some ways you can ensure you’re getting the most out of yourtheme.

• Focus on essential information. Consider the world’s fivemost popular websites: Yahoo, Google, YouTube, Windows Live,and Facebook.With the exception of Yahoo, all of these featurean extremely simple front page with only a few controls, andthe main purpose of the site at the top and surrounded byblank space to further emphasize what the customer isexpected to do next.

One fault of inexperienced web designers is that they addunnecessary functions and fail to remove distractions that areinstalled by default. In Drupal, this “urge to splurge” oftenshows up in the overuse of blocks. For example: Unless you’rerunning a social networking site with chat functionality, do customers

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 6

Effective vs. not so much:Give the customer fewer words,a clearer target, and a morecompelling reason to click.

Page 8: Ubercart Guide: How to make your Drupal e-commerce website look great

really need to know who else is logged in? For that matter, Drupal’s default Navigation and UserLogin blocks are unnecessary for most e-commerce sites.

Beyond blocks, consider the content of individual pages. Ruthlessly cut words and graphics thatdon’t serve your purpose. That’s no easy task, as was illustrated by the writer Edgar Allen Poewhen he turned in a novel on deadline: “Here it is, at 400 pages. I could have made it 300pages if you’d given me more time.”

• Make the buying process obvious. Assuming that your purpose is tosell products, make sure that customers are never more than a click awayfrom buying — and make that button big, unambiguous, and attractive.

Übercart does some of the work for you by providing a Shopping Cart blockthat you can (and should) make visible on every page, while TNT themes domore by emphasizing the “Add to cart” button on product pages. Many keybuttons in TNT themes also feature rollover effects that encouragecustomers by giving them a feedback “reward”; you can add your own bytweaking a theme’s CSS according to instructions atubercart.org/forum/support/3812/more_attention_buttons and ubercart.org/contrib/3964. (InTNT themes you’ll edit the local.css file, while in other themes the style.css file is a good place totry first.)

• Make product images clear and consistent. Print catalogs typically hire one illustrator orphotography studio to create all the product images in a section; at the very least, they have anart director to ensure that the tone and style are consistent. Even if you don’t have that luxury— if you get your graphics from multiplesources, for example — a few minutes inPhotoshop can turn a visual jumble into acollection where all the pieces look like theybelong. You can do this by processing allimages to have the same proportions, or bethe same apparent size, or have the sameeffects (such as a drop shadow or glow).

In Übercart, judicious use of ImageCachegoes a long way to making images consistent.If you followed our recommendation to set upimage support in the section “Basic tweaksfor every e-commerce site”, then ImageCachewill create five versions of every image you

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 7

Here we have a basic ideaof what’s being sold. Butthe glass isn't very easy to

pick out at a glance,especially if you have many

products!

By cutting outeverything else andmaking some cleardesign decisions,

the product “pops”from the page.

Rollover effect inTNT’s Floristo theme

Page 9: Ubercart Guide: How to make your Drupal e-commerce website look great

upload. Übercart knows to use the right version of each image at any given situation, so (forexample) the tiny “product_list” image doesn’t appear on product feature pages.

Each of these “presets” is adequate… but you can change them to make them personal to yoursite.We discuss how to do so in the section, “Changing graphics with ImageCache”.

• Show the product in context, especially ifyou can put several products into one shot.Taking a different tack, you could use carefullycomposed product photos that show not onlywhat the product is, but also what it does. Doneright, you invite customers to get past thepurchase process to see how the product willbenefit them in use: The purchase itself becomes amere step on the way to gratification. The dangerof this approach appears if you include too muchcontext, in comparison to the product being sold.One way to approach that is to include severalproducts in such shots, so each one becomes part of a harmonious whole.

• When appropriate, use multipleproduct images. If you upload more thanone product image, Übercart smartlyhighlights the first one as its “main” image:It shows up in product lists, and in anespecially large format on the product’s ownpage. The rest of the images show up onthat page a bit smaller — and, with mostTNT themes for Übercart, with styling to setthem apart. These smaller images can givecustomers alternate views of the product, orpictures of the product’s included accessories,or anything else you think will help them feel more comfortable about buying it.

Give them enough info… but not too much

So now you have your graphics together. There’s another way to draw attention to what’s great aboutyour products: By removing unnecessary text and emphasizing others. Here are some ways to do that.

• Minimize fields that appear on product pages at /admin/store/settings/products/edit/fields. Übercart makes nine fields available for display on product

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 8

A product page with multiple images.Übercart automatically makes the first image

larger than the remaining three. Theme shown: Luxe

A great shot, especially if you also sell thetable and chair set. Can’t you just imaginethe pleasure of sipping wine by that pond?

Page 10: Ubercart Guide: How to make your Drupal e-commerce website look great

pages, and the defaults are pretty good —with two exceptions. There’s a good chanceyou don’t need to show the SKU tocustomers, as it’s a “stock-keeping unit”that’s mostly of use to retailers. And the“Sell price” is the same as the display price,but in a less-prominent format. For a less-distracting product display, uncheck both ofthese fields. (The information is still inÜbercart, it’s just hidden from customers in that place.)

• Minimize information that appears on catalog pages. As with product pages, Übercartlets you add and remove fields from catalog pages through the settings at /admin/store/settings/catalog/edit/grid — assuming you already checked “Display products in grid” on that page aswe recommended earlier. Additional useful settings for catalog pages are at/admin/store/settings/catalog/edit.

• Remove Author & Date information from “product” and “product kit” nodes. Onespecial feature of TNT themes is that you can decide whether to display certain information onnodes depending on content type by changing settings at /admin/build/themes/settings/[themename]. Specifically, look at the choices underTopNotchTheme Settings > Node Settings >Author & Date. (You’ll have to click a few ofthose little triangle icons to see thosesettings in each of those fieldsets.) Then, youhave the choice of hiding that informationon all content types, or varying the displaysettings by checking the “Use customsettings for each content type instead of thedefault above” box. Regardless of which youdo, you’ll almost certainly want to hide thatinformation on product pages, unless it’simportant that your customers know when aproduct was entered into your catalog.

• Use multiple taxonomies, but don’t show them all. Übercart uses Drupal’s categorizingsystem of “taxonomies” to build its product catalog: To see how that works, go to/admin/content/taxonomy/, click “list terms” next to the Catalog vocabulary, then go to/catalog. If you’ve tagged products and product kits with Catalog terms, your catalog will benicely divided into sections.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 9

Removing Author & Date information from all Productpages.We exposed the Product node’s settings by clickingthe small triangle next to the word “Product”; the othercontent types, such as Page and Poll, remain hidden.

Theme shown: Pump Up The Volume

Übercart’s default product display includes redundantinformation. Theme shown: Sharp Sales.

Page 11: Ubercart Guide: How to make your Drupal e-commerce website look great

You can get some additional benefits by setting up other vocabularies as well, some of whichwill be hidden from customers. For example, consider adding a “Promoted product” vocabularywith the terms, “Clearance”, “Weekly sale”, “Featured in email newsletter”, “In weekly printad”, and so forth. Then once you’ve tagged your products, it’s easy to create views that displaythose products in pages or prominently placed blocks. A link from the email newsletter would godirectly to the page of products tagged “Featured in email newsletter”, while a link in the printad would lead to a page of products appropriately tagged. Voilà, an easy way to tie content toadvertising — and boost sales! Further, visits to such pages could be tracked using GoogleAnalytics so you can compare your advertising’s effectiveness in various media. (We discussGoogle Analytics in the section, “Step 4: REACT to increase customer engagement”.)

We’ll discuss how to do this, and much more, in the section “Flexible catalog browsing withTaxonomies and Views”.

• Illustrate catalog terms with graphics.Once you have the Catalog vocabulary setup, you can easily illustrate each sectionwith a graphic. Just go to/admin/content/taxonomy, click the “listterms” link next to the Catalog vocabulary,click “edit” next to a term, and upload agraphic into the Image field. It will beresized according to the ImageCache preset,“uc_category”, which by default creates a 150x150 pixel graphic.We’ll tell you how to changethat setting (for bigger images on the /catalog page, for example) in the next section.

Changing graphics with ImageCache

We’ve referred to ImageCache a couple of times as a way of making your graphics attractive andconsistent. If you like the way Übercart displays your images and haven’t run into any image problems,you can skip this section secure in the knowledge that ImageCache is working correctly.

But if you ever notice anything odd about your Übercart graphics, or want to change such attributes astheir size or cropping, you’ll have to poke around ImageCache. Don’t worry: It’s actually quite easy anduser-friendly.

But before we talk about how to make changes, let’s look at the five presets that Übercart creates whenyou set it up. These default presets perform only one change, or “action”, to your images: They scalethem to a specific size. Their names, purposes, and scaled dimensions in pixels (width x height) are:

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 10

Terms in the Catalog vocabulary appear as links on the/catalog page, with optional icons. Theme shown: Luxe

Page 12: Ubercart Guide: How to make your Drupal e-commerce website look great

• cart, for products as they appear in theshopping cart (i.e., at /cart) (50 x 50)

• product, to show the item as it appears on itsown product page (200 x 200)

• product_list, for many places where the itemappears in lists (100 x 100)

• uc_category, for the icons associated withthe Category taxonomy, as we discussed in the“Illustrate catalog terms with graphics” pointabove (150 x 150)

• uc_thumbnail, for places where an especiallysmall icon is needed (35 x 35)

You can change any of these settings, and ImageCache will re-configure all your existing images tomatch. It always works off of the original image that you upload, so the images won’t degrade nomatter how much you play with the presets — as long as that image is bigger than the largest preset,that is.

To change the scaled size of these images:• Go to /admin/build/imagecache.• Click the Edit link next to the preset

you want to change. You’ll see itscurrent setting, which by default issimply to scale the image to the sizementioned above.

• You can change those dimensions byclicking the Configure link.Measurements are possible either inpixels (such as “65”) or as apercentage of the original image (e.g.“65%”). ImageCache will scale theimage to fit within those dimensions. The “Allow Upscaling” checkbox tells ImageCache that it’sO.K. to make images bigger than their original size. Use this setting with great caution, asupscaling makes an image look chunky and pixelated. Of course, you can always re-set it later ifyou don’t like what you get, so feel free to experiment.

• When you’re done, click “Update Action” to get back to see the preset’s current settings, whichshould reflect the changes you just made.

• If all you want to change is the image’s scaling, just click “Update Preset”, then finally• Go back to /admin/build/imagecache and click “Flush” next to the preset you just changed to

get rid of the old versions of your image.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 11

A preset with multiple actions, with the list of actions available.Theme shown: Sharp Sales

Changing an ImageCache preset.Theme shown: Child’s Play

Page 13: Ubercart Guide: How to make your Drupal e-commerce website look great

One important note: Your server will have tore-create all of the images in a preset afteryou make such changes. That can take awhile! If you don’t see the changes rightaway, give it some time: A few minutesshould do it for small and moderate-sizedcatalogs. If that doesn’t work, try clearingyour browser’s cache, or using anotherbrowser to make sure that everything’s fineon the server.

But wait, there’s more! Scaling is only one ofthe many ways ImageCache can manipulate your graphics.While editing a preset, click the “NewActions” link for a menu of other options and a brief explanation of what they do. You can add as manyof these as you like, and change their specifics in the same way as you changed the “scale” action,above. Further, you can reorder the actions for different effects by dragging them up and down in thelist: A combination of “Sharpen” and “Desaturate” looks different depending on which is done first, forexample.

For more ImageCache tricks, download the “ImageCache Actions” module from drupal.org/project/imagecache_actions to add a background to images, overlay text or a watermark, define imagedimensions and background colors, and perform other interesting changes.

Finally, remember to click the Flush link at /admin/build/imagecache next to any changed presets whenyou’re done, particularly if your images don’t look right.

Flexible catalog browsing with Taxonomies and Views

We’re talked a bit about how to improve Übercart’s basic catalog view at /catalog. But you can do much,much more to give your customers fresh new ways of seeing your products according to their viewingpreferences. Your ticket to ride? A thorough understanding of taxonomies and views.

Let’s start with taxonomies. In an earlier section we mentioned that Übercart automatically sets up onevocabulary named “Catalog”, and that the page at /catalog is derived from the terms in that vocabulary.We also discussed the possibility of tagging certain products as “on sale” using a separate taxonomy.Here’s how you do that.

1. Create the taxonomy by going to /admin/content/taxonomy, clicking “Add vocabulary”, andfilling out the form (with the Product content type box checked). Checking the Tags box lets youadd terms to the vocabulary when you create or edit products; otherwise, this is a good time toadd the terms you expect you’ll need.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 12

The original ImageCache preset for “product”, versus one withRotate, Desaturate, and Scale/Crop applied.

Page 14: Ubercart Guide: How to make your Drupal e-commerce website look great

2. Tag products either when you createtheir nodes, or later by clicking the Edittab while viewing them.

3. Turn on taxonomy display for the TNTtheme you’re using at /admin/build/themes/settings/[theme name]]: You’ll findthe settings under Theme-specific settings-> TopNotchThemes settings -> Nodesettings -> Taxonomy terms. As when weremoved Author & Date information from“product” and “product kit” nodes, youmight have to click some triangle icons tosee those settings. (These settings are onlyfound on TNT themes, by the way.)

At this point your site will display taxonomy termsjust as we planned, and clicking any term leads to a page of all other products tagged with that term.

Some examples of vocabularies that your customers might find useful are:

• “This would be a good gift for…”. People want their gifts to be both personallymeaningful and objectively useful. But while they might know the recipient’s general interests,they’re often less clear about the details. For example, a customer might know that he wants tobuy bicycling accessories for to feed a friend’s habit, but he isn’t a cyclist himself. Taxonomy linkswould let him narrow the choices down based on what he does know about his friend — thatshe’s a road cyclist rather than a race cyclist — and feel more confident in making the purchase.

• “Use this product for…”. Let’s say you sell cleaning supplies. Some customers will arriveknowing that they want a specific chemical (“ammonia”), but others will just want to know,“What should I buy to clean glass?”. A vocabulary that specifies how the product’s usedaugments the information that merely tells what it is.

• “Goes well with…”. There are so many possibilities for this vocabulary — and best of all,they lead well to companion sales! A cheese store might suggest the right kind of crackers,while an online-learning provider could propose accompanying courses.

Beware of assumptions when creating these taxonomies, though. Some tags are “safer” than others: It’sa good bet that few people think a chainsaw is suitable for children under the age of eight, for example.And sports equipment could be rated by activity level, or fit by height. But other judgments, such asthose related to gender or lifestyle, run the risk of alienating customers rather than engaging them.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 13

Applying taxonomy terms to a product. The “Goes wellwith…” vocabulary was created with “Multiple select”permitted, while we unchecked that box for the Catalog

vocabulary, deciding that we only want products to appear ina single Catalog. The other two vocabularies were created as

Tags, allowing freeform tagging when we create or editproduct nodes. Theme shown: Sharp Sales

Page 15: Ubercart Guide: How to make your Drupal e-commerce website look great

Whatever your choices in this area, be sure thatthey’re consistent with your organization’spolicies.

So that takes care of the taxonomy part of theequation. One of the best parts about usingtaxonomies is that you can make Views use thesetags to display information in a wide variety ofways.

Let’s start with a view that will change the pageyou get when you click on a taxonomy term. Thedefault display is pretty good, but fortunatelythere’s also a built-in view to override these pages.First:

1. Go to /admin/build/views and search for “taxonomy_term”2. Click the Enable link, then click Edit.3. To be sure you’re only affecting the Page view, click Page above the “Add display” button in the

upper-left.

A few things you might consider changing in this view:

• Change Style from “Unformatted” to “Grid”, an arrangement that displays slightly moreproducts in the same amount of vertical space.With a grid layout you can also then play aroundwith the number of columns and how they’re arranged on the page. The Grid style, like theUnformatted style, allows you to use the convenient “Row style: Node” which doesn’t requireyou to choose which fields to display.

• Change “Row style” to Fields, then play with the fields you display. Drupal makes ahuge variety of fields available in views, and by making this simple switch you gain access to

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 14

In this TNT theme, clickable tags for multiple vocabulariesshow up under other information on the product’s page.

Theme shown: Floristo

The default “Unformatted” view vs. a two-column “Grid” view,shown at the same scale. Theme shown: Floristo

Page 16: Ubercart Guide: How to make your Drupal e-commerce website look great

one of Views’ most powerful features. The down side is thesmall amount of extra work to decide which fields toinclude, and how to format them.

You could spend months learning how to create interesting anduseful Views: It’s a study in itself. But here are a few other little tricksthat work especially well in Übercart.

• Feature some products via views in blocks. Small, well-promoted sidebar displays haveterrific sell-through. One way to do so would be by using a little-known “random” function ofViews. Here’s how.1. Create the block. (For more details on how to do this, see our other Quickstart guide,

“Build a great Drupal website with your new theme from TopNotchThemes”.)2. Add only a few fields, most notably the “Content: File: Image” field, and the “Product: Buy

it now” button.2. Add a sort criterion, “Global: Random”.3. Under Basic settings, change the “Items to display” to 1.4. Place that block in a prominent place on your layout.Now that block will display a random product every time you go to a new page. Alternately, youcould have that block only appear on certain pages, such as the front page, or pages that don’totherwise have product information.

• Give customers control of what products they see on a catalog page by adding somefilters and exposing their controls. To do so:1. Add and configure the filters

you’d like customers tocontrol. Some common onesare “Product: Sell price” and“Taxonomy: Term”.Werecommend that you makesure the filters are fairlyinclusive by default, socustomers will have a senseof the full range of yourproducts before narrowingdown their selection.

2. Click the Expose button next to each filter as you set it up.3. Preview and save your view as normal.While you could make this work in a block, be

aware that many popup menus and other selectors are too wide for sidebar block regions,so these blocks will probably work best in the “extra” block regions you get in TNT

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 15

A minimal “Buy it now” view, usingfields. Theme shown: Stockholm

This view allows customers to choose which categories andprice limits they see, and lets them sort the results by price.

Theme shown: Fresh Start

Page 17: Ubercart Guide: How to make your Drupal e-commerce website look great

themes. In any case, it works well on a page, particularly when the Style is set to Tableunder the Basic Settings section of the view.

• Allow customers to sort catalogs as they want. This particular trick only works when theview is in Table style. Just click the settings icon next to “Style: Table” under Basic Settings, andyou’ll see checkboxes labeled “Sortable” for each sortable field. (Some field types, such as thosecontaining images, are obviously notsortable.) Here you can also determinethe view’s default sort criterion, andwhether it starts out with an ascending(low to high) sort, or descending (highto low). After you save the view,customers will see small, clickabletriangles above those fields that aresortable. If you gave a title to a sortablefield, customers will also be able toclick that title to sort.

• Reuse your views. Remember, any page view can easily be adapted as a block or RSS feed,and vice-vice-versa! You’ll typically include less information in a block than a page, and (often)more in an RSS feed… but it’s all up to you.

Increasing sales through creative point-of-sale marketing

The decision to buy is binary: The customer will either do it or not. But the decision of what to buy is agrayer area. Savvy merchants recognize that the decision to buy is the big hurdle, and attempt to capturemore profits by piggybacking additional products onto the customer’s original choice. But beware: Anysuch “upsells” that interrupt the purchase process could both frustrate the customer and lose the entiresale. Here are two techniques that gently increase sales without causing such problems.

• Offer instant discounts by bundling products into “kits”. Enabling Übercart’s ProductKit module at /admin/build/modules creates a new content type called “Product kit” that letsyou sell several items at once, typically at a lowered price. Creating a product kit is then simply amatter of making a node of that type by going to /node/add/product-kit, choosing products toput in the kit, and making a few administrative decisions.

Such upsells can add greatly to the bottom line, even if the profit margin on individual itemsgoes down. For example: Let’s say you usually sell a camera bag for $20 (your cost: $10) andlens care kit cover for $10 (your cost: $5). A package that contains both for $27 would appealto those who were planning to buy just the bag: They think, “It’s like getting that $10 lens care

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 16

Creating a product kit. Theme shown: Sharp Sales

Page 18: Ubercart Guide: How to make your Drupal e-commerce website look great

kit for only $7!” But from your side you’re getting $2 in profit you wouldn’t have seenotherwise.

• Offer your products in multiple formats. A customer who makes the decision to buysomething is making a statement: “I like this”. That’s valuable information: If you can identifywhat that customer likes, you’ll probably be able to sell other items with that particularquality… and Übercart’s Attribute module makes that easy.

Attributes give you the power to extend any base product (for example, an album of music) intoas many formats as you can think of (CD, tape, digital album, digital singles, ringtones...).Withsome creativity, you can breathe new life into the customer experience by defining productattributes in unusual ways, for example offering both a hat and a shirt (attributes) made out ofthe same unique fabric pattern (the “product”).

Some formats aren’t as obvious. One of Übercart’s most intriguing parts is its Roles module,which lets you sell Drupal user roles. That opens doors to additional opportunities by allowingyou to sell (for example) access to a “V.I.P.” discussion and support forum for 30 days — or tobundle that product with the purchase of a relevant item.

Step 2: INTERACT with your customersSo now you’ve hooked ’em with alluring products, strongly presented. Congratulations! Now it’s time tobuild their confidence in what you offer by providing information as well as products. In particular, we’llshow you how to give them the pre-sale details about company policies and “personality” that will setyou apart from millions of other online stores.

“Tell ’em what you just told ’em”: Emphasizing useful information

It should go without saying that your site will be more than just an elaborate “click here to buy” button!For one thing, most merchant-card providers require you to post privacy and return policies on yourwebsite; even if they didn’t, providing such information ahead of time could prevent a lot ofmisunderstanding. Further, such pages not onlyinform, but help convince customers that you’re well-established, thoughtful, and trustworthy.

Some information works well as a simple page. Butone of Drupal’s strengths is that you can deconstructand re-assemble information in several ways — andin doing so, emphasize points that you think areimportant. Just as importantly, Drupal lets you solicit

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 17

Push the film! These two blocks remind customersabout this much-needed item: once by featuring it,and once by including it in a short list of sale items.

Theme shown: Stockholm

Page 19: Ubercart Guide: How to make your Drupal e-commerce website look great

feedback from customers in useful and controllable ways.We’ll talk more about community interactionin the section, “Step 4: REACT to increase customer engagement”, but here are some ways to get theconversation rolling.

• Repeat important information. Various advertising studies over the years show that peopleremember information well only after it’s repeated from six to 13 times.While ad space isexpensive, pixels on your own web pages aren’t. So you’d do well to remember the sage advice,“Tell ’em what you’re going to tell ’em, then tell ’em, then tell ’em what you just told ’em”.Drupal makes that easy through the use of blocks.

You can create dynamic blocks using Views, as described in the section, “Flexible catalogbrowsing with Taxonomies and Views” But it’s also easy to create a static block, for example todisplay store policy or promotional information throughout your site:1. Go to /admin/build/block2. Click “Add block”3. Fill out the form. If your block includes images, remember to change the Input format to

“Full HTML”, or your graphics won’t show up. Click Save block.4. Make sure your theme is selected under “List” at the top of the page; if not, click your

theme’s name. (If you don’t do this, you’ll alter the appearance of a theme that customersmight never see!)

5. Find the block you just created and move it into the region where you want it to appear.

For more details on creating static blocks, see our Quickstart Guide, “Build a great Drupalwebsite with your new theme from TopNotchThemes”.

The harder question to answer is, “What information is worth repeating?”. In short, you want todrive home information that either increases revenue (as in our “Push the film!” illustration) orlowers costs. If your business sells products with a high return rate, for example, you mightemphasize your return policy, thereby cutting down on phone calls; or to increase sales,highlight a “free shipping” promotion.

• Build a FAQ using theFrequently Asked Questionsmodule. After you’ve been inbusiness for a while, you start tonotice that customers ask the samequestions over and over; and evenif you’ve just opened shop, youmight have a good sense of whatthose time-wasting questions will

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 18

Some of the FAQ module’s many display options.Theme shown: Nice Threads

Page 20: Ubercart Guide: How to make your Drupal e-commerce website look great

be. Further, many customers are nervous about buying from a store for the first time, and feelbetter when their concerns are addressed up front in an easy-to-browse fashion. A “FrequentlyAsked Questions” page both cuts down on your costs and satisfies customers.

Such information is often provided as a static page, which you have to edit to add or removeinformation. Unfortunately, that page becomes unwieldy as it gets longer and longer; lots ofmanual editing is required to maintain such a page, for example to split the FAQs intocategories. You could create much more-flexible FAQ page by putting each question into its ownnode, then delivering the page as a view. But even that technique lacks some features peoplehave come to expect from a FAQ page, such as a linked index at the top that jumps directly tothe requested FAQ lower on the page.

The Frequently Asked Questions module, available at drupal.org/project/faq, solves all theseproblems. Once installed, you enter questions and answers as separate nodes, categorize them,and make a few decisions at admin/settings/faq regarding how the FAQ page should appear.The module also provides blocks that display recent FAQs, random FAQs, and FAQ categories soanswers are never more than a couple of clicks away. You could even put top FAQs right on yourproduct pages!

• Automatically suggest other products of interest.We discussed how to do featuredpromotions/discounts using hidden taxonomies in the section, “Give them enough productinformation… but not toomuch”. On one hand, thatapproach gives you perfectcontrol over which products arepromoted, but on the other, itrequires constant “gardening”to prevent offers frombecoming stale. And if you wereto use that technique to recommend related products with every purchase, you’d have toexplicitly say which products go with which. That’s too much work!

Fortunately, there are a number of contributed Drupal modules that can automatically or semi-automatically suggest related items. Among them are:

• Similar Entries (drupal.org/project/similar) looks at content in a product’s Title and Bodyfields and uses semantic logic to suggest other products. (In Übercart products, the Bodyfield is labeled “Description”.) This module requires the least work from you, as it’s fullyautomatic; in exchange, you have almost no control over what’s considered “similar”.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 19

But wait, there’s more!

Übercart has proven very popular with developers, whohave extended it with hundreds of support modules, manyof them designed to improve customer interaction. Checkthem out at ubercart.org/contrib.

Page 21: Ubercart Guide: How to make your Drupal e-commerce website look great

• Relevance (drupal.org/project/relevance) gives you more control over what’s considered“relevant”, letting you consider access statistics and post date in addition to taxonomy.

• Relevant Content (drupal.org/project/relevant_content) and Similar By Terms(drupal.org/project/similarterms) both make suggestions based on the tags you applied toproducts: Those with the most similar tags float to the top. A comparison of these twomodules is at drupal.org/node/323329; a discussion of other “related content” modules isfound in that post’s comments.

Give customers ways to contact you

There’s a saying: “We have two ears and one mouth because listening is more important thanspeaking”. Indeed, customer feedback can give you a sense of profitable business directions, alert you toissues long before you’d discover them yourself, and increase purchase ease and satisfaction. Here aretwo ways to help your customers to help you.

• Use Webforms instead of Drupal’s defaultcontact page. If you turn on Drupal’s coreContact module at /admin/build/modules,configure it at /admin/build/contact, andprovide the correct access at/admin/user/permissions, customers will be ableto reach you through a fairly simple contactpage at /contact. This contact page is theessence of simplicity — for better and worse.On one hand, it’s simple to set up andunderstand; on the other, it doesn’t allow youto add or remove fields. As a result, customerswho contact you this way won’t know whichimportant and useful information to give you,such as which product needs support.

For better contact pages, we recommend you install the Webform module, available atdrupal.org/project/webform. First, turn off the Contact module (if you’ve enabled it). Then, createa Webform with the fields you want:We show you how in our Quickstart Guide, “Build a greatDrupal website with your new theme from TopNotchThemes”. Finally, be sure the URL PathSettings entry is “contact”, and include a link to the Webform in the Menu Settings if you like.Much better!

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 20

A contact form created using the Webform module.Theme shown: Floristo

Page 22: Ubercart Guide: How to make your Drupal e-commerce website look great

• Provide “live chat” access.Whencustomers want help, they want itnow: Email is too slow. Chat is one ofthe best solutions to providing thathelp, and the Chat Room module athttp://drupal.org/project/chatroomsets it up quickly. However, itsconfiguration is a bit tricky. Here aresome tips.• Chat Room has a configuration

page at/admin/settings/chatroom, butits settings are minimal. If you’reusing Chat Room for support,turn on the Chat Alert optionsfor extra warning when acustomer’s trying to chat with you.

• The Chat Room module doesn’t create a chat room itself: Rather, it creates a “Chat Room”content type. To start making chat rooms, fill out the form at /node/add/chatroom. Youthen create individual chatrooms inside that node. As a result, you’ll almost certainly onlyneed to create one such node, containing all the chat rooms you want.

• Because instant message-style chatting takes up a lot of employee time, you might want toonly make it available to post-purchase customers or some other subgroup.

If the Chat Room Module doesn’t provide all the features you want, consider integrating ahosted chat service into your Drupal site. Several modules help you do this:• CHAT Users and Design Integrated (drupal.org/project/bowob)• Parachat (drupal.org/project/parachat)• Windows Live Messenger (drupal.org/project/windowslivemessenger)

Reach beyond the website

“When all you have is a hammer, everything looks like a nail”— and when you focus on perfecting yourwebsite, it’s easy to forget that some people understand information best when delivered in otherformats, such as through email or the printed page. And everybody appreciates choice. So while creatingyour online store, don’t forget these other options for getting the word out.

• Downloadable documentation is especially useful if you sell products of a technical nature,such as software or electronics. Anybody can sell the latest thing: But how many help you use it?You can set your store apart by making documentation easy to find and easy to get.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 21

A live support forum created with the Chatroom module.Theme shown: Luxe

Page 23: Ubercart Guide: How to make your Drupal e-commerce website look great

But first, you need to get thedocuments up on your site! Yourfirst step is to create a new nodefor each downloadabledocument: It can be of any type,as long as you’ve enabled theUpload manual at/admin/build/modules. (You canalso use any of severalcontributed modules to handlefile attachments.We like theUpload module because it’s oneof Drupal’s core modules.) Then,edit the relevant product nodeand upload the documentsthrough the newly visible “Fileattachments” feature.

As your product documentation library grows, you can easily create a page that lists alldocuments through Views. The one shown here contains the fields “Content: Image”,“Node:Title”, and “Upload:Description” in a sortable Table format.

• Email newsletters are the oldest form of corporate communication on the Internet, withtremendous power to build customer engagement and loyalty — or to drive away otherwiseprofitable customers. Here’s how to send newsletters that will delight and compel.

• Use the Simplenews module for newsletter management.While you could cobbletogether a newsletter delivery system using other modules, Simplenews(drupal.org/project/simplenews) was built specifically for the purpose and goes far beyondsuch homegrown systems. Its wealth of features gives both you and subscribers lots ofcontrol. But that same feature-richness makes configuration somewhat complicated, so besure to budget some time to it before broadcasting your first newsletter.

• Send only to people who expect your email. Over 20 years after the word “spam”was applied to unsolicited email, it’s as despised as ever. The best policy is to requirerecipients to explicitly subscribe to your newsletter, typically through a subscription blockthat Simplenews provides.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 22

How uploaded documents appear on a product page(with download link highlighted) and on a simple Views page.

Theme shown: Fresh Start

Page 24: Ubercart Guide: How to make your Drupal e-commerce website look great

• Test before sending. If you’ve ever received anaccidental email broadcast, you know how it makes thesender look bad. Simplenews has an option to “Sendone test newsletter to the test address” beforecommitting to a full blast:We recommend you set thatas the default at /admin/settings/simplenews/newsletter.

• Include truly useful information.While you mightsee your newsletter as a way of keeping customers, theywant to know how it will help them: If it delivers toomuch sales copy or irrelevant ramblings, they’llunsubscribe after only one or two issues. Stories aboutinteresting ways your products are being used, news of interest to people in your product’sindustry or peer group, and offers available only to newsletter subscribers all help keepyour audience engaged.

• Set a predictable newsletter schedule and stick to it. Once a month is a common(and easy-to-remember) schedule, although some newsletters are more appropriate for aweekly, bimonthly, or quarterly schedule. More than once a week is rare, and only good foran audience that relies on up-to-the-minute information; less than once a quarter mayresult in recipients forgetting that they subscribed, leading to accusations of spam.

Step 3: TRANSACT and get paidBefore you can start selling products, you have to work out how you’ll receive money. This task trips upmany would-be entrepreneurs because they force you to step outside of the safe, controllable world ofDrupal and start dealing with outside service providers. Just as discouraging, you might have to wait forcompanies or government officials to act before you can go forward. But try not to lose faith:Withpatience and persistence, it will all fall into place. Here are some tips to help you along the way.

There are essentially three ways to receive money, with the general rule that the easier a paymentsystem is to set up, the lower your payoff and the harder it is to attract customers who’ll use thatpayment system. From easiest to hardest, they are:

• Direct payment by cash or check. These require no special set-up; however, both cause delayswhile you wait to receive the money before processing the order.We don’t recommend thisoption, but it’s reassuring that Übercart allows it.

• A third-party processing provider such as PayPal (paypal.com), 2Checkout(2checkout.com), and Google Checkout (checkout.google.com). A secure order form takes

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 23

Page 25: Ubercart Guide: How to make your Drupal e-commerce website look great

customers to another site for credit card processing and payment: You don’t need to set up anyspecial security on your site, and the third party handles the credit-card processing details. Onthe down side, such services usually charge higher per-transaction fees than true merchant-cardservice providers, andyour customer mighttake a somewhat-jarring detour to thepayment processor’ssite. This solution is bestfor setting up your sitequickly, or if you expectto make less than a fewhundred dollars of salesper month.

• A true merchant-card service provider, such as Authorize.net or CyberSource(cybersource.com). These services authorize credit-card transactions after receiving encryptedinformation from Übercart, allowing the entire transaction to be handled on your website. Suchservices tend to charge lower per-transaction fees than the third-party processors, and give youfar more options for customizing the checkout experience. However, they require a lot of setup,including an SSL certificate and a background check of your business, along with monthly fees.This solution is best if you feel confident that your store will transact at least a few hundreddollars of business per month.

Whichever payment solution you choose, you’ll need to enable an Übercart module to handle it.Übercart comes with those named above, all listed in the “Übercart — payment” section at/admin/build/modules. It also includes a Test Gateway (for testing credit card payments), a module thatlets you set up recurring payments (such as monthly subscriptions), and a Payment Method Pack (formiscellaneous, unprocessed payment types, for example by cash or money order). Dozens of otherÜbercart payment gateways are available at ubercart.org/contrib: Select “Payment” under the Categorypopup menu for a list.

Step 4: REACT to increase customer engagementSo: You’ve attracted customers to your store, completed a few transactions, and collected the money.You’re in business — congratulations! Now’s the time to transition from startup entrepreneur tooperating entrepreneur by solidifying and growing your customer base.We got a glimpse into how to dothat through email newsletters: Now let’s look at some other ways to encourage repeat purchases andcustomer loyalty.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 24

Enabling payment methods at /admin/store/settings/payment/edit/methods; somemethods require additional configuration. Theme shown: Stockholm

Page 26: Ubercart Guide: How to make your Drupal e-commerce website look great

• Turn customers into “members”.Before you can truly engage yourcustomers, you have to tell one fromanother! Fortunately, Übercart createsa Drupal user account the first timesomeone buys from you, giving newcustomers usernames based on theiremail addresses. The first time someonechecks out, by default the “Ordercomplete” screen displays the new username and password, and an email is sent with the sameinformation. You can change these settings at /admin/store/settings/checkout/edit under the“Checkout completion settings” section.We recommend that you also check the box, “Loginusers when new customer accounts are created at checkout” so the customer will be logged in— and trackable — as much as possible.

• Reward customer behavior. Ever hear of green stamps? These lick-and-stick stamps givenout to customers who purchased items at participating retailers; the consumer could then tradethem in for various household items from dishes to furniture. This early “loyalty program”created store profits that far outweighed the cost of the stamps, or the rewards eventually givento consumers.

The module User Points (drupal.org/project/userpoints) works in much the same way, but withfar more flexibility. As with green stamps, customers to your site earn “points” from activitiesyou specify: purchases would be one activity you’d obviously want to reward, but you could alsogrant points for (say) signing up to receive the email newsletter, or writing a product review.

The User Points module itself is only an application programming interface (“API”), and doesn’tlet you specify how customers can earn points: That functionality comes from other, compatiblemodules. The most complete list of such modules is at drupal.org/project/userpoints_contrib.Some User Points modules integrate with Übercart, for example Übercart Userpoints(drupal.org/project/userpoints_ubercart) and UC Userpoints Discount(drupal.org/project/uc_userpoints_discount).

Unfortunately, development of these modules has generally lagged well behind new Drupal andÜbercart releases, so be sure the User Points modules you want to use are sufficiently up-to-date when planning your loyalty program.

• Give customers ways to express themselves. Some of the world’s most popular onlineretailers have gained tremendous value allowing customer comments on their sites.Why not dothe same? The simplest way is to leave commenting enabled on the Product and “Product kit”content types. Ta-da, instant bulletin board!

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 25

Übercart’s checkout completion settings.Theme shown: Stockholm

Page 27: Ubercart Guide: How to make your Drupal e-commerce website look great

But where there’s anonymity, there’s abuse!So if you decide to let people leavecomments on your Übercart site, werecommend that you not give that right to“Anonymous” users — that is, those whoeither haven’t created a Drupal account oraren’t logged in. An even better idea is todefine several levels of access at/admin/user/roles and/admin/user/permissions and “elevate” users based on trust. The User Points module mentionedearlier (drupal.org/project/userpoints) is a good way to do this.

Not everybody has the time or interest to read or write comments… but you can still give thema sense of belonging by letting them rate stories, comments, and even products. The mostpopular way to do this is through the module Fivestar (drupal.org/project/fivestar), whichrequires you also install and enable Voting API (drupal.org/project/votingapi).

Finally, always watch for customer comments that are unusually positive, and have a way tocapture them. If you use Webform for feedback (as described in the section, “Give customersways to contact you”), you could add a checkbox to ask, “May we use your comment on oursite?” Then when you receive a particularly juicy endorsement, put it in a node that can becollected and used throughout the site, for example in blocks. You can do this through views, ordownload the Quotes module from drupal.org/project/quotes.

• Keep an eye on customer behavior. There’s a saying, “If you don’t know where you’regoing, how will you know when you get there?” By the same token, customer behavior will tellyou if you’re going in the right direction — and where to go if not. Drupal’s built-in reportingsystems at /admin/reports deliver the raw data, but aren’t terribly easy to interpret. Fortunately,several contributed modules deliver info that’s a little easier to digest.

The most popular is Google Analytics (drupal.org/project/google_analytics), which delivers trafficinformation from your site to Google, where you can access it in several convenient forms atgoogle.com/analytics. According to Google’s documentation, only “aggregated” data is sent toGoogle: No actual customer details ever leave your server.

Help your customers help you

Finally, we get to your most important allies: Happy customers! Their endorsements might not affect asmany people as advertising, but they carry far more weight.Which brand would you use: The one yousaw on T.V., or the one your sister swears by?

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 26

A product page with commenting enabled and theFivestar rating module installed. Theme shown: Luxe

Page 28: Ubercart Guide: How to make your Drupal e-commerce website look great

A traditional problem with customer endorsements is that they’re sometimes confused or nonspecific.For example, someone might remember that “It’s the soda in the blue can”, but not remember thename; online, people misspell and mis-hyphenate URLs all the time. But in this age of online socialnetworking, several tools for Drupal can help your enthusiastic customers deliver your messageaccurately and broadly.

• Übercart Affiliate (drupal.org/project/uc_affiliate2) lets people become “affiliate” salespeoplefor your site, in exchange for a percentage of income from completed sales. Affiliates place linksto your store on their own websites, constructed so that it’s clear where the link is coming from.(For example, if you run store.example.com and the user’s affiliate name is bigbob, the linkwould look something like “store.example.com/affiliate/bigbob”.) Through cookies, the modulekeeps track of which affiliatewas responsible for sending acustomer to your site, andcredits that affiliate with anysales that are completed.)

Unfortunately, development ofthis module has stalled as thisguide goes to press, so be surethat there’s a release thatmatches the Drupal versionyou’re using.

• Service Links (drupal.org/project/service_links) lets your customers quickly submit pages ofyour site to various websites that are designed for storing and sharing such information. Someof these sites effectively create free, public ads for your site: On Digg, for example, the firstperson to click your Service Link would create a description of the page, while each additionalperson who clicked there would add help that description float to the top of the popular site atDigg.com. But each site connected via Service Links has its own rules:We recommend you learna little about how each site works before including its Service Link. (You can enable and disablethe links individually.)

A much simpler “tell others” module is Tell a Friend (drupal.org/project/tellafriend), whichcreates a form for sending a pre-written note about the site to friends. This module allowssenders to personalize the message, which enormously increases its potential for abuse. (Aspammer could put an ad in that personalization space and send it far and wide, making it looklike you were responsible for the spam.) If you decide to install this module, make sure you keepthe safeguards in place that limit the number of messages sent per hour.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 27

Two implementations of the Service Links module,showing all the services included when this guide

was written. Theme shown: Floristo

Page 29: Ubercart Guide: How to make your Drupal e-commerce website look great

How can I get more help from TopNotchThemes?

We hope this guide has helped you to make your Übercart website more usable for your customers, andlook great too! While some of the topics covered in this guide are especially applicable to using a Drupaltheme from TopNotchThemes, most of the tips here are useful for building any Übercart site. Here'swishing you great success with your new online store!

If you have any questions about using your theme from TopNotchThemes on your website, or have anycustom theming needs, please contact us via the form on our website at topnotchthemes.com/contact.

Gallery of TNT themesTopNotchThemes offers dozens of Drupal themes for business, entertainment, commerce, social-networking, and general-purpose sites. Below is a sample: To see them all, visit topnotchthemes.com.

Copyright 2009, TopNotchThemes, All Rights Reserved • TopNotchThemes.com • Revised: 6 February 2009

TopNotchThemes Quickstart Guide: How to make an online store look great with your new theme from TopNotchThemes 28