# Diseño y colores

En **Personalización > Apariencia de la Tienda** decides cómo ven la tienda los
jugadores: el diseño, el logo, la página principal, los widgets y los colores. Cambiar
el diseño no toca productos, pedidos ni textos, así que puedes probar sin miedo.

![La pestaña Diseño: el constructor, el tema en código y los diseños listos](shots/appearance-layout.webp)

## Los cuatro diseños listos

Todos están activos en tiendas de ejemplo. Ábrelas y navega para ver cómo quedan.

### Clásico

Oscuro, con la imagen de fondo llenando la pantalla de apertura y los widgets junto a
las novedades. Míralo en [reinopixel.hystore.com.br](https://reinopixel.hystore.com.br).

![El diseño Clásico en la tienda de ejemplo Reino Pixel](shots/appearance-classic.webp)

### Aurora

Claro u oscuro, con una franja degradada en tu color, servidores en carrusel, ranking
con la skin de los jugadores y una tarjeta de Discord en el pie. Míralo en
[vilabloco.hystore.com.br](https://vilabloco.hystore.com.br).

![El diseño Aurora en la tienda de ejemplo Vila Bloco](shots/appearance-aurora.webp)

### Celeste

Claro u oscuro, con menú lateral sobre un cielo de nubes en píxel, banner giratorio de
ofertas, pestañas de servidor y categoría, búsqueda de productos y botones con relieve.
Míralo en [ilhasdoceu.hystore.com.br](https://ilhasdoceu.hystore.com.br).

![El diseño Celeste en la tienda de ejemplo Ilhas do Céu](shots/appearance-celeste.webp)

En Celeste puedes cambiar el fondo alrededor de la tienda, en la tarjeta **Fondo del
diseño**: **Color de la marca** (el cielo sigue el color primario), **Color a elección**
o **Imagen** (JPG, PNG o WebP de hasta 5 MB, se recomienda 1920x1080). El interruptor
**Nubes en píxel** enciende o apaga las nubes. En el celular, la tienda llena la
pantalla y el fondo no aparece.

### Prisma

Claro u oscuro, con cara de tienda de productos digitales: búsqueda destacada, producto
destacado al lado, franja de garantías, portadas grandes, catálogo con filtros laterales
y tarjeta de compra fija en la página del producto. También sirve para tiendas de
juegos. Míralo en [estudiovoxel.hystore.com.br](https://estudiovoxel.hystore.com.br).

![El diseño Prisma en la tienda de ejemplo Estúdio Voxel](shots/appearance-prisma.webp)

## Cambiar el diseño

1. En **Personalización > Apariencia de la Tienda**, abre la pestaña **Diseño**.
2. Haz clic en el diseño que quieras. Marca **Usar los colores sugeridos por este
   diseño** para que los colores primario, de acento y de los íconos pasen a ser los
   suyos.
3. En Aurora, Celeste y Prisma, elige si la tienda abre en modo claro u oscuro. El
   jugador puede cambiarlo con el botón de sol y luna, y su elección queda guardada en
   el navegador.
4. Haz clic en **Guardar diseño**.

> [!TIP]
> ¿Quieres cambiar más de lo que permiten los diseños listos? El diseño **Personalizado**
> se arma en el [Constructor](/es/appearance/builder/), sin código. Para control total,
> con tu código o tu IA, usa el [Tema en código](/es/code-theme/). Aurora, Celeste y
> Prisma también existen como temas en código.

## Logo y favicon

En la pestaña **Logo & Favicon**, sube:

- el **logo**: PNG con fondo transparente, unos 200x60 px, hasta 2 MB;
- el **favicon**, el ícono de la pestaña del navegador: 32x32 o 64x64 px, hasta 512 KB.

![La pestaña Logo y Favicon](shots/appearance-branding.webp)

## Página principal

La pestaña **Página Principal** reúne el título, el subtítulo, la imagen de fondo
(1920x1080, hasta 5 MB), la IP del servidor y qué mostrar: estado, IP, jugadores en línea
y mejor comprador.

![La pestaña Página Principal: textos, imagen de fondo y qué mostrar](shots/appearance-hero.webp)

## Widgets de la página

La pestaña **Widgets** reúne el widget de Discord (con el ID del servidor) y los
rankings de compradores. Las herramientas de análisis, publicidad y atención están en
otra pantalla; mira [Widgets](/es/appearance/widgets/).

## Colores

En la pestaña **Colores**, haz clic en el cuadrado de cada elemento para elegir su color;
en blanco usa el color predeterminado. En Aurora, Celeste y Prisma, la pestaña muestra
solo los colores de la marca, porque el fondo, las tarjetas y el texto siguen el modo
claro u oscuro.

![La pestaña Colores de la pantalla de apariencia](shots/appearance-colors.webp)