Creating a Custom Look for Your Yahoo! Store with Icon Buttons

Yahoo! Store gives you some very cool options using Icon buttons to get a custom look for your store without ever touching RTML. First, you build your store with standard navigation buttons and then use that layout as the foundation for a design using custom Icon buttons. It doesn't matter whether you use top or side buttons.

Take a screen shot of an existing Yahoo! Store and build a custom façade right on top of the foundation with your graphics software. After the design is complete in your graphics software, all you do is save it as a GIF file, reopen it, and chop up the buttons for each Contents and Function button. Then upload the images to the Icon fields for each section and Function button and switch the Variable Button-style to Icon, and you're all done.

Custom Function buttons

You can create and upload a custom graphic to each Function button on the Variables page, including Up-image, Next-image, Show-order-image, Home-image, Info-image, Privacypolicy-image, Help-image, Search-image, Index-image, Download-image, Register-image, Request-image, Email-image, and Mall-image.

Custom Contents buttons

You can also create and upload custom graphics for each Contents button for your custom Icon navigation bar. Simply upload the custom Icon button to the Icon field on each top-level section on your home page. Before creating a custom look with eye-popping Icons, consider these pearls of wisdom:

• When you select Icon as the Button-style, Yahoo! Store automatically puts the Icon for that section where the button goes. If you don't upload an image to the Icon field on a section, the Store Editor places the thumbnail of the image for that section, which can look really strange.

• If the section has no image uploaded to the Image or Icon field, then the Store Editor centers the text in the name field just like a flat-looking text button.

When you use Icon buttons, you really need to create custom graphics that fit the navigation bar and upload them to the Icon field for each section, or your store will look really weird.

Making custom icons

Creating custom icons can be kind of complicated. All your buttons have to line up just right. Before you start designing buttons, figure out exactly how much screen real estate you're willing to give up for your navigation. Your navigation needs to be large enough to be easy to use, but no larger. Make your Icon buttons around 50 to 75 pixels tall, and make sure that the total width of the Nav-bar is somewhere between 750 and 780 pixels. Sometimes overly ambitious custom navigation pushes the Order button below the first screen shot on product pages, which is bad!

Take a screen shot of your site with simple text buttons and design custom Icon buttons on top of those text buttons. You can use Paintshop Pro, which is a poor man's version of Adobe Photoshop. Create a single GIF image, compress the heck out of it, chop it up into the various Contents and Function buttons, and then upload it.

Most shoppers really need to be able to do only three things: browse back to the home page, read up on your shipping information page, and then finally, get back to their Shopping Cart so that they can check out. The Store Editor makes it easy to add the buttons you want and make them look they way you want without knowing a lick of HTML.

dummies

Source:http://www.dummies.com/how-to/content/creating-a-custom-look-for-your-yahoo-store-with-i.html