Tutorial: Custom Yahoo Store: Intro

While the promise of Yahoo Merchant Services is to get retailers launched quickly, there is a very limited selection of templates from which to choose. They all seem so cookie cutter (as templates are, by nature). Certainly not up to par with brand image I’d like Sunfitters to reflect. Until now, “full design customization” required using store tags in Dreamweaver… and giving up content management features Yahoo provides. But there’s good news! With Yahoo’s recent upgrade of Store Manager, every store layout is now fully customizable (if you know how).

Amazingly, the information on HOW to do this is not well documented. Yahoo does not support store template modifications. There are a number of good materials out there for reference, including RTML 101 from Y-Times, Yahoo’s RTML Help Page, Yahoo’s RTML Reference and Y-Store Forums.  But I have not found a free guide on how to fully customize your storefront, step-by-step. So here is my feeble attempt at sharing how to build your own custom Yahoo Store.

If you really want to break the mold without giving up on the content management features of Store Manager – you will need to abandon the benefits (and inherent constraints) that come with form-based design configurators. If you venture ahead, you are in uncharted territory and will no longer be able to modify the look & feel without diving into HTML and CSS. So do not attempt to do this unless you are very comfortable building pages by hand with HTML and CSS. But I’m afraid there is just no way to work in RTML without a thorough understanding of HTML and CSS. I am sure this is why Yahoo doesn’t document it. It would take a lot of effort to support every merchants’ custom code.

So if you are building a custom Yahoo store in Store Manager, you will be doing so from scratch. That’s right… from the very start, the presentation layer of your custom design will be built and managed entirely at the code level. As I’ve already suggested, you will use code to generate HTML templates, use code to modify your css styles, use code to develop javascript interactivity, use database uploads to manage your catalog data, and use FTP to publish your digital assets. Basically, par for the course in most other systems. If this is what you’re ready for, you may proceed.

If you’re skiddish about working at the code level, you have two other choices. Live with the constraints inherent with Yahoo’s store console, or pay someone else to do all the heavy code lifting for you. Dreamweaver is not a viable option for a large site that needs content management… and with store tags in Dreamweaver, you will not be able to avoid working at the code level.

Does this sound completely daunting? Trust me, it’s nowhere near as daunting as trying to wade through Yahoo’s undocumented RTML templates and reverse engineer how to get stuff to look and behave exactly the way you want it. And it’s nowhere near as expensive as paying thousands to RTML specialists to implement your design with moderately simple, but hard-to-integrate features like “tabbed item information box,” “additional product images” and “cross-sell items,” etc. Now you can build and integrate anything on your own. Heck, with this approach, you can even introduce AJAX functionality if you are so bold.

Before plunging in, there is one last caveat. While customization is possible for just about ANYTHING in Yahoo Stores, you really can’t customize the shopping cart and checkout pages outside of Yahoo’s administrative console, called the “Checkout Manager.” And you can’t change the behavior of the native search tool that Yahoo provides out of the box. Thankfully, you can assign stylesheets to better control the look and feel of these pages. But the manner in which the search and checkout features operate is limited to what Yahoo provides in the box.

Assuming you’ve decided to take the plunge, this tutorial has six steps:

1. Create web directories to store digital assets
2. Create global variables for your store
3. Create custom types for your store
4. Upload your store data
5. Create custom templates for your store
6. Create a stylesheet for your store

I will cover each of these steps in separate posts. When you’re ready, proceed to
Step 1: Create web directories to store digital assets …