• How to enable the built-in breadcrumbs for the new store Editor
• How to add Cascading Style Sheets
• How to add related product items
• How to add a quantity box
In this chapter, we show you step by step how to implement the advanced features mentioned in the previous chapter. These features improve your store’s navigation, marketing capability, and customer user experience.
Istvan Siposs and Michael Whitaker of Y-Times Publications (www.ytimes.com) have generously allowed us to share some of their step-by-step tips and tricks from their book Yahoo! Store Tips and Tricks (Y-Times Publications, 2005), which includes more than 100 useful tricks. Siposs and Whitaker are recognized Yahoo! store experts who have helped hundreds of merchants improve their Yahoo! stores through books, seminars, and consulting.
Breadcrumbs are a set of links to parent sections. This is a great way to let customers know where they are in your site and provide an easy way to backtrack to parent sections. The new Yahoo! Store Editor has the breadcrumbs feature built into it. This might come as a surprise, and, no wonder: No switch or variable in the editor lets you enable breadcrumbs. This is part of the body-switch
template, as shown here:
Body-switch. (wid)
MULTI
IF test @show-path.
then MULTI
TEXT "[ "
WITH-LINK TO :index
TEXT "Home"
TEXT " > "
CALL :walk-up.
TEXT @name
TEXT " ]"
LINEBREAK number 2
else nil
IF test EQUALS value1 @type
value2 :search.
then CALL :search-body.
wid
else CALL :page-body.
wid
In this template, if the variable show-path
. is true
, breadcrumbs will show up at the top of the page. The problem is, there is no variable or property called show-path
. Let’s create a custom variable by that name. However, notice that the variable in this template has a period at the end of its name. Because periods are not allowed in custom variables, you cannot add show-path
. You can, however, modify the copy of this template. To turn on the built-in breadcrumbs, all you have to do is modify your copy of the body-switch
template and change @show-path
. to up
. The template should then look like this:
MULTI
IF test up
then MULTI
TEXT "[ "
WITH-LINK TO :index
TEXT "Home"
TEXT " > "
CALL :yourstoreid-walk-up.
TEXT @name
TEXT " ]"
LINEBREAK number 2
else nil
IF test EQUALS value1 @type
value2 :search.
then CALL :yourstoreid-search-body.
wid
else CALL :yourstoreid-page-body.
wid
This makes sense because you want to show breadcrumbs only for pages that have parents (where up has a value). With this template modification, you get breadcrumbs that look something like those in Figure 7.1.
A couple of problems crop up with this: First, the font is the default browser font (Times New Roman, in this case). Second, the font is too big; breadcrumbs are usually smaller than the regular text font. To rectify this, first replace the second MULTI
expression with a FONT
, and paste that MULTI
expression within the FONT
operator:
MULTI
IF test up
then FONT size 1
face @text-font
MULTI
TEXT "[ "
WITH-LINK TO :index
TEXT "Home"
TEXT " > "
CALL :yourstoreid-walk-up
TEXT @name
TEXT " ]"
LINEBREAK number 2
else nil
IF test EQUALS value1 @type
value2 :search.
then CALL :yourstoreid-search-body
wid
else CALL :yourstoreid-page-body
wid
This is better, but the links between the home page and the current page are still too large. To fix that, edit your copy of the walk-up
template. Originally, it looks like this:
yourstoreid-walk-up ()
FOR-EACH-OBJECT GET-PATH-TO dst id
src :index
nodst :t
nosrc :t
WITH-LINK TO id
FONT size @text-size
face @text-font
TEXT @name
FONT size @text-size
face @text-font
TEXT " > "
As you can see, FONT
is set again in this template, so you have two choices:
FONT
operator in this template and change size
to 1
.FONT
operators altogether.This is what the finished template should look like:
Yourstoreid-walk-up ()
FOR-EACH-OBJECT GET-PATH-TO dst id
src :index
nodst :t
nosrc :t
WITH-LINK TO id
TEXT @name
TEXT " > "
When an image is larger than the size specified by the item-height
and item-width
variables, the visitor can click on the image to view it full size. The problem is that unless the customer moves the mouse over the image, the customer will not know that the image can be clicked. Wouldn’t it be more obvious if you could add the text “Click to Enlarge” right below the product image (see Figure 7.2)? To do this, you need to modify the imexpand
template. The original, untouched template looks like this:
Yourstoreid-iImexpand (im orig hlimit wlimit align)
WITH= variable exp
value CALL :yourstoreid-imexpands
RENDER image orig
hlimit
wlimit
IF test NOT EQUALS value1 exp
value2 :no
then WITH-LINK IMAGE-REF orig
IMAGE source im
align align
alt WHEN EQUALS value1 exp
value2 :yes
"Click to enlarge"
else IMAGE source im
align align
The bold line puts the image on the page using the IMAGE
operator. That’s the line you need to modify so that instead of simply displaying the image, you display the image and a text line that says, “Click to Enlarge.” This can be achieved by replacing the source
argument of the IMAGE
operator with the image FUSE, together with the text line. The modified template looks like this:
Yourstoreid-imexpand (im orig hlimit wlimit align)
WITH= variable exp
value CALL :yourstoreid-imexpands
RENDER image orig
hlimit
wlimit
IF test NOT EQUALS value1 exp
value2 :no
then WITH-LINK IMAGE-REF orig
IMAGE source FUSE axis :vertical
im
RENDER text "Click to Enlarge"
align align
alt WHEN EQUALS value1 exp
value2 :yes
"Click to enlarge"
else IMAGE source im
align align
To format the “Click to Enlarge” line to suit your needs, edit the RENDER operator and modify the text-color, text-font, font-size
, and text-align
arguments.
CSS was introduced to define how to display HTML tags. Without CSS, the browser basically decides how to display common tags such as <P>
, <H1>
, and <A>
, giving the designer little control over the appearance. CSS gives you more control and options over the appearance of your Yahoo! store. CSS is particularly useful for creating rollover effects for text-navigation links. Just as with HTML, you can create CSS by hand in a text editor, but it’s easier to use editors such as Dreamweaver for that task. You can use CSS in a Yahoo! store in two ways:
• Internal style sheet— Paste the style sheet information directly into the HEAD-TAGS
variable:
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
This changes the appearance of every hyperlink in your Yahoo! store that uses the simple <A>
tag. Remember to provide a proper opening (<style....>
) and closing (</style>
) tag.
• External style sheet— Upload your CSS file to your Yahoo! Web Hosting account and link to it as in the previous example:
<link rel="stylesheet" type="text/css" href="http://site.yourdomain.com/style.css" />
The preferred approach to using CSS is to use an external style sheet. After the external style sheet file is loaded into the browser, it is cached for subsequent pages and, hence, reduces page-load times. Also, from an SEO standpoint, the fewer nonvisible page elements there are in the HTML source code, the better. (For this reason, you should also put any JavaScript in an external file.)
Here is a practical example you can use right away: removing the default padding and margin from your page layout (see Figure 7.3).
Figure 7.3. Using CSS to remove padding and margin.
Without having to modify any templates, you can simply add the following instruction to your style sheet:
body {margin:0; padding:0;}
Naturally, you can also use this to add increase margin and padding.
It is beyond the scope of this book to cover CSS in any great detail. If you are not familiar with style sheets, you should consult the excellent tutorial at www.w3schools.com/css/css_intro.asp, or purchase Sams Teach Yourself CSS in 24 Hours (Pearson Education, 2002).
The Bestseller feature is usually similar to the Specials feature (see Figure 7.4). Whereas specials are items you want to promote (typically because of reduced prices or other promotions), bestsellers are products that you sell a lot of—and that’s exactly the reason you want to call your customers’ attention to them. Bestsellers are usually not as important as specials; therefore, their placement is normally not as prominent. Bestsellers can appear in various locations on the home page depending on the design of the store. For most stores, a narrow column along the right side of the home page works well for this purpose. To see an example, go to www.notetools.com.
Figure 7.4. Bestsellers advanced feature.
Setting up the bestsellers is a task with two main parts: identifying and listing the bestsellers, and showing them on the home page. Identifying the bestsellers is very similar to identifying specials. You need a field like the Specials
property of the home page. Because the bestsellers will most likely be displayed on the home page only, you can add a new property called bestseller
of type references
to the home page. To mark an item as a bestseller, simply enter its ID into this new Bestseller box while editing the home page. As in the case of the specials, you can enter the IDs of multiple bestsellers into the Bestsellers box. Multiple IDs must be separated by spaces.
To show the bestsellers, you need a template that will create the thumbnails and links for the bestsellers, and then you need to place this template on the home page. The template that creates the bestseller thumbnails, show-bestsellers
, is listed next. For each bestseller, it shows the thumbnail of the bestseller, the name (or label) of the bestseller, and its price. It also hyperlinks both the thumbnail and the name to the bestseller’s page:
Show-bestsellers ()
TABLE border 0
cellspacing 0
cellpadding 0
width "100%"
TABLE-ROW valign :top
TABLE-CELL align :center
TEXT-STYLE :bold
TEXT "BESTSELLERS"
LINEBREAK number 2
FOR-EACH-OBJECT @bestsellers
FONT size 2
face @text-font
WITH-LINK TO WHEN @template
id
WHEN IF test @icon
then @icon
else @image
IMAGE source RENDER image IF test @icon
then @icon
else @image
max-height WITH-OBJECT :index
@thumb-height
max-width WITH-OBJECT :index
@thumb-width
hspace 3
alt @name
LINEBREAK
FOR-EACH-BUT variable line
sequence LINES IF test NONEMPTY @label
then @label
else @name
last LINEBREAK
TEXT line
WITH= variable price
value OR
@sale-price
@price
WHEN price
LINEBREAK
FONT size 2
color @emphasis-color
face @text-font
TEXT PRICE number ELEMENT position 0
sequence price
currency @currency
LINEBREAK number 2
A number of small details require further explanation:
• Notice how the thumbnail is created. First, if the item has an icon, it is used as the thumbnail; otherwise, it is the image. The maximum size of the thumbnails is determined by the thumb-width
and thumb-height
variables as defined on the home page. That’s what the WITH-OBJECT
:index
business is about. There, you take the value of the thumb-width
and thumb-height
variables from the home page. Without that (if you simply used thumb-width
or thumb-height
), your bestseller list could end up with various thumbnail sizes if either of these variables was overridden for any of the bestsellers.
• The way the hyperlink is created (the WITH-LINK TO...
part) might seem a bit strange, but here is what’s going on: You want to hyperlink to the bestseller only if the bestseller has a page to hyperlink to. Every item in a Yahoo! store that has a page also has a template. Conversely, if an item has no template (if its template is nil
), the item has no page generated for it.
• I use either the label
property (if provided) or the name
property to show the title of the bestseller. That’s what the IF test NONEMPTY @label
expression does. This way, you can have different text appear for the bestseller on the home page than on the bestseller’s own page. This can come handy if the name of the item is too long.
• Finally, you can simplify the way prices are displayed. Show the base of either the sale price or the regular price. Don’t worry about quantity pricing here, although you can change this if you need to show quantity discounts.
Now that you have a way to display the bestseller block, you need to add it to the home page. You can do this by modifying the copy of the home
. template. Where you modify the template depends on the style of your home page: whether it uses top buttons or side buttons. The side button arrangement is easier. In this arrangement, you can simply add a new table cell before the part dealing with RIGHT-MODULES
(this section is at the end of the page-body
template in the old Yahoo! Store Editor, but it is missing from the new editor) and then call your show-bestsellers
template. The entire cell is within a WHEN @bestsellers
block so that you show the bestseller block if there are bestsellers to be shown. The relevant part of the template is listed here:
:side-buttons
TABLE border 0
cellspacing 0
cellpadding 0
TABLE-ROW valign :top
CALL :yourstoreid-side-nav
vnav
TABLE-CELL
FONT size @text-size
face @text-font
WITH= variable wid
value (@page-width - 26) - vnav-wid
CALL :yourstoreid-home-body
nil
nil
wid
WHEN @bestsellers
TABLE-CELL
CALL :show-bestsellers
WHEN @right-modules
TABLE-CELL width 10
SHIM height 1
width 10
TABLE-CELL valign :top
width 150
CALL :yourstoreid-right-modules
@right-modules
If the store has a top navigation bar, adding the bestseller box is a little trickier. In this case, you want to put the entire page inside the left cell of a table, and put the call to show-bestsellers
in the right cell of the same table.
You might have seen online stores that let the customer type a quantity right on the item’s page before clicking the Order button. Although this feature is not readily available in the Yahoo! Store Editor, it is easy to add in RTML (see Figure 7.5).
Figure 7.5. Quantity input box.
The quantity box is a simple text box. Its name makes it work as a quantity box. If you name a text box vwquantity
and submit it to the shopping cart page, the Yahoo! store system takes the value in this box as the order quantity.
The key to add this feature to your store is the template called order
. To add the quantity box, you must modify your copy of this template. Toward the bottom of the order
. template, locate the part that reads as follows:
INPUT type :submit
value @order-text
This RTML expression generates the Order button. You have to add the quantity box before this expression. To begin, click the New button, select INPUT
from the operator list, and click Create. Next, click the INPUT
expression just above the one that creates the Order button. The one to click reads as follows:
INPUT name :vwcatalog
type :hidden
value account
After you have selected this INPUT
expression, click the Paste After button. This inserts the blank INPUT
operator you created earlier right above the Order button. Now click Edit and fill in the parameters as follows:
• For name
, enter :vwquantity
.
• For type
, enter :text
.
• For value
, enter 1
.
• For maxlength
and size
, enter 3
.
Note that the entries for name
and type
have no quotes around them and both begin with a colon. In addition, the number 1
you entered for value
is the default quantity that will appear in the quantity box on your item pages. You might need to change this if another number makes more sense for your store. When you have entered these values, click the Update button. The finished INPUT
expression should look like this:
INPUT name :vwquantity
type :text
value 1
maxlength 3
size 3
Now you have a functioning quantity box next to the Order button. You might want to add a TEXT Quantity
expression just before the box or tweak the appearance a little to suit your particular needs.
You can also change the default drop-down option boxes to radio buttons (see Figure 7.5). The radio button input element does the same thing as the drop-down list: It enables the user to select one of a number of choices. To do this, again modify the Order
. template. Locate the following block in the Order
. template:
else MULTI
TEXT ELEMENT position 0
sequence set
TEXT ": "
SELECT name ELEMENT position 0
sequence set
options ELEMENTS sequence set
first 1
Replace the entire block starting with MULTI
with the following:
CALL :radio-options
set
Because you do not have the radio-options
template, you will need to create it as follows:
Radio-options (set)
WITH= variable name
value ELEMENT position 0
sequence set
TEXT name
TEXT ":"
LINEBREAK
FOR-EACH variable option
sequence ELEMENTS sequence set
first 1
INPUT name name
type :radio
value option
TEXT option
LINEBREAK
These modifications to the Order
.template change all the drop-down options to radio buttons. If you want the option to selectively change the options to radio buttons, you can modify the Order
. template, based on how we did it for the check boxes, to indicate whether you want radio buttons or standard drop-downs. (We leave the details of this change to you as an exercise.)
One additional note: For this to work, you might have to go to Order Form in the Store Manager, scroll down to the bottom, and change the Item Option Validation setting to allow items with unrecognized options. But try it first: If your radio buttons work without that setting, you won’t need to change it.
Figure 7.6. Radio button options.
The Catalog Request feature provided to every Yahoo! store is a great way to collect information about visitors who haven’t made up their minds to actually make a purchase in your store. Those who fill out an online information request form are usually very “hot” leads because they are close to clicking that Order button. The Catalog Request form is not just to request a catalog; you can call it anything that makes sense in your store: More Information, Online Newsletter Signup, and so on. On the Variables page, you can change the Request-text
variable to reflect whatever you use that feature for. Under Order Form in the Store Manager, you can change the title of the Catalog Request form and add your own message. The problem is, there is only one such form and you cannot tell what fields you want to collect. What if you would like a separate sign-up form for a newsletter or another form for those interested in your affiliate program (see Figure 7.7)? The answer is an undocumented CGI script available to all store owners. This script can process any form and email the form’s fields (as filled out by a visitor) to the email address you specify. Here is how you can use it.
Figure 7.7. Free forms (email forms).
Copy the following in the Caption
property of a page where you want the form to appear:
<form method="POST" action="http://store.yahoo.com/cgi-bin/pro-forma">
Your Name: <input type="text" name="Name"><br>
Your Email: <input type="text" name="Email"><br>
<input type="submit" value="Submit">
<input type="hidden" name="owner" value="type your email here">
<input type="hidden" name="newnames-to" value="type your store's Yahoo! ID here">
<input type="hidden" name="continue-url" value="target page">
</form>
For target page
, enter the URL of a page you want to send your visitors after they have filled out the form. If you leave out that entire hidden variable, visitors will be sent to the home page of your store. You can add other fields the same way as Name
and Email
. You can also include drop-down boxes, check boxes, radio buttons, and anything that can be part of a standard HTML form.
Using RTML, you can create a page that automatically lists all the items in your store that are on sale. With this trick, you can add an On Sale Now page to your store without having to manually copy all the sale items into this page.
First, create a new section for the sale items. You can call this section On Sale Now or Sale Items or Clearance Items, or whatever else you think sounds good. After you have created this section, make a note of its ID.
Next, create a custom template called sale-items
, as shown here:
Sale-items ()
YANK element nil
sequence FOR-EACH variable item
sequence WHOLE-CONTENTS
WITH-OBJECT item
WHEN @sale-price
id
After this template has been set up, edit your copy of the page-body
. template. Toward the bottom, you’ll find the following block:
WHEN @contents
WHEN OR
side-im
NONEMPTY @caption
LINEBREAK
CALL :contents.
@contents
wid
LINEBREAK
This template makes use of the WHOLE-CONTENTS
operator. Besides being slow for stores with a large number of pages, WHOLE-CONTENTS
has a minor issue: Pages that use WHOLE-CONTENTS
aren’t flagged automatically for regeneration. This means that if you change prices, for example, even though the on-sale page you set up using the previous example looks right in the editor, after publishing, the on-sale page won’t be updated on the published site. You can fix this in two ways. Before publishing, either edit the on-sale page and, without changing anything, click the Update button, or click Variables and then click Update without changing any variables.
Paste the following after that block, replacing :saleitems
with the ID of your Sale Items section:
WHEN EQUALS value1 id
value2 :saleitems
CALL :contents.
CALL :sale-items
wid
LINEBREAK
Now you have a section that automatically lists all items in your store that are on sale. There is no need to manually add or remove items from this page.
Related items and cross-sells are a way of suggesting related items (see Figure 7.8). Until recently, the Yahoo! store cross-sell feature was rather limited. You could create some families by entering their names in the Families
variable and assign items to these preset families. Then, when a customer placed one of these items in a shopping cart, the related items were listed as hyperlinks at the bottom of the shopping cart page. This was quite limited and uninteresting.
Figure 7.8. Related Items feature.
The current cross-sell functionality is a lot more complex and is now located in the Store Manager, in the Promote section. Here, you can set up complex cross-sell rules to offer discounts, for example. When such an item is placed in the shopping cart, the item’s thumbnail is shown in addition to the hyperlink. Additionally, if a discount is offered, it is mentioned on that page, making the cross-sell feature more useful to the merchant and more interesting to the customer.
One feature still missing from this, however, is the capability to show related items on the item pages themselves. Luckily, this limitation—like many others—can be solved using RTML.
Like the bestsellers, the cross-sell has two main parts: identifying the related items and showing them on the page.
Find-family ()
YANK element id
sequence YANK element nil
sequence WITH= variable family
value @family
WHEN AND
family
NOT EQUALS value1 family
value2 :none
FOR-EACH-OBJECT WHOLE-CONTENTS
WHEN EQUALS value1 @family
value2 family
id
The first template, Find-family
, returns a list of all the items that are assigned to the same family as the current item. Because you don’t need the current item (it is definitely part of its own family), you use the YANK
operator to pull its ID of the list of the family members.
The following YANK
expression removes all nils
from the list of family members. You need that because the FOR-EACH-OBJECT
block at the end of the template produces a list that has as many elements as there are objects in the store. For each object that is in the same family as the current page, this list has the ID of the object. For all other objects, the list contains nil
.
To display the elements of the family, you could use the same approach as with the bestsellers. In fact, you could use the exact same template, Show-bestsellers
, with the only change being replacing the variable @bestsellers
with CALL:find-family
(and perhaps changing the title of Bestsellers
to @cross-sell-text
). However, I would like to show a slightly different method.
In this method, you use a built-in template called Contents
that is used to show the contents of a section or an item. This template comes in handy because you want your cross-sells to show thumbnails and links just like the regular content. Contents
takes two parameters: a list of IDs and a width. For your cross-sells, the list of IDs consists of the IDs of the family members.
The most convenient place to call this template is in page-body
. At the very end of that template, it already makes a call to yourstoreid-contents
(where yourstoreid
is the Yahoo! ID of your store) to handle the regular contents of the page. To show your cross-sells right after that, paste the following after the WHEN @contents
expression:
WHEN @contents
WHEN OR
side-im
NONEMPTY @caption
LINEBREAK
CALL :yourstoreid-contents
@contents
wid
LINEBREAK
WITH= variable family
Value CALL :find-family
WHEN family
LINEBREAK
TEXT-STYLE :bold
TEXT @cross-sell-text
LINEBREAK
CALL :yourstoreid-contents
family
wid
In this example, the variable cross-sell-text
serves as a heading for the cross-sell section, but you could get creative and format it more nicely, perhaps using a nice banner or graphical letters. The great thing about this small feature is that it is completely automatic. From now on, all you have to do is define your families (using the Families
variable); as soon as you have at least two items in a family, they will be shown at the bottom of the item page, formatted the same way as your regular contents. (To add an item to a family, edit the item and select the appropriate family in the Family drop-down list.)
One final note about the previous example: If you want to show the cross-sells in multiple columns as shown in “Error! Reference source not found.” using the contents
template, you also need to click Config and change the Leaf-columns
variable from 1
to the number of columns you need.
Using WHOLE-CONTENTS
is quite slow, especially in stores with a large number of pages. An alternate solution is not to use the Family feature at all, but rather add a custom property called related-items
to your items. This new property should be set up as type references
. Then, for any item, you can enter the IDs of the related products into the related-items
property. To make this work, simply change the find-family
template to this:
Find-family ()
OR
@related-items
YANK element id
sequence YANK element nil
sequence WITH= variable family
value @family
WHEN AND
family
NOT EQUALS value1 family
value2 :none
FOR-EACH-OBJECT WHOLE-CONTENTS
WHEN EQUALS value1 @family
value2 family
id
As we discussed earlier, a Yahoo! store always creates an image for the name of the item or section. Although a Yahoo! store also generates an “alt text” for these images, pictures are no match for text when it comes to search engine optimization (SEO). Although the Yahoo! Store Editor does not provide you with any way to show item and section names as text (instead of automatically generated images), it is quite easy to tweak a template to give yourself this feature.
The key is the template called head
(or your copy of it, that is.) This template is used to create the heading for any item or section page (it’s also used by the info and privacy policy pages). Before modifying this template, create a new template called show-title
. We use this template to display the name of the page in text. show-title
is listed here:
Show-title (title)
FONT size 3
color @display-text-color
face @text-font
TEXT-STYLE :bold
FOR-EACH variable line
sequence LINES title
TEXT line
LINEBREAK
LINEBREAK
Feel free to modify this template to suit your needs. The example uses text size 3 for the heading here; the same color is set for the display title (the graphic titles are replaced here). When you have this template, bring up your copy of the template called head
. In this template, locate the following expression (you will find it in three places):
IMAGE source textim
alt text
When you have located these expressions, replace them with the following:
CALL :show-title
text
This does the trick. The template show-title
preserves line breaks you might have in the headline
field just like the generated graphical headings would. However, whereas the generated graphic headings don’t let you use any HTML tags in the name or headline parameters, show-title
has no such problems because it deals with text. When you have these modifications in place, for example, you can include a trademark sign next to a trademark by entering this into the headline
field:
My Trademarked Item<sup><small>TM</small></sup>
If you tried doing the same without these template changes, you would end up with something like this on your page:
My Trademarked ItemTM
You can do other things, including changing the color of certain words in the page heading by simply including the <font color=...>...</font>
tags in the headlines
field (you should never include HTML tags in the name
field. name
is used as the title tag of the page and is also used by Yahoo! shopping’s search engine.)
Being able to format those headlines any way you want is certainly a plus, but the most you can gain from not having graphical headlines is better search engine placement. Remember, search engines can’t see images, but they can read text. In fact, that’s all they do.
Keeping the customer up-to-date on the status of an order is an integral part of good customer service. Yahoo! store makes it easy to keep your customers informed about order status. Simply log into the Store Manager and click Shipment Status in the Order Settings column to enable and configure the store’s shipment status-reporting function. Of course, this feature by itself doesn’t do any good; you need to update the status of your orders either manually (by opening the order in the Store Manager and changing the shipping status) or automatically (see http://store.yahoo.com/vw/uptracstatau.html).
When shipment tracking is enabled, each time you update the status of an order (say, the order was shipped or will ship in one day or two days), Yahoo! automatically sends a status update email to the customer (the email is somewhat configurable in the Store Manager under Shipment Status). However, customers sometimes miss these emails; the messages can be ignored or these days even caught by some spam filters. When a customer wants to find out about the status of an order, chances are, the customer goes to your store and then goes to the Info page to look up your customer service email or phone number. Why not make it easy for customers and provide an order-tracking form that will save time and customer support calls or emails (see Figure 7.9). Setting this up is rather simple, and you can do this with no RTML or even HTML knowledge.
Figure 7.9. Shipment status form.
First, decide where you want the order-tracking form to reside. As mentioned earlier, an obvious place for it is on the Info page, but you might want to put it on a separate page and perhaps add an Order Status link to the navigation bar. In this example, we show you how to add the order-tracking form to the Info page.
Edit the info page, and wherever you want the order-tracking box to appear (in the Greeting
or Info
fields), enter the following HTML (but replace yourstoreid
with the Yahoo! ID of your own store):
<form name="vw-form" method="post"
action="https://order.store.yahoo.com/cgi-bin/wg-order-status">
Enter Your Order ID<br>
<input name="oid" type="text" size="20" value="yourstoreid-">
<input type="submit" value="Show">
</form>
The HTML will produce a form on your Info page. When a customer enters the order number in this form and clicks the Show button, he or she is sent to Yahoo!’s built-in order tracking screen. If the customer is logged in with a Yahoo! ID, the order status is displayed immediately. If the customer has no Yahoo! ID, unfortunately, the only message that customer gets is that the order has been placed. In this case, you will get that customer service call or email after all. For an example of what such an order-tracking form looks like, go to www.efunctional.com.
If these tips and tricks were useful and you would like to learn and implement additional features, consider purchasing the book Yahoo! Store Tips and Tricks (Y-Times Publications, 2005), available at www.ytimes.com. The book contains more than 100 tips and tricks. If you need assistance or would rather outsource the implementation of these advanced features, contact Monitus (www.monitus.com).
Now that you’ve learn how to implement a handful of advanced features yourself, in the next chapter, you’ll learn how to design your customized Yahoo! store to sell.