Yahoo Storefront Design Tips — Part 1

By James Maguire | Posted March 28, 2006

It's no surprise that Yahoo Merchant Solutions recently won the Small Business Computing reader's poll for best e-commerce platform. For new Internet merchants looking for an online store that's easy to launch, few platforms offer the simplicity and affordable price that the Yahoo solution does.

Yahoo's package offers newbie merchants Web hosting, domain registration, and a plethora of site building tools, all in one place. As soon as a merchant agrees to plunk down $39 a month (with higher fees for advanced versions), she has a template storefront, and she can set up a credit cart account with Paymentech, a Yahoo partner.

One moment you're a Web surfer, and — presto — 39 bucks later you're a store owner. But just having 39 bucks to blow doesn't make you a successful merchant. And just being one of the vast army of sellers who runs a templated storefront doesn't mean you'll make enough to retire to Tahiti.

To be truly successful, many Yahoo storeowners develop their store far beyond the basic template design. Not content with a cookie cutter layout, they jazz up and spruce up their site, adding design features to help enhance the shopper's experience — and their own bottom line. But how? What features do Yahoo merchants most commonly add to Yahoo's basic template to increase online sales?

Hire a Helping Hand
In many cases, Yahoo merchants look for an outside designer to take their store to the next level. Enhancing the template takes technical expertise that many store owners lack — they're merchants, not techies.

There are so many Yahoo store owners, and such large demand for enhanced Yahoo store design, that a community of Web designers who focus on Yahoo has grown in response. Type "yahoo store design" into Google — or, better yet, into Yahoo — and you'll see a legion of design firms geared for merchants on the Yahoo platform. None of these firms are officially part of Yahoo, they merely re-design the company's default e-commerce platform.

These designers help Yahoo store owners to improve both a store's aesthetics and its user interface. Their goal is to make the site of a small-time operator look and perform as well as far larger operations and thus create greater trust among shoppers.

These designers often build mock-ups for merchants prior to launching the revamped storefront. The re-design process can take anywhere from a week to several weeks, and the merchant has plenty of decisions to make before hand.

That's because a re-design is typically a matter of choosing from a menu of options (listed below) — and, of course, the more options, the more expensive the job.

One key fact about the Yahoo store: Yahoo's e-commerce platform is coded with a proprietary language called RTML, which outputs HTML. So hiring a Web design firm that doesn't work with this language won't produce optimal results.

What Does It Cost?
Many Yahoo merchants ask — 'what should I expect to pay for a re-design?' — but that question's hard to answer. In fact, there are probably as many different prices as there are design firms that do the work.

One design firm said that its basic services range from $350 to $1,500, for which it provides improved templates. Its next price tier starts at $3,000, which it calls its custom re-design, though it still contains some of Yahoo's templated features. For $6,500 this firm does a complete re-design, head to foot — "You'd never know it was a Yahoo store," they claim.

Another re-design firm noted that its price varies widely based on what a customer wants, but the average price was $3,300 to 3,500, which includes full graphic design, a handful of additional features and greatly enhanced SEO.

Still another Yahoo design firm said its full package is priced at $1,200, which includes several months of keeping an eye on the clients' sites to make sure their traffic is increasing after the makeover.

One president of a successful design firm noted that when other design firms charge $2,000 for a Yahoo makeover — which he considers too cheap to be credible — all they're really doing is uploading pre-designed templates. "It takes about 15 minutes, and they make $2,000 — but they get away with it because other firms charge more."


Loading...
FerretStore.com certainly doesn't look like a typical Yahoo store thanks to the designers at Solid Cactus.

Adding to the confusion, these prices can't be compared on an apples-to-apples basis: One designer's $3,000 deluxe job might be another designer's low-end quickie — or both designers might fail to lift the store's design to a truly competitive level.

In short, to get a good deal, a merchant must do the legwork of talking with several designers, looking at their portfolio, and checking references and past customers to see if their prices appear to be a good deal.

What Changes Do These Designers Make?

Providing Anchor Text for Images
By default, a standard Yahoo store template uses buttons on the left side of the home page and a row of graphic images for navigation. But search engines can only crawl text, not images — so these graphic images work against a site's search engine profile.

Yahoo store designers add anchor text (otherwise known as alt tags) to these graphic images (and all of a site's images), which allows a search engine spider to better "read" the graphic images. "So when a search engine follows the link, they (the searchers) know that the link is about, say, ferret food; if it's an image, they don't know that the link is about," says Joe Palko of SolidCactus, a Pennsylvania-based Yahoo design firm. (Palko re-designed FerretStore.com, hence his reference to ferrets.)

Improve Meta Tag and Meta Keyword Relevancy
The more relevant a page's meta tags and meta keywords, the more they boost that page's ranking when it's crawled by search engines. But many merchants face a problem: They have dozens or hundreds of product pages, so writing a set of meta tags specific to each page is an extremely time consuming task.

A good designer can remedy this by programming RTML (Yahoo's proprietary language) to scan the entire site and automatically output a different set of tags for each page, based on that page's specific content. This saves a merchant a lot of time, says Shawna Fennell of 1Choice4Ystore, a Yahoo design firm based in Indiana.

Bread Crumb Navigation
"Anything is better than the default" Yahoo navigation, says Kevin Richards of Ventura Web Design, a Yahoo store designer in Las Vegas.

To improve the Yahoo template's navigation, Richards adds "bread crumb" links to the top of each page. These links tell a shopper exactly where they are in relation to the overall site.

If, for instance, a shopper has drilled down from the Books page to the Art Books page to the Painting Books page, the bread crumb links look like this: Books>Art Books> Painting Books. Adding these links to every page in the Yahoo template not only helps navigation (which increases shopping) it may boost search engines presence by providing keyword repetition.

Product Photo Rotation
Many slickly designed sites present a different product photo to shoppers each time they visit a product page — this gives the site a "live" feel. This option isn't offered with Yahoo's template, but a designer "can program in three or four photos and they'll rotate," says Aliss Inozemtseva of Alpha Store Design, a New Jersey-based Yahoo store design firm.

Inozemtseva gives the example of a site selling women's handbags. The first time a shopper lands the home page, she sees a photo of Nicole Richie with the handbag, along with a short blurb about the bag. When they return to that page, the photo has changed to Paris Hilton with a different handbag and description. The effect is eye catching.

Fly Out Menus
One tool that helps shoppers find products faster is a "fly out" navigational menu, which displays a deeper category menu when a shopper moves their cursor over a link. Fly out menus can be designed to show second- or even third-level site navigation.

With Yahoo's default template, "you can't even go to the second level under the first level," says Jim Hollomon, of ET Productions, a design firm based in Boston. But with a re-design to add fly out menus "you can set up navigation to go right to the item you want from the front page," he says.

Customize the "Add to Cart" Button
Yahoo's default "add to cart" button uses an HTML element that's not too eye catching. Jazzing up the appearance of this bland-looking button does a lot to draw shopper attention to the all-important checkout process. In fact many e-commerce sites, Yahoo and otherwise, spend countless hours tinkering with the look of this button — they know an eye-catching button is critical. So one of the first things any Yahoo design firm will do is re-design the "add to cart" button.

The goal: "Get better conversion by drawing attention to the most important link on your site," says Ventura Web Design's Richards.

Improve "Click to Enlarge"
Allowing customers to click to enlarge a product image is an essential sales technique, one that high-end sites offer without fail. Yahoo's default template also offers this, but when shoppers click on "Click to Enlarge" they're taken to a new page, and they have to hit the Back button to return to the product page. "With RTML we can change that around," says Solid Cactus's Palko, so a shopper can buy right from the enlarged photo page.

Place "Related Links" Near Product
Look through a well-designed site, and you'll usually see a list of links to related products near each product, sometimes at the bottom of the page. Adding these links to the Yahoo template "helps with conversion, and it also helps with SEO because Google loves those anchor text links in a site," says Fennell from 1Choice4Ystore.

A Cross-Sell Section to Product Pages
A cross-sell section is a stand-alone module that designers add to each product page, often placed on the page's right side, that merchants populate with Top Picks or Hot Sellers. This box will often say "People who liked this product also liked…" and present similar items. If the box is properly designed, a Yahoo merchant can fill in this box simply by entering product codes.

Enhanced Product Layout
Shoppers make up their minds about a site instantly, notes ET Productions' Hollomon, who cites research indicating that consumers decide "yes" or "no" about a site within the first second they land on it.

Consequently, an attractive product layout is critical, and design firms spruce up Yahoo's utilitarian-looking template any number of ways. For example, "Yahoo puts out your product information in one big line — price code, availability, order button — for each product," Solid Cactus's Palko notes. "What we do is lay that information out at in a nice little graphical table, up at the top right next to the image."

The design firm also codes pages to add custom-display properties for each item, "and then we dynamically create pages by the custom properties." In other words, this re-design option allows more product information display but requires less manual work for the merchant.

Clean Up Code
Yahoo's default template uses WYSIWYG -generated code, "which means it's not really optimal code, and it adds a lot of bloat to the site," Palko says. "It's good for someone starting out, but if you're gunning for competitive terms, you need everything done perfectly."

Palko's firm pares the page's code down to the essential for faster load times and more efficient search engine crawling.

Coming in Part 2: Many more ideas for Yahoo site re-design. Plus: the experiences of merchants who have redone the basic Yahoo template.

Adapted from ECommerce-Guide.com, part of Internet.com's Small Business Channel.

Do you have a comment or question about this article or other small business topics in general? Speak out in the SmallBusinessComputing.com Forums. Join the discussion today!


Comment and Contribute


     

    Get free tips, news and advice on how to make technology work harder for your business.

    Submit
    Learn more
     
    You have successfuly registered to
    Enterprise Apps Daily Newsletter
    Thanks for your registration, follow us on our social networks to keep up-to-date