# Layout and colors

In **Customization > Store Appearance** you decide how the store looks to players:
the layout, the logo, the home page, the widgets and the colors. Changing the
layout does not touch products, orders or texts, so you can try things freely.

![The Layout tab: the builder, the code theme and the ready layouts](shots/appearance-layout.webp)

## The four ready layouts

All of them are live on example stores. Open them and browse to see how they look.

### Classic

Dark, with the background image filling the opening screen and the widgets next to
the news. See it at [reinopixel.hystore.com.br](https://reinopixel.hystore.com.br).

![The Classic layout on the Reino Pixel example store](shots/appearance-classic.webp)

### Aurora

Light or dark, with a gradient band in your color, servers in a carousel, a ranking
with player skins and a Discord card in the footer. See it at
[vilabloco.hystore.com.br](https://vilabloco.hystore.com.br).

![The Aurora layout on the Vila Bloco example store](shots/appearance-aurora.webp)

### Celeste

Light or dark, with a side menu over a sky of pixel clouds, a rotating offers banner,
server and category tabs, product search and raised buttons. See it at
[ilhasdoceu.hystore.com.br](https://ilhasdoceu.hystore.com.br).

![The Celeste layout on the Ilhas do Céu example store](shots/appearance-celeste.webp)

On Celeste you can change the background around the store, on the **Layout
background** card: **Brand color** (the sky follows the primary color), **Custom
color** or **Image** (JPG, PNG or WebP up to 5 MB, 1920x1080 recommended). The **Pixel
clouds** switch turns the clouds on or off. On a phone, the store fills the screen and
the background does not show.

### Prisma

Light or dark, with the look of a digital product store: a prominent search, a
featured product on the side, a guarantees strip, big covers, a catalog with side
filters and a fixed purchase card on the product page. It also works for game stores.
See it at [estudiovoxel.hystore.com.br](https://estudiovoxel.hystore.com.br).

![The Prisma layout on the Estúdio Voxel example store](shots/appearance-prisma.webp)

## Change the layout

1. In **Customization > Store Appearance**, open the **Layout** tab.
2. Click the layout you want. Check **Use the colors suggested by this layout** so the
   primary, accent and icon colors become its own.
3. On Aurora, Celeste and Prisma, pick whether the store opens in light or dark mode.
   The player can switch with the sun and moon button, and their choice is kept in the
   browser.
4. Click **Save layout**.

> [!TIP]
> Want to change more than the ready layouts allow? The **Custom** layout is built in
> the [Builder](/en/appearance/builder/), with no code. For full control, with your
> code or your AI, use the [Code theme](/en/code-theme/). Aurora, Celeste and Prisma
> also exist as code themes.

## Logo and favicon

On the **Logo & Favicon** tab, upload:

- the **logo**: PNG with a transparent background, around 200x60 px, up to 2 MB;
- the **favicon**, the browser tab icon: 32x32 or 64x64 px, up to 512 KB.

![The Logo and Favicon tab](shots/appearance-branding.webp)

## Home page

The **HomePage** tab holds the title, the subtitle, the background image (1920x1080,
up to 5 MB), the server IP and what to show: status, IP, players online and top buyer.

![The HomePage tab: texts, background image and what to show](shots/appearance-hero.webp)

## Page widgets

The **Widgets** tab holds the Discord widget (with the server ID) and the buyer
rankings. Analytics, advertising and support tools are on another screen; see
[Widgets](/en/appearance/widgets/).

## Colors

On the **Colors** tab, click the square of each item to pick its color; blank uses the
default color. On Aurora, Celeste and Prisma, the tab shows only the brand colors,
because background, cards and text follow light or dark mode.

![The Colors tab of the appearance screen](shots/appearance-colors.webp)