Simple trick to speed up your Yahoo! Store pages

If your store uses images or other files stored in the "Files" library, there is an easy trick to improve the response time of those files - and make your pages load faster.

Typically you reference files from the library using this relative URL:

/lib/yourstoreid/filename

where you replace yourstoreid with the Yahoo account ID of your store. This is generally fine, because the Store is smart enough to expand this to the actual location of the file, which is at

http://lib.store.yahoo.net/lib/yourstoreid/filename

What I often see in stores is that the store operator enters things like this:

http://www.yourdomainname.com/lib/yourstoreid/filename

or

http://lib.store.yahoo.com/lib/yourstoreid/filename

What's wrong with that? Well, Yahoo! Store is still smart enough to find the correct file for you, but it doesn't come cheap. What happens is that the Yahoo! Store server does a redirect on these URLs so that they reference the file correctly from the lib.store.yahoo.net server. In a test I've done, these redirects generally took a little over 1,000 milliseconds - or one second. Now imagine if you had 10 or 20 such references in a page? Or inside a css file. It would slow your pages down and completely unnecessarily.

This can be even more pronounced on your checkout pages, where everything is served over an already slower SSL connection (yes, SSL is always slower than regular, unsecure HTTP://), and if you have relative URLs such as /lib/yourstoreid/... in your checkout pages, those will always be redirected. The fix is to use the absolute URL https://lib.store.yahoo.net/lib/yourstoreid/... in your checkout pages, and http://lib.store.yahoo.net/lib/yourstoreid/... on the regular store editor pages. Be sure to do this not only in your HTML source but in all JavaScript and CSS files you use as well.

iCapture Instant Callback

Increase conversion rates by allowing visitors to ask you to call them. This unique tool is better than free to you because it’s supported by contextually appropriate video advertising where the synchronized sound is transmitted over the phone (no popups!) and you get a share of ad revenues. Get it now for double revenue share! This a very cool CRM tool available only from YTimes partner AdGorillai.

Increasing conversion rates at your Yahoo! Store is one of the best ways to increase your revenues. One of the best ways to increase conversion rates is to make it as easy as possible for visitors to get in touch with you immediately. iCapture push2call technology is a great way to do that. It’s an instant callback technology with an impressive, unique, and money-making twist.

Traditional instant callback technology is simple and intuitive. Rather than merely providing a phone number for a potential customer to use to call you, you offer to call her instead. She submits a phone number, and her phone rings. Then your phone rings, and when you pick up, you’re connected directly to her to close the sale.

The iCapture model is even better. When a consumer visiting your site can’t quite find what she’s looking for, or would prefer to conduct credit card transactions over the phone instead of the Internet, she clicks your iCapture button. She enters her phone number, and her phone rings. Right after she answers the phone, the consumer sees a context-appropriate, full motion video advertisement begin to play right in her web browser. This is not a popup. The synchronized audio for that ad is presented only over the telephone, so its not intrusive or loud. In fact, it’s really a pretty cool experience. Meanwhile, the iCapture server is calling your customer service center. When your CSR answers, iCapture makes a fully customizable announcement, such as “this is an iCapture call; please introduce yourself to the customer after the tone.” The tone plays as soon as the short video ends (typically 15 to 30 seconds), then your CSR says “Hello, this is John; how can I help you?”

Context-appropriate advertising means ads that make sense on your website. There will be no ads for your competitors. If you sell cookware, for instance, the message may be about a given brand of gourmet foods, for instance. If you sell sunglasses, the video may showcase a particular brand that you carry, but the message is paid for by the manufacturer of that brand. You can even place some ads for yourself in the rotation, free!

The best part is that instead of you paying to use the iCapture technology, you get paid to use it. Advertisers pay to present video to your customers because they know those people are in the market for their products right at that very time. If you sell Oakley products, for instance, as well as other sunglasses, then Rawlings and Oakley have a great opportunity to push their products over their competitors products. You get a piece of that advertising revenue in addition to the assistance with closing the sale and satisfying your customers.

As this is a new offering for Yahoo! Stores, moreover, for a limited time and only through Y-Times you can earn double the ordinary revenue share. Try it through a demo page (nobody will call you back. Click the 'Have Questions' button in the top right at http://209.177.131.40/push2call/demos/normal/cellular/?r=ytimes) or contact sgilmartin@adgorilla.com or 303.522.3432.

Catalog Request

You may have noticed that both the Catalog Request and Catalog Request Confirmation pages are now customizable through Checkout Manager. If you have already customized your Checkout Manager pages (or had someone customize them for you), and would like to have the same custom look applied to your Catalog Request and Catalog Request Confirmation forms, all you have to do is this:

1. Go into Checkout Manager, click Page Configuration and then look at how your Shipping, Billing, Review, etc. pages are set up; in particular, check if you have the Top Navigation and Left Navigation enabled.
   
   
2. Click over to the Catalog Request tab, and make sure you have the same settings next to Top Navigation and Left Navigation. Don't forget to hit Save or Save & Preview, otherwise your changes will be lost.
   
   
3. Click over to the Catalog Request Confirmation tab and there too, make sure you have the same settings next to Top Navigation and Left Navigation (so if those are enabled on your other checkout pages, enable them here too.) Again, don't forget to hit Save.
   
   
4. Click Store Manager then publish your order settings.

If you haven't enabled Checkout Manager or haven't customized your checkout manager pages, then of course this doesn't apply to you. If you are interested in having your checkout migrated to Checkout Manager, or having your Checkout Manager pages customized so all your checkout pages share the same look and feel as the rest of your store, read about our Yahoo! Store Checkout Customization service.

Yahoo! Cross-sell bug

In a recent release, Yahoo! made it possible to show cross-sells right on the product pages. Coupled with their auto-suggest feature (where products are automatically recommended based on past shopping history) this is a great conversion feature. There is, however, a minor bug in the way these on-page cross-sells are implemented. Here is the scoop:

As you may know, you can add the yahoo-generated cross-sells to your item pages by inserting <div id="ys_relatedItems"></div> anywhere in your pages' text or template. The bug occurs - in Internet Explorer only - if this ys_relatedItems div is the last child of its parent. In that case, and again, only in Internet Explorer, no cross-sell items will show up on the page.

In layman's terms, this means that if you have a closing tag after <div id="ys_relatedItems</div>, then this bug will cause your cross-sells not to show. So, for example, if you have a table and inside it the last element is your ys_relatedItems div, then this would trigger the bug.

Yahoo! Engineering is aware of the bug and it will be fixed in the next maintenance release. In the meantime, though, there is a very easy work-around: simply add something after your ys_relatedItems div so that it's not the last child of its parent. An empty div, for example, will do the trick:

<div id="ys_relatedItems"></div><div></div>

Choosing your image type is now possible

With a recent feature release, Yahoo! Store finally gave us the option to choose the format in which images are generated on the template-based store editor pages. Previously, unless you displayed an image unaltered (meaning in its original size, and without manipulating it with the RENDER or FUSE operator), the Yahoo! Store editor converted images into GIFs no matter what. What is wrong with that? Well, the GIF format, while small in file size, is best for graphics or clip art, and not for photographic images. The reason lies with the fact that GIF can only display up to 256 colors. With the new release, we can now choose among GIF, JPEG, or PNG.

JPEG is generally better for photos, but JPEG uses what is called a "lossy" compression - meaning that in order to reduce file size, the image is compressed by merging like pixels thereby reducing the image quality to varying degrees.

PNG is a relatively new format and is generally far superior to both GIF and JPEG. PNG uses "lossless" compression much like GIF, however, unlike GIF, a PNG image supports millions of colors along with transparency (support for transparency is spotty at best in Internet Explorer prior to 7.0. There are workarounds for earlier version of IE, here is one: http://www.howtocreate.co.uk/alpha.html. )

On the Variables page, you will find two variables that deal with image types:

uploaded-img-default-type: this setting is what controls the images you upload (such as your product images.) Now that we have the option to change this, I routinely set this variable to JPEG. I tried PNG as well, but in all my tests PNG resulted in a larger file than JPEG, and the JPEG version was of good enough quality. You may just have to try it for yourself, and if you find that JPEG doesn't give you as good a quality as PNG, then go with PNG. And while sometimes GIF is ok, because it only supports 256 colors, it will probably hardly ever give you a nice outcome.

generated-img-default-type: this setting controls the generation of other, non-uploaded images such as buttons and text. Because these images are typically not photographic, GIF is a good choice, and since it is the default, you can leave it unchanged.

A Catch...

Here is something I've discovered through trial and error: while all "regular" variables take effect immediately after changing their values (and hitting Update on the Variables page), these two new variables do not... If you change uploaded-img-default-type from GIF to JPEG for example, you can wait in vain if you expect your product shots to change too... Changing these variables only affect images uploaded AFTER you changed the variables' setting. For any of your existing photos you will have to upload them once again to see them change from GIF to JPEG or PNG. For larger stores this may not be feasible unless you have all your existing images available and named by the ID of the corresponding product. In such a case, you can put all the images into a zip file, click on "Controls" in the store editor, and upload them under "Multiple-Image Upolad".

And Another Catch:

If you are using the Version 2 templates and change uploaded-img-default-type to JPEG or PNG, you may notice a gray border by your images on your section pages. This is a minor bug that was introduced by the two new variables. To fix it, you will have to be sure that wherever you use the FUSE or RENDER operator with a margin, you also specify :transparent or white for background. In particular, if in Editor V2, you should edit your copy of the contents-table template, find the only IMAGE expression in it, and change the background-color attribute of the FUSE operator there from transparent to :transparent (notice the missing colon.)

Similarly, in your copy of the inset-image template, change the same transparent value to :transparent.

Checkout Manager Problem and temporary solution

If you are using checkout manager, I'm sure you are aware of today's service interruption at Yahoo! Store. Basically, stores that are using the new Checkout Manager have a major capacity issue where customers either have long waits during checkout, or experience timeouts, error messages or other interruptions. While Yahoo's engineers have been working all day to fix the problem, here is a quick temporary solution you can probably apply to your store, if your store is affected:

1. Log into your Store Manager
2. Click on "Checkout Manager"
3. Click on "Disable Checkout Manager".
4. Read the warning and disable it anyway.
5. Back in the "Store Manager", click "Publish" under "Order Settings".
6. Go to the store editor, hit "Variables", click "Update" and publish the store.
   

At this point, your store's checkout will be reverted to the "old" checkout, which still works fine. A couple of notes:

1. If your store normally takes an unusually long time to publish, you may not want to do any of this. I have some clients whose stores take over 8 hours to publish. In that case, chances are there will be a solution by the time the publish completes.
   
2. If your store is based on the new Version 3.0 editor, then you cannot disable checkout manager (you will not see a Disable Checkout Manager link inside Checkout Manager.) Unfortunately in this case you will just have to wait until the problem is fixed.
3. Because Paypal integration is only available in Checkout Manager, switching back to the "old" checkout will also mean that during that time you won't be able to accept Paypal during checkout.
4. CVV verification is also not supported by the old checkout.
5. If you are using Monitus.net's Google Analytics Connector, it will also not collect conversion information until the Checkout Manager is fixed and you re-enable it. Monitus's tool only works with Checkout Manager.
6. Any customizations you may have had in Checkout Manager will be preserved, so once the problem is fixed, you can go back to Checkout Manager and re-enable it.

Istvan Siposs
Y-Times

How to create clean and efficient CSS

In a typical workday, I deal with dozens of yahoo stores and very often I have to tweak, fix, or change CSS used by these stores. While some stores have very clean and easy to follow style sheets or CSS definitions, the vast majority of stores I've seen seem to include complete hack jobs, style sheets put together completely haphazardly, or as an afterthought. While working in such a store, the idea came to me to turn my gripes into a post. So the following is my list of dos and don'ts of good CSS or style design.

1. Externalize your style sheets. This means to save your style sheets into one or more css files, and link to them using the <link rel="stylesheet" type="text/css" href="/lib/yourstoreid/yourstyle.css"> notation, or in Editor V3.0, you can use the LINK operator.

2. Combine your style sheets into as few files as possible. Nothing worse than trying to wade through 6, 8, 10 or more different style sheets to find the color of a link for example. If you must use multiple style sheets, at least give them meaningful names. Style1.css, style2.css, mystyles.css, etc. are NOT meaningful. Item.css, section.css, home.css ARE meaningful.

3. If you are using Editor V3.0, you can put your own CSS stuff in the css-edits.css file. You can find it on the “Contents” page.

4. Avoid using inline CSS, that is, putting styling in the style attribute of tags, especially within RTML. Imagine trying to find something like a “style: font-size: 20px” inside one of the store templates if you don't know where it is...

5. Use IDs for elements you know you will only have one. For example, chances are you will only have a single left navigation, so give it an ID, not a class. For instance, <div id="navbar"> ... </div>. Use classes for similar things of which there are more than one on the page.

6. Don't repeat classes without a purpose. So many times I've seen navigation links like this:

<a class="nav" href="index.html">Home</a>
<a class="nav" href="info.html">Info</a>
<a class="nav" href="contents.html">Contents</a>

Instead, do something like this:

<div id="navlinks">
<a href="index.html">Home</a>
<a href="info.html">Info</a>
<a href="contents.html">Contents</a>
</div>

You can now easily define the styles for these links like this:

#navlinks a:link, #navlinks a:visited { ... }
#navlinks a:hover { ... }

7. Start from top to bottom. Define the main styles first, and refine them as you get specific. For example, define your default font like this:
body, * { font-family: arial, Helvetica,sans-serif; font-size: 10pt }
Then, as you define your other elements, you won't have to define the font again, only if you needed to override one or more of the global styles (like font-size, for example).

8. This is related to the previous point: don't redefine the same styles more than once. If you defined your default font to be Arial, don't define it again for, say the <a> tags. This makes things complicated. Remember, CSS was meant to make life easier.

9. Don't use !important, only if you absolutely must. I often see people use !important to fix something, but it's a lazy way of fixing styles. True, if you slap !important on a style definition, it will take precedence over anything else defined for that style up to that point. But once you have your style sheet or style sheets littered with !important lines, trying to fix THAT later can be a nightmare.

10. Don't use chained styles with IDs, for example: #main #maintable #navbar. IDs are unique by definition, so it's perfectly enough to just reference the ID by itself. When you chain IDs like in the above example, you are establishing a stronger rule that says, your style should only apply if #navbar is somewhere within #maintable, and #maintable is somewhere within #main.