Tienda basada en bloques
En este artículo te mostraremos qué es la tienda basada en bloques, qué tipos de página y de bloques puedes usar, y cómo funcionan el borrador, la vista previa y la publicación.
¿QUÉ ES LA TIENDA BASADA EN BLOQUES?
Con la tienda basada en bloques armas tu tienda a partir de bloques, como una barra de navegación, estanterías de productos, HTML incorporado y un pie de página, sin escribir código.
Con ella puedes:
- Componer el Inicio y páginas adicionales tú mismo, en el orden que quieras.
- Trabajar en un borrador, verlo tal como lo verán tus visitantes y publicarlo cuando esté listo. Tus visitantes nunca ven un trabajo a medias.
- Cambiar colores, fuentes y formas en un solo lugar (el tema).
- Crear páginas personalizadas con su propia dirección y sus propios ajustes para buscadores, por ejemplo para campañas, autores o contenido de aterrizaje.
- Agregar un pop-up al Inicio y un aviso en todas las páginas de producto.
Todo esto se edita en Panel de Control > Ajustes > Interfaz > Apariencia.
LOS TRES TIPOS DE PÁGINA
Cada página de tu tienda es de uno de estos tres tipos. El tipo define dónde vive la página y qué bloques acepta.
| Tipo de página | Dónde vive | Bloques que acepta | Ajustes de SEO propios |
|---|---|---|---|
| Inicio | El catálogo de tu tienda, {dominio_de_tu_tienda}/library | Barra de navegación, estanterías de productos, HTML incorporado, pie de página y pop-up | Sí |
| Página de producto | Todas las páginas de producto de la tienda (una sola página compartida) | Solo el aviso de la página de producto | No (cada producto aporta los suyos) |
| Página personalizada | {dominio_de_tu_tienda}/p/ seguido de la dirección que tú elijas | Barra de navegación, estanterías de productos, HTML incorporado y pie de página | Sí, y una opción para ocultarla de los buscadores |
Tu tienda tiene un solo Inicio y una sola página de producto, y puede tener todas las páginas personalizadas que necesites. Te mostramos cómo crearlas en Crear páginas personalizadas y configurar su SEO.
LOS TIPOS DE BLOQUE
| Bloque | Qué hace | Dónde puede ir | Más información |
|---|---|---|---|
| Barra de navegación | La barra superior con el logo, el buscador, el inicio de sesión y el carrito. Puedes usar filtros automáticos del catálogo o armar un menú personalizado. | Inicio y páginas personalizadas (fija arriba) | Configurar la barra de navegación y el footer |
| Pie de página | Íconos de redes sociales, enlaces legales y el botón de arrepentimiento (opcional). | Inicio y páginas personalizadas (fijo abajo) | Configurar la barra de navegación y el footer |
| Estantería de productos | Una fila de productos elegidos con filtros como género, autor, año o títulos gratuitos. | Inicio y páginas personalizadas | Agregar estanterías y HTML embebido |
| HTML incorporado | Tu propio HTML, estilos y scripts, mostrados tal como los escribas. | Inicio y páginas personalizadas | Agregar estanterías y HTML embebido |
| Pop-up | Un mensaje que se abre sobre el Inicio, con un horario y una frecuencia. | Solo el Inicio | Agregar un pop-up y un aviso en la página de producto |
| Aviso de la página de producto | Un texto corto que se muestra en la página de cada producto. | Solo la página de producto | Agregar un pop-up y un aviso en la página de producto |
La barra de navegación y el pie de página muestran una etiqueta Fijo en la lista de bloques: puedes editarlos, pero no moverlos. Su contenido es compartido por todas las páginas. En las páginas personalizadas puedes ocultarlos solo para esa página. El Inicio siempre mantiene ambos visibles.
EL TEMA
El tema controla cómo se ve toda tu tienda:
- Cuatro colores: encabezado y pie de página, botones y enlaces, fondo y texto.
- Las fuentes y los tamaños de texto.
- La forma de las tarjetas y los botones: esquinas, bordes, sombras y espaciado.
Parte de los colores actuales de tu tienda. Puedes aplicar un tema prediseñado (Default, Modern, Editorial o Nocturne) y ajustarlo. El tema tiene su propio editor y su propia publicación. Lo explicamos en Personalizar el tema de la tienda.
CÓMO FUNCIONA LA EDICIÓN
Para editar una página, ve a Panel de Control > Ajustes > Interfaz > Apariencia y haz clic en Editar. El funcionamiento es el mismo en todas las páginas:
1. Los cambios se guardan solos como borrador, unos segundos después de tu última edición. No hay un botón de guardar para los bloques.
2. Una vista previa en vivo muestra la página tal como la verían tus visitantes, con el borrador aplicado. El enlace Ver borrador abre el borrador completo en una pestaña nueva.
3. Publicar convierte el borrador en la versión que ven tus visitantes.
4. Revertir a la versión publicada descarta el borrador y vuelve a lo que está en vivo.
Una etiqueta junto al nombre de la página te indica en qué estado está.
| Etiqueta | Significado |
|---|---|
| Borrador | La página nunca se publicó. Tus visitantes no pueden verla. |
| Cambios sin publicar | La página está publicada y el borrador tiene cambios que tus visitantes todavía no ven. |
| Publicado | El borrador y la versión en vivo coinciden. En lugar de la etiqueta aparece un enlace para ver la página. |
Encontrarás el paso a paso en Editar y publicar una página en Apariencia.
QUÉ NECESITA CADA CAMBIO PARA LLEGAR A TUS VISITANTES
No todos los cambios pasan por Publicar. Revisa esta tabla si hiciste un cambio y tu tienda se ve igual.
| Cambio | Qué hace que llegue a tus visitantes | Cuándo |
|---|---|---|
| Bloques de una página (barra de navegación, estanterías, HTML incorporado, pie de página) | Publicar en esa página | Después de publicar |
| Aviso de la página de producto | Publicar en la página de producto | Después de publicar |
| Pop-up | Su propia publicación, en el editor del pop-up (antes debes publicar el Inicio al menos una vez) | Después de publicar |
| Tema (colores, tipografía, forma) | Publicar tema, en el editor del tema | Después de publicar |
| Título SEO, descripción SEO e imagen Open Graph | Guardar en los ajustes de la página | De inmediato |
| Botón de arrepentimiento | El interruptor se guarda solo | De inmediato, pero tus visitantes lo ven solo cuando tu tienda ya está en vivo con bloques |
| Exclusión de contenido para adultos | El interruptor se guarda solo | De inmediato |
⚠️ Solo la primera publicación del Inicio pone tu tienda en vivo con bloques. Hasta que publiques el Inicio, tus visitantes siguen viendo la tienda anterior y las páginas personalizadas aparecen como "no encontradas". Publicar el Inicio no publica el tema: acuérdate de publicarlo también.
💡 Mientras tanto puedes editar y ver la vista previa con calma: tus visitantes no notan nada hasta que publiques el Inicio.
QUÉ SIGUE FUNCIONANDO
La tienda basada en bloques mantiene el seguimiento, el soporte y el consentimiento de cookies de tu tienda.
| Función | Cómo se comporta con bloques |
|---|---|
| Google Tag Manager (contenedor de la tienda) | Se carga cuando completas el ID del contenedor en Ajustes > Marketing y tu tienda tiene la conexión con Google Analytics. Si el aviso de cookies está activo, espera a que el visitante acepte las analíticas. |
| Google Analytics y Facebook Pixel | Se cargan cuando están configurados, con la misma regla de consentimiento. |
| Chat de soporte | Sigue activo por defecto, como antes. No aparece en las páginas de checkout, carrito ni facturación. |
| Botón flotante de preguntas frecuentes | Muestra el botón flotante FAQs cuando lo activas en Ajustes > Avanzado. |
| Consentimiento de cookies | El aviso y la insignia se cargan cuando tu tienda tiene la función activa. |
| Verificación de Google Search Console | La etiqueta sigue mostrándose desde Ajustes > Marketing. |
💡 El seguimiento también se carga en la vista previa del editor y en la vista previa del borrador, por lo que tus sesiones de edición pueden aparecer en tus analíticas.
QUÉ NO SE TRASLADA
| Elemento | Qué pasa con bloques |
|---|---|
| CSS personalizado | No se muestra. |
| Código personalizado de encabezado y de pie de página | No se muestra. Solo la etiqueta de Google Search Console se mantiene. |
| Código personalizado de soporte (el chat que reemplaza al chat de soporte por defecto) | No se muestra. La tienda usa el chat de soporte por defecto. |
| Widgets anteriores ubicados sobre el encabezado | No se convierten. Con bloques no hay espacio sobre la barra de navegación. |
| Colores anteriores de la plantilla y de las estanterías | Se ignoran. El tema los reemplaza. |
Si usabas código personalizado, tendrás que rehacer esa parte con bloques, con el tema o con HTML incorporado. Te ayudan Personalizar el tema de la tienda y Agregar estanterías y HTML embebido.
⚠️ Cuando tu tienda pasa a usar bloques, las pantallas anteriores de estanterías, menú y widgets quedan bloqueadas y todo se gestiona desde Apariencia.
PREGUNTAS FRECUENTES
¿Necesito saber programar? No. El HTML incorporado es opcional, para quienes quieren pegar su propio código.
¿Puedo probarlo sin que mis visitantes lo noten? Sí. Una vez habilitada la función, tus visitantes siguen viendo la tienda anterior hasta que publiques el Inicio. Mientras tanto puedes editar y ver la vista previa.
¿Por qué mi tienda se ve igual después de publicar? Revisa qué cambio hiciste. El tema y el pop-up se publican por separado, y el SEO y la imagen Open Graph se aplican al hacer clic en Guardar. Mira la tabla de arriba.
¿El botón de arrepentimiento aparece automáticamente en tiendas de Argentina? No. Está desactivado en todas las tiendas y lo activas tú en el editor del pie de página. Su texto de ayuda indica que es obligatorio en Argentina por la Resolución 424/2020.
¿Hay un límite de estanterías o de páginas personalizadas? El editor no establece un máximo de estanterías, bloques ni páginas personalizadas. Cada estantería muestra hasta 8 productos, y la página carga las estanterías por grupos a medida que el visitante baja (3 primero y luego 5 más cada vez).
¿Puedo volver a la tienda anterior? Escríbenos a [email protected] y lo vemos juntos.
ARTÍCULOS RELACIONADOS
- Editar y publicar una página en Apariencia
- Configurar la barra de navegación y el footer
- Agregar estanterías y HTML embebido
- Personalizar el tema de la tienda
- Crear páginas personalizadas y configurar su SEO
- Agregar un pop-up y un aviso en la página de producto
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].