Manual del Editor de contenido
Da forma a la imagen de la tienda: banners de la portada, logotipos, colores, tipografías y estilo visual.
- Dónde entras/admin (o Ingresar en la tienda)
- MenúDashboard, Banners, Apariencia
- Lectura≈ 6 minutos
1Tu rol y tu menú#
El Editor de contenido cuida la imagen de la tienda: lo que el cliente ve primero en la portada y cómo se ve toda la marca (logotipos, colores y tipografías).
✓ Puedes
- Crear, editar, ordenar, ocultar y eliminar banners de la portada.
- Cambiar logotipos, favicon e imagen para redes.
- Cambiar colores, tipografías, bordes y estilo de botones.
- Ver el Dashboard.
✕ No puedes
- Cambiar los textos de la portada (anuncio, beneficios, títulos): están en Ajustes.
- Gestionar productos, pedidos, clientes ni pagos.
- Crear usuarios ni cambiar roles.
2Banners de la portada#
Los banners son las imágenes con mensaje que ve el cliente al entrar. Se administran en Tienda › Banners, organizados por la ubicación donde aparecen.
| Ubicación | Dónde se ve | Para qué sirve |
|---|---|---|
| Carrusel principal | Diapositivas grandes debajo del menú. | Campañas principales y lanzamientos. |
| Promociones | Dos banners anchos después de los últimos productos. | Ofertas por categoría o fechas especiales. |
| Lateral de más vendidos | Banner vertical junto a los más vendidos. | Un producto o servicio destacado. |
| Banners inferiores | Tres banners al final de la portada. | Beneficios, envíos, garantía, categorías. |
Crear un banner#
En la ubicación que quieras, pulsa Agregar.
Completa los campos (ver tabla).
Comprueba que el interruptor Visible en la tienda esté encendido y guarda.
Abre la tienda en otra pestaña (Ver tienda) y revisa cómo quedó, también en el celular.
| Campo | Qué poner |
|---|---|
| Ubicación | Dónde se mostrará (ver tabla anterior). |
| Texto | Claro o oscuro: el color del texto sobre el banner. Elige según el fondo. |
| Antetítulo | Frase corta sobre el título (ej.: «40% de descuento»). |
| Título | El mensaje principal. Obligatorio. Breve y directo. |
| Precio | Texto de precio (ej.: «Desde S/ 1,399»). |
| Texto del botón | Verbo de acción: «Comprar ahora», «Ver ofertas». |
| Enlace | Dónde lleva el banner. Ejemplos: /producto/?p=mi-producto, /categoria/?c=laptops, /productos?ofertas=1 |
| Imagen (URL) | Dirección de la imagen. Usa fotos nítidas y livianas. |
| Color de fondo | Se ve donde la imagen no cubre y mientras carga. |
| Orden | Los números menores aparecen primero. |
| Visible en la tienda | Apágalo para ocultar el banner sin perderlo (por ejemplo, entre campañas). |
Buenas prácticas para banners#
- Una idea por banner: un mensaje, un botón.
- Texto corto: en celular se ve pequeño. Si dudas, bájale palabras.
- Contraste: si la imagen es oscura, usa texto claro (y al revés).
- Imágenes ligeras: comprime las fotos antes de usarlas; una portada lenta hace perder ventas.
- Revisa en celular: la mayoría de tus clientes comprará desde allí.
- Ordena por importancia: el primero del carrusel es el que todos ven.
3Apariencia de la marca#
En Tienda › Apariencia cambias cómo se ve toda la tienda. La pantalla tiene dos partes: a la izquierda los controles y a la derecha una vista previa en vivo que reacciona a cada cambio.
Logotipos e imágenes#
| Imagen | Recomendación |
|---|---|
| Logo principal | PNG con fondo transparente, aproximadamente 400 × 120 px. |
| Logo alterno | Versión para fondos oscuros (por ejemplo, el pie de página). |
| Favicon | El icono de la pestaña del navegador. Cuadrado, mínimo 64 × 64 px. |
| Imagen para redes | La que aparece al compartir el enlace en WhatsApp o Facebook. 1200 × 630 px. |
Para cambiar una imagen, pulsa Subir imagen y elige el archivo (PNG, JPG, WebP, GIF o ICO). La aplicación la optimiza al subirla.
Colores#
Cada color tiene un selector y un cuadro para escribir el código hexadecimal (por ejemplo, #1A9CB7).
| Color | Dónde se aplica |
|---|---|
| Primario | Color principal de la marca: enlaces, detalles, iconos. |
| Secundario | Tonos oscuros de apoyo. |
| Acento | Resalta ofertas y descuentos. |
| Fondo y Texto | Fondo de las páginas y color de la lectura. |
| Botones y Texto de botones | Los botones de compra (el texto debe leerse bien sobre el fondo). |
| Encabezado y su texto | La barra superior de la tienda. |
| Pie de página y su texto | La parte inferior de la tienda. |
Tipografía y estilo#
- Fuente de títulos / Fuente del cuerpo: elige de la lista. Se cargan desde Google Fonts y la vista previa las muestra. Usa como máximo dos.
- Radio de bordes: de 0 a 32 px. Valores bajos dan un estilo serio y recto; altos, uno más amable.
- Estilo de botones: Redondeados, Píldora o Rectos.
- Modo de color: Claro, Oscuro o Automático (según el dispositivo del visitante). Define también qué logotipo se usa.
Volver a los valores originales#
El botón Restablecer valores por defecto devuelve colores, tipografías y estilos a los originales. Los logotipos se conservan. Pide confirmación antes de hacerlo.
4Subir imágenes#
Las imágenes se suben desde el botón Subir imagen que aparece en Apariencia (logotipos y favicon) y en los métodos de pago (códigos QR). Los banners usan la dirección web (URL) de la imagen: puedes subirla primero a un servicio de imágenes de tu elección o pedir a un Administrador que te facilite la URL de una imagen ya subida.
5Plan de una campaña, paso a paso#
- Define la oferta: qué productos, de cuánto es el descuento y hasta cuándo.
- Pide al Gestor que ponga los precios (con «Precio anterior») y, si es «Oferta del día», la fecha de fin.
- Prepara las imágenes y el mensaje del banner.
- Crea el banner (carrusel o promociones) con el enlace correcto.
- Revísalo en la tienda, en computadora y en celular.
- Al terminar, oculta el banner.