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 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
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
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
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.