Yahoo! Store Manage My Services
Merchant Resources > Store Guide > Store Reference Manual > Graphic Design Tricks
Merchant Resources
  System Status
  Merchant Newsletter
Learn More
  Getting Started Guide
  Guides and Resources
  Store Help
Related Services
 Designer Directory
  Yahoo! Shopping
  Commission Junction
  Marketing Partners
Graphic Design Tricks

This section describes some of the advanced graphic design tricks possible with Yahoo! Store. These techniques require a good deal more work, so we recommend them only for experienced Yahoo! Store users.

By default, Yahoo! Store puts your navigation buttons down the side of the page. With a little more work you can have them at the top instead. Top buttons offer more opportunities to make design mistakes, however, so we only recommend this approach for users with design experience.

Start by switching the Page-format from Side-buttons to Top-buttons. Some other things will change at the same time. Instead of being included in the button bar, the contents of your site will appear on the front page.

If you really want buttons for each section at the top of the page, you can get them back by adding Contents to the Nav-buttons. But that would probably make the page too wide.

With top buttons, the page width is set by the width of the button bar. So you have to juggle Button-font, Button-font-size, and Button-padding to get the width you want. (Aim for 500 to 600 pixels.)

With top-buttons, you also have to think more about the design of your front page. The contents of your site now must become the body of your front page instead of being stashed in the button bar. So you will want to change the default values of Contents-elements and Contents-format on the front page to make it look good.

If you use a Home-image, you will want one with different proportions: We recommend an image 35-45 pixels high and 150-200 pixels wide, including about 15-20 pixels of empty space on the right and left sides.

If you have specials, you will want to think about where to put them now that they are a less important element of the front page.

The specials on your front page can look better if they are rendered entirely as gifs. To get this effect, edit your front page and switch Specials-format to As-thumbnails.

This format is more demanding, because instead of lining up nicely in columns, the gifs just get packed next to one another. This will usually look ugly unless you take extra care to make it look good.

To start with, you only want one row of specials if they are rendered as gifs. This usually means five at the most. However many you have, you will probably need to edit their text to get them the right width.

The text in a special gif comes from the Name field of the item, unless you put something in its Label field, in which case that is used instead. Unless your names are really short, you will want to use the Label field, because you can put multiple lines of text there. That makes each thumbnail narrower, allowing you to fit more across the page. If you don't use the Label field, your specials will tend to spread out too much.

As a general rule, you have to adjust the text in the Label field carefully to get your specials to line up well.

Some variables you might want to change are the Label-color, Label-font, and Label-font-size, which control the text in the special thumbnail. The color of the price is determined by the Emphasis-color.

The images in a site are what give it a distinctive character, and the button bar, appearing on every page, is especially important.

The way to give your site a really branded look is to use your own gifs in the button bar. It's easy, and very much worth the time. If you make buttons with a program like Photoshop, then upload them into your site, Yahoo! Store will weld them into a single image.

On the variables page you'll find a number of variables with names like Up-image, Next-image, etc. If you upload an image for one of these, it can replace the corresponding button generated for you by Yahoo! Store.

For individual pages that are listed in the button bar, upload an image as the Icon of each.

After you've uploaded images for all your buttons, switch the variable Button-style from Text to Icon, and the button bar will be made from the images you supplied.

If any images are missing, Yahoo! Store will generate something to fill their places, but this is only intended as a stop-gap while you are working on your site.