Diseñador de Tienda¶
Producto: OpenConnect | Módulo: Tienda Online | Última actualización: 2026-08-12
Introducción¶
El Diseñador de tienda define cómo se ve la portada de su tienda: arma la página de inicio arrastrando y ordenando módulos —hero, grillas de productos, banners, testimonios, y más de una veintena de opciones. Es distinto de Configuración tienda, que define qué es la tienda: nombre, dirección web, medios de pago y catálogo. Configure primero esa pantalla; el diseñador toma de ahí el logo, los colores y los textos de partida.
Acceder¶
Desde Tienda online → Diseñador de tienda
El diseñador abre en pantalla completa, sin el menú lateral, para dejar más espacio de trabajo. El botón X, arriba a la derecha, vuelve a Configuración tienda.
Las tres columnas¶
| Columna | Qué contiene |
|---|---|
| Módulos (izquierda) | La paleta de todas las secciones disponibles, cada una con su ícono y nombre |
| Lienzo (centro) | La vista previa de la portada, sección por sección, en el orden en que se publican |
| Propiedades (derecha) | Los campos editables de la sección que tenga seleccionada en el lienzo |
Para agregar un módulo, arrástrelo desde la paleta hasta el lienzo, o haga clic en el ícono + de su tarjeta. Al pasar el cursor sobre una sección del lienzo aparece una barra con los controles: mostrar u ocultar, subir, bajar y eliminar. Las secciones también se reordenan arrastrándolas directamente.
💡 Consejo: Haga clic en cualquier sección del lienzo para seleccionarla; sus campos aparecen al instante en el panel de Propiedades, a la derecha.
Los módulos disponibles¶
El diseñador ofrece secciones para armar la portada por partes. Algunas de las más usadas:
| Módulo | Para qué sirve |
|---|---|
| Portada (Hero) | Imagen y título principales, con botón opcional |
| Cabecera (logo + buscador + carrito) | La barra superior de la tienda |
| Menú de categorías (navbar) | Navegación por categorías |
| Carrusel de banners | Rota las imágenes cargadas en Banners |
| Grilla de productos / Carrusel de productos | Vitrinas de catálogo, por todos, ofertas o SKUs elegidos |
| Productos destacados | Grilla de una selección manual o automática |
| Pestañas de productos | Varias vitrinas alternables (Nuevos, Más vendidos, Ofertas...) |
| Vitrina de categorías | Tiles grandes por categoría |
| Imagen + texto | Bloque promocional combinado |
| Texto / promo | Contenido en HTML libre |
| Barra de beneficios | Íconos con textos cortos (envío, cuotas, devoluciones...) |
| Testimonios | Reseñas de clientes en tarjetas |
| Preguntas frecuentes | Bloque de FAQ propio de la portada |
| Contador de oferta | Cuenta regresiva a una fecha límite |
| Newsletter | Formulario de suscripción |
| Formulario de contacto | Formulario que envía un mensaje |
| Mapa / ubicación | Mapa embebido con la dirección del local |
| Video, Galería / Lookbook, Logos de marcas, Guía de tallas | Contenido visual adicional |
| Aviso de cookies, Franja con movimiento (marquee), Franja de aviso (estática), Separador / espaciador | Elementos de utilidad y de espaciado |
| Pie de página | Contacto, redes sociales, columnas de navegación |
Cada módulo trae sus propios campos en el panel de Propiedades: título, colores, imágenes, textos por bloque, según corresponda. Los módulos de grilla o carrusel de productos pueden mostrar todos los productos, solo ofertas, o una lista de SKUs elegida a mano.
Plantillas y colores¶
El botón Plantillas, en la barra superior, ofrece diseños completos ya armados para reemplazar el borrador de un clic. Al aplicar una, el mensaje de la pantalla lo advierte: se reemplaza el borrador actual, no la tienda publicada, y las imágenes que trae son de demostración — se pueden cambiar después. Si la plantilla incluye páginas informativas de ejemplo (Quiénes somos, Cómo comprar, FAQ) y usted todavía no tiene ninguna, se crean y se agregan al menú automáticamente.
El botón Colores abre un selector rápido para el color primario y secundario de la plantilla; el primario define botones y acentos, y el texto se ajusta solo para seguir siendo legible.
El borrador y lo publicado¶
Todo lo que edita en el diseñador —agregar, mover, ocultar o borrar secciones, cambiar sus propiedades— se guarda como borrador. El borrador es privado: nadie que visite la tienda lo ve. Mientras trabaja, el diseñador autoguarda el borrador en segundo plano un segundo y medio después de cada cambio, y también puede guardarlo a mano con el botón Guardar.
Para que el público vea los cambios hace falta un paso aparte: el botón Publicar. Publicar copia el borrador completo a la versión pública y queda en vivo de inmediato — el mensaje de la pantalla lo confirma: "¡Tienda publicada! Los cambios ya están en vivo."
⚠️ Advertencia: Guardar no es publicar. Puede pasar horas editando, cerrar la pestaña, volver otro día — el trabajo queda en el borrador — pero hasta que no haga clic en Publicar, la tienda pública sigue mostrando la última versión publicada, aunque sea muy distinta de lo que ve en el lienzo.
El botón Vista previa, visible una vez que la tienda tiene slug, abre la tienda en una pestaña nueva con el borrador (no lo publicado), para revisar el resultado real antes de publicar.
Notas Importantes¶
ℹ️ Nota: La primera vez que abre el diseñador para un comercio sin diseño previo, el borrador arranca vacío o con la última configuración guardada; no hay una versión publicada todavía hasta que haga clic en Publicar por primera vez.
💡 Consejo: Use Plantillas como punto de partida en vez de armar la portada sección por sección desde cero. Es más rápido ajustar una plantilla que empezar de un lienzo vacío.
Preguntas Frecuentes de esta Sección¶
Edité la portada, la vi en Vista previa y quedó bien. ¿Por qué el público sigue viendo la versión anterior? Porque Vista previa muestra el borrador, no lo publicado. Haga clic en Publicar para que el cambio llegue al público.
Apliqué una plantilla y ahora quiero volver a lo que tenía antes. Mientras no haya publicado la plantilla nueva, la versión publicada anterior sigue intacta — aplicar una plantilla solo reemplaza el borrador.
¿Los banners que cargo en la sección Banners del menú aparecen solos en la portada? Solo si agrega el módulo Carrusel de banners (o Grilla de banners) en el lienzo. Cargarlos en Banners no los pone en la portada por sí solo.
¿Necesita ayuda adicional? Contacte a soporte: soporte@openx.cl