Diseño de tu tienda

En este artículo

El diseño define la identidad visual de tu tienda: logos en distintos contextos (cabecera, pie, checkout, correos), favicon, colores y tipografías. Una paleta y tipografía coherentes hacen que tu tienda se vea profesional desde el primer vistazo.

Pasos

1. Entra al diseño

En el menú lateral abre "Tienda > Diseño". El formulario está dividido en secciones, una para cada contexto donde aparece tu marca.

2. Cabecera

Lo primero que verá el cliente al entrar a tu tienda:

• Logo — el logo principal que aparece en la parte superior. Recomendado: PNG con fondo transparente para que se vea bien sobre cualquier fondo de cabecera. Altura típica entre 40 y 80 px.
• Texto de barra superior — mensaje delgado que aparece arriba del logo, ideal para promociones o info clave. Ej: "Envío gratis en compras mayores a RD$ 3,000". Si lo dejas vacío, esa barra no se muestra.

3. Pie de página

• Logo — versión del logo para el footer. Si tu footer tiene fondo oscuro, sube una versión clara/blanca aquí. Si lo dejas vacío, no se muestra logo en el footer.
• Email de contacto / Teléfono / Dirección / Información adicional — datos visibles en el pie de página. Son distintos a los de Preferencias generales (que se usan internamente y en correos). Estos son los que ve el cliente.
• Texto de copyright — la línea legal al final. Ej: "© 2026 Demo Moda. Todos los derechos reservados". Suele incluir el año en curso.

4. Página de pago (checkout)

• Logo — la versión del logo que se muestra en el checkout. Por defecto reutiliza el logo de cabecera. Solo necesitas subir uno aquí si tu logo de cabecera está pensado para fondo oscuro — el checkout tiene fondo blanco y tu logo blanco se vería invisible.

5. Correos electrónicos

• Logo para emails — funciona igual que el del checkout: por defecto usa el de cabecera. Súbelo distinto solo si en los correos se ve distorsionado, demasiado grande o se pierde sobre el fondo.

6. Favicon y compartir en redes

• Favicon — el ícono pequeño de la pestaña del navegador. Imagen cuadrada, mínimo 32 × 32 px. Idealmente 64 × 64 px o más. Formatos aceptados: PNG, ICO, SVG.
• Logo para compartir en redes — la imagen que aparece cuando alguien comparte un enlace de tu tienda en Facebook, WhatsApp, Twitter, etc. Recomendado: 1200 × 630 px, formato JPG o PNG, con tu marca claramente visible y poco texto pequeño.

7. Colores

La paleta visual de toda tu tienda. El formulario está organizado en tres columnas:

Columna 1 — Colores generales:

• Primario — color dominante de tu marca.
• Secundario — color complementario para acentos.
• Acento — destacado puntual (etiquetas de promoción, indicadores).
• Títulos — color de los encabezados (h1, h2, h3).
• Enlaces — color de los textos clickeables.

Columna 2 — Botones:

• Botón primario — texto y fondo (botones de acción principal: "Agregar al carrito", "Pagar").
• Botón secundario — texto y fondo (acciones secundarias).

Columna 3 — Secciones:

• Cabecera — texto y fondo del encabezado de la tienda.
• Barra superior — texto y fondo de la barra de promo (la del paso 2).
• Pie de página — texto y fondo del footer.

Cada campo tiene un selector visual de color y un campo donde puedes pegar el código hexadecimal exacto (ej: #2C3E50). Si tu marca tiene una paleta definida en HEX, pega esos códigos directamente.

8. Tipografía

Dos fuentes:

• Encabezados — la fuente para títulos de página, nombres de producto y secciones. Suele ser una fuente con personalidad (serif elegante, display moderna, etc.).
• Cuerpo — la fuente para descripciones, párrafos y texto largo. Tiene que ser fácil de leer en pantalla — sans-serif limpias funcionan mejor.

Cada selector tiene un campo de fuente y un campo de variante de peso (300, 400, 600, etc.). Si necesitas explorar fuentes, hay un enlace a Google Fonts arriba de los selectores para ver ejemplos antes de elegir.

9. Guarda

Haz clic en "Guardar" al final. Los cambios se aplican inmediatamente — abre tu tienda en otra pestaña para ver el resultado.

¿Cuántos logos necesito tener listos?

Para evitar trabajo doble después, prepara desde el inicio tres versiones de tu logo:

1. Logo principal a color con fondo transparente — para cabecera, checkout y correos (si tienen fondo claro).
2. Logo en blanco con fondo transparente — para el footer si lo tienes en fondo oscuro.
3. Favicon cuadrado — versión simplificada o solo el ícono/iniciales de tu marca, sin texto.

Con estos tres archivos cubres todas las posibles ubicaciones.

Tip

Menos es más con los colores. Elige un primario que represente tu marca y como mucho dos colores complementarios (secundario + acento). Las tiendas con paletas limpias transmiten más profesionalismo y se ven mejor en cualquier dispositivo. Si tu marca todavía no tiene paleta definida, herramientas como Coolors o Adobe Color te ayudan a generar combinaciones armónicas a partir de un color base.

Siguiente paso

Con la identidad visual lista, ya puedes diseñar tu página de inicio con bloques, banners y productos destacados.