Qué es el constructor
El constructor de escaparate es un editor visual que te permite diseñar cada página de tu tienda sin escribir código. Los cambios se previsualizan en vivo en el centro de la pantalla. Nada llega a los compradores hasta que haces clic en Publicar.
La estructura del constructor
El constructor tiene tres áreas:
- Barra lateral izquierda: cinco pestañas apiladas como iconos en el borde izquierdo. De arriba a abajo son Mercados (bandera), Páginas, Secciones, Configuración (engranaje) y el asistente de IA (Amed) anclado en la parte inferior.
- Panel de control: se abre al seleccionar una sección o bloque y muestra todas sus configuraciones.
- Panel de vista previa: una vista en vivo de tu tienda tal como la verán los compradores.
Cambiar de página y mercado
Abre la pestaña Páginas para moverte entre las páginas que puedes editar: Inicio, Producto, Landing, Colección, Carrito, Pago, Gracias, Búsqueda, Política, Contacto y 404. Para una descripción de cada página, consulta Páginas que puedes editar. Abre la pestaña Mercados (la primera, icono de bandera) para cambiar entre tus mercados. Cada mercado tiene su propia plantilla y su propio historial de deshacer para cada página, así que los cambios en un mercado no afectan a otro.
Vista previa, vista de pantalla y modo Inspector
Un selector de vista te permite previsualizar en diferentes anchos con los botones Pantalla completa, Escritorio y Móvil. El selector solo muestra las opciones que caben en tu ventana actual, así que en una pantalla estrecha algunos botones desaparecen. La barra superior también tiene un botón de Vista previa (icono de ojo) que abre tu tienda en vivo en una nueva pestaña del navegador y un botón para Salir del constructor.
El modo Inspector está activado por defecto (el icono de cursor en la barra superior está resaltado). Mientras esté activado, al hacer clic en cualquier elemento de la vista previa se selecciona instantáneamente esa sección o bloque y se abre en el panel de control, lo que es la forma más rápida de saltar a algo sin desplazarte por la barra lateral. Haz clic en el botón Inspector para desactivarlo.
Agregar una sección
- Abre la pestaña Secciones de la página actual.
- Haz clic en el botón Agregar sección (icono de círculo con signo más) en la lista, o abre el menú de una sección y elige Agregar sección antes o Agregar sección después.
- Se abrirá un selector con todos los tipos de sección que aún puedes agregar en esa página. Haz clic en uno para añadirlo.
Cada tipo de sección tiene un máximo por página. Cuando un tipo llega a su límite, desaparece del selector, y cuando un espacio está lleno el botón Agregar sección se desactiva con un mensaje indicando que se alcanzó el máximo. Los tipos de sección también son específicos de cada página (por ejemplo, un héroe o boletín solo está en Inicio). El catálogo completo de tipos y sus límites está en Secciones y bloques.
Agregar un bloque dentro de una sección
Selecciona una sección y luego, en su panel de control, haz clic en Agregar bloque. Los bloques son los elementos dentro de una sección: texto, imágenes, botones, grupos de diseño, divisores y más. Los tipos de bloque disponibles y cuántos puedes agregar varían según la sección.
El menú de la sección (copiar, duplicar y más)
Para acceder a todas las acciones de una sección, selecciónala y haz clic en el icono de menú en la parte superior del panel de control, o haz clic derecho en la sección en la barra lateral. El menú contiene:
- Copiar: copia toda la sección (contenido y estilo).
- Copiar solo estilo: copia solo el estilo visual.
- Pegar: pega una sección copiada. El mensaje muestra dónde se insertará (Después, Dentro o Sobrescribir). Se desactiva con un motivo si no hay nada copiado, se alcanzó el límite o el tipo no está permitido en ese lugar.
- Pegar solo estilo: aplica el estilo copiado a la sección seleccionada. Se desactiva si el tipo no coincide o no hay nada copiado.
- Duplicar: coloca una copia justo debajo del original, solo en la página actual. Se desactiva si se alcanzó el límite por página de la sección.
- Ocultar / Mostrar: alterna la visibilidad. Las secciones ocultas permanecen en tu plantilla pero no se muestran a los compradores.
- Eliminar: elimina la sección. Deshacer la recupera.
Las filas de la barra lateral también tienen un icono de ojo (Ocultar/Mostrar) y un icono de papelera (Eliminar) directamente. Las secciones obligatorias no se pueden ocultar ni eliminar, así que la información de Producto en la página de Producto y la información de Landing en la página de Landing no tienen icono de papelera.
Reordenar secciones y bloques
En la lista de Secciones, arrastra una fila de sección hacia arriba o abajo para cambiar su lugar en la página. La vista previa se actualiza al instante. Los bloques se reordenan igual, arrastrando dentro del panel de control.
Aplicar una sección a todas las páginas
El Encabezado, Pie de página, Barra de anuncios y Código personalizado aparecen en todas las páginas. Para aplicar una copia editada en todas partes, abre el menú de esa sección y elige Aplicar a todas las páginas. Esto sobrescribe la sección correspondiente en cada página del mercado actual que ya la incluya (las páginas que no la tienen se omiten). Se escribe directamente en tu tienda en vivo, así que es irreversible. El constructor te pedirá confirmación primero. El asistente de IA también puede hacer esto por ti, explicado en Acciones del constructor con IA.
Deshacer, rehacer y guardar
La barra superior tiene botones de Deshacer y Rehacer. El historial es por mercado y por página, así que deshacer en Inicio no afecta la página de Producto. Atajos de teclado: Cmd/Ctrl + Z para deshacer, Cmd/Ctrl + Shift + Z o Cmd/Ctrl + Y para rehacer, y Cmd/Ctrl + S para publicar.
Haz clic en Publicar (arriba a la derecha) para llevar tus cambios a la tienda en vivo. El botón se desactiva si no hay cambios sin guardar. La publicación es por mercado y por página, así que publicar Inicio no publica la página de Producto.
Qué revisar antes de publicar
- Cambia a la vista Móvil y recorre toda la página, ya que la mayoría de los compradores usan móvil.
- Verifica el contraste del texto con el color de fondo de cada sección.
- Asegúrate de que cada bloque de imagen tenga un archivo multimedia seleccionado, porque los espacios de imagen vacíos se ven como espacio en blanco en la tienda en vivo.
- Confirma que los botones y elementos del menú enlacen a los destinos correctos.
Para que el asistente de IA construya y edite secciones por ti, consulta Construir con el asistente de IA.