The store banner: 1920x500, and the one job it actually has

The store banner is the only piece of a brand pack that sits directly above money. Everything else in the pack is trying to get somebody to join. This one is seen by people who have already joined, already decided they like the place, and are now looking at a list of prices.

That changes what it should contain, and it is the reason a store banner that is just the loading screen artwork at a different ratio tends to underperform the effort that went into it.

The shape, and what the page does to it

1920x500 is a 3.84:1 strip. On a desktop window it is shown roughly at its native width, under the store's own navigation. On narrower windows the store scales it down rather than cropping it vertically, so the ratio is preserved and everything simply gets smaller, which is the failure mode worth designing against.

The last row is the one that decides the design. At 100 pixels tall, a banner holds a mark and perhaps three words. Anything else on it is decoration, and decoration that nobody can resolve is noise.

What belongs on it

A store banner has one job: confirm, in under a second, that the visitor is in the right place and that the place is legitimate. It is not trying to persuade anybody of anything, because they arrived already persuaded, and a banner that tries to sell reads as a banner that is trying too hard.

• The mark and the server name, at a size that resolves at 380 pixels wide.
• The same scene family as the rest of the pack, so the page feels like the server rather than like a payment processor.
• Nothing else.

Specifically, the things that routinely go on store banners and should not: a list of what is for sale, which is directly beneath it in a form the page renders better; a discount percentage, which goes stale and then quietly lies to people; a Discord invite, which they already used to get here; and the words premium, exclusive or VIP, which the price list is about to say far more credibly.

Why it is not the loading screen

The two files are both wide, both dark, both built from the same scene, and they are doing opposite jobs.

The loading screen can afford atmosphere because the viewer has nothing else to do. The store banner cannot, because the viewer is scrolling past it to look at prices, and anything that delays that is working against the page.

The trust problem

This is the part most servers do not think about. A store page is asking somebody to put card details into a site they have never used, for a game server run by people they know only from a Discord. A scruffy banner is read, correctly, as a signal about how carefully the rest is run.

The things that read as careless cost nothing to avoid:

• A stretched image. Anything not at 3.84:1 is distorted by the page and it is immediately visible on faces and circles.
• A compression-damaged file. A banner saved at low quality shows blocking in the dark areas, which is where server artwork usually lives.
• A mark that does not match the Discord icon. If the two differ, the visitor has to decide whether they are in the right place.
• Visible template text. A placeholder tagline left in is the single loudest signal available.

The last one is more common than it should be, because store pages get set up once, in a hurry, by whoever had the Tebex login that evening.

Consistency with the rest of the pack

The store is usually the last surface a server sets up and the one most likely to drift from everything else, because it is on a different platform with a different editor and it tends to be done months later.

1. The mark is the same file, not a re-export. Any difference in weight or spacing is visible when somebody has the Discord open in another tab.
2. The accent colour is the same hex value, and it is worth checking rather than remembering. Store themes often have their own accent field that defaults to something else entirely.
3. The scene is from the same family. Not the same image, which would be dull, but recognisably the same world.
4. The name is set in the same companion face used for the other small settings, because on a phone this banner is a small setting.

Where a store theme offers a background colour behind the banner, set it to the darkest colour in the artwork rather than leaving it black or white. It removes the seam between the image and the page on windows wider than the banner.

Animation, and why not here

Some store themes accept an animated header. It is almost always the wrong choice. Motion above a price list pulls attention upward exactly when the visitor is trying to compare two packages, and unlike a loading screen there is no waiting period for it to fill.

There is also a practical cost: an animated banner is a much larger file at the top of a page that people open on mobile data, and the store page is the one page where a slow first paint has a direct price.

The package images underneath

The banner is one file and the page below it usually wants six or eight more: a small image per package. These are where a store page is actually won or lost, because they are what somebody looks at while deciding, and they are almost always neglected.

They are square or close to it, they are shown small, and they are shown in a grid, which means they are judged against each other rather than on their own. Two rules follow from that.

• They must be visually consistent as a set. Same crop, same lighting, same treatment. A grid where one tile is a screenshot, one is a render and one is a logo on a gradient reads as unfinished.
• They must be distinguishable from each other at a glance. If three tiers share one image, the grid is telling the visitor that the difference between them is only the price.

The cheapest version that works: the same scene, the same framing, one element changed per tier, and the tier name set in the legible companion face. It takes one composition and seven variations rather than seven designs, and the set reads as deliberate.

Questions people actually ask

What size should the banner actually be uploaded at?

1920x500. It is displayed smaller than that on every window, which is the point: the file is reduced once by the browser rather than scaled up. Uploading something larger gains nothing and costs load time, and uploading something smaller is visible immediately on a desktop screen.

Can the store banner carry a sale?

It can, and it is worth doing as a separate file that is swapped in and out rather than as the permanent banner. A banner reading twenty per cent off that has been there for eight months is worse than no banner, because it tells the visitor the store is unattended.

Does the banner need to mention the game?

No. Somebody on your store already knows what they are buying for. Naming the game on a store header uses the most valuable space on the page to tell the visitor something they knew before they clicked.