Agregar estanterías y HTML embebido
En este artículo te mostraremos cómo agregar y configurar una estantería de productos y un bloque de HTML incorporado en la página de inicio o en una página personalizada de tu tienda.
💡 Si tu tienda todavía usa el editor anterior, consulta Configurar las estanterías, que aplica a ese editor (legacy).
DÓNDE ENCONTRAR LAS ESTANTERÍAS Y EL HTML INCORPORADO
Las estanterías y el HTML incorporado son bloques que se agregan a una página desde Apariencia.
1. Ingresa a tu Panel de Control y ve a Ajustes > Interfaz > Apariencia.
2. Abre la página que quieres editar (por ejemplo, la página de inicio o una página personalizada) con el botón Editar.
3. Haz clic en Agregar bloque y elige la opción que necesitas: Estantería de productos o HTML incorporado.
4. Cuando termines, haz clic en Publicar para que los cambios se vean en tu tienda.
💡 Los cambios no llegan a la tienda en vivo hasta que publicas la página. Para ver el proceso completo, consulta Editar y publicar una página en Apariencia.
ESTANTERÍA DE PRODUCTOS
Una estantería es una fila de productos con un título, filtros y un orden. Sirve, por ejemplo, para destacar tus novedades, tus títulos gratuitos o los libros de un autor.
Agregar una estantería
1. En la página que estás editando, haz clic en Agregar bloque y elige Estantería de productos.
2. Escribe el Título de la estantería. Es el encabezado que verán tus visitantes sobre la fila. Es obligatorio y admite hasta 255 caracteres.
3. En Filtros, agrega al menos un filtro (ver la siguiente sección).
4. Elige el Orden de las publicaciones.
5. Haz clic en Agregar bloque para guardar la estantería en el borrador de la página.
⚠️ Una estantería nueva no se guarda en el borrador hasta que haces clic en Agregar bloque, y no se puede guardar sin al menos un filtro. Una estantería que ya existe se guarda automáticamente mientras la editas.
Editar una estantería existente
1. En la lista de bloques de la página, busca la fila de la estantería. Verás su título y su origen, que se toma del primer filtro.
2. Haz clic en Editar para abrir el editor de la estantería.
3. Haz los cambios que necesites. Se guardan automáticamente, pero no se ven en la tienda hasta que hagas clic en Publicar.
Desde la misma fila también puedes:
| Acción | Resultado |
|---|---|
| Icono de ojo | Oculta o muestra la estantería sin eliminarla. |
| Editar | Abre el editor de la estantería. |
| Duplicar bloque | Inserta una copia justo después de la original, con el título "Título (copia)" y la misma visibilidad. |
| Eliminar bloque | Quita la estantería del borrador, previa confirmación. |
| Asa para arrastrar | Cambia el orden de la estantería en la página. También funciona con el teclado. |
💡 Si descartas el borrador antes de publicar, una estantería eliminada vuelve a aparecer.
Filtros disponibles
Cada filtro tiene un tipo y, en la mayoría de los casos, un valor. Para agregar otro filtro, haz clic en Agregar filtro. Para quitar uno, usa el botón de eliminar de su fila.
| Tipo de filtro | Qué muestra | Cómo se elige el valor |
|---|---|---|
| Gratuitas | Productos gratuitos. | No requiere valor |
| Novedades | Los productos más recientes. Este filtro aplica su propio orden. | No requiere valor |
| En promoción | Productos con descuento. Este filtro aplica su propio orden. | No requiere valor |
| Mi contenido | Los productos que cada lector con sesión iniciada ya posee. | No requiere valor |
| Género | Productos de una categoría temática. | Lista desplegable |
| Tipo de archivo | Productos de un formato: EPUB, PDF o Audiolibro. Impreso aparece solo en tiendas que venden productos físicos. | Lista desplegable |
| Público | Productos para un público determinado. | Lista desplegable |
| Idioma | Productos en un idioma. | Lista desplegable |
| Años | Productos de un año. | Lista desplegable |
| Meses | Productos de un mes, mostrado como año y mes (por ejemplo, "2026 octubre"). | Lista desplegable |
| Autor | Productos de un autor. | Búsqueda mientras escribes |
| Categoría, Colección, etc. | Un filtro por cada clasificación que tenga habilitada tu tienda. La lista exacta depende de tu tienda. | Búsqueda mientras escribes |
💡 En los filtros con búsqueda, los resultados aparecen a partir del tercer carácter que escribes.
Reglas para combinar filtros:
- Los filtros se combinan: un producto debe cumplir todos los filtros para aparecer en la estantería.
- Cada tipo de filtro se puede usar una sola vez por estantería. Para mostrar dos autores, crea dos estanterías o usa una clasificación que los agrupe.
- Todos los filtros que necesitan un valor deben tenerlo antes de guardar.
- Si el primer filtro es Mi contenido, esa estantería se muestra solo a los lectores con sesión iniciada.
Orden de las publicaciones
El selector Orden de las publicaciones ofrece tres opciones. La opción por defecto es Más reciente primero.
| Opción | Resultado |
|---|---|
| Más reciente primero | Primero los productos publicados más recientemente. |
| Más populares | Primero los productos más populares. |
| Alfabético A-Z | Orden alfabético por título. |
⚠️ Si la estantería incluye el filtro Novedades o En promoción, el selector no aparece, porque esos filtros aplican su propio orden y no se puede personalizar.
Qué ven tus visitantes
| Comportamiento | Detalle |
|---|---|
| Cantidad de productos | Hasta 8 por estantería, en un carrusel con flechas que aparecen al pasar el cursor. |
| Enlace Ver más | Aparece solo cuando la estantería está completa (8 productos). Si tiene menos, no se muestra. |
| Título de la estantería | Enlaza al catálogo filtrado con los criterios de esa estantería. |
| Estantería sin productos | Si no hay productos para el visitante, la estantería no se muestra. En la vista previa verás un aviso indicando que no se muestra mientras esté vacía. |
| Estanterías "Mi contenido" | No se muestran a visitantes que no han iniciado sesión. |
| Carga | Las primeras 3 estanterías cargan con la página. Al desplazarse hacia abajo se cargan 5 más cada vez. |
Ocultar contenido para adultos
En la página de inicio, la pestaña Bloques incluye un interruptor de Exclusión de contenido para adultos. Oculta de todas las estanterías el contenido con el público "Solo adultos". Este interruptor se guarda de inmediato, sin necesidad de publicar.
HTML INCORPORADO
El bloque de HTML incorporado muestra el código que pegues, exactamente en el lugar donde esté ubicado en la lista de bloques. Es útil para contenido que los demás bloques no cubren, como un formulario, un banner o un widget de otro servicio.
Agregar un bloque de HTML incorporado
1. En la página que estás editando, haz clic en Agregar bloque y elige HTML incorporado.
2. Pega o escribe tu código en el campo Contenido HTML.
3. Revisa el contador de caracteres que aparece debajo del campo.
4. Haz clic en Publicar para que el bloque se vea en tu tienda.
Cómo funciona el editor
| Elemento | Comportamiento |
|---|---|
| Campo de código | Resalta etiquetas, atributos, comentarios, scripts y estilos. El resaltado se desactiva a partir de 20.000 caracteres. |
| Teclado | La tecla Tab agrega sangría al código. La tecla Esc sale del campo. |
| Límite | 65.000 caracteres. Un contador muestra "N / 65.000 caracteres" y el editor deja de aceptar texto al llegar al límite. |
Etiqueta <template> | No está permitida. El editor muestra un aviso si la incluyes. |
| Fila en la lista de bloques | Muestra la cantidad de caracteres del bloque. |
💡 El bloque se crea cuando empiezas a escribir. Si abres el editor y sales sin escribir nada, el borrador no cambia. Un bloque vacío no muestra nada a los visitantes.
⚠️ El código se muestra tal como lo escribes: los scripts, los iframes y los estilos se ejecutan exactamente como están escritos, tanto en la vista previa como en la tienda publicada. El editor no limpia ni limita el código. Pega solo código en el que confíes.
Cómo se aísla el código
Por defecto, la tienda mantiene el HTML incorporado separado del resto de la página:
- Los estilos de tu tienda no llegan al código incorporado. Un título o un botón dentro del bloque no toma las fuentes, los colores ni las formas de tu tienda.
- Los estilos del código incorporado no se filtran al resto de la página. Una regla como "todos los enlaces en rojo" afecta solo al bloque.
- Los scripts del bloque solo pueden encontrar elementos que estén dentro del bloque.
⚠️ Si tu HTML carga un script externo (una etiqueta script con una dirección de origen), ese bloque no queda aislado y se ejecuta directamente sobre la página. Las herramientas de terceros que necesitan acceso a toda la página, como los widgets de chat o de reservas, funcionan así.
Si tenías widgets en el editor anterior
Al activar la tienda basada en bloques, los widgets ubicados en la parte superior de la tienda se convierten en bloques de HTML incorporado. Los widgets ubicados por encima de la barra de navegación no se convierten, porque los bloques no tienen un lugar en esa zona.
La tienda basada en bloques carga solo sus propios estilos y código, por lo que un widget que dependía de la tienda anterior puede verse sin estilos o dejar de funcionar. La solución es siempre la misma: hacer que el HTML sea autosuficiente, con todo lo que necesita.
| De qué dependía el widget | Qué ocurre | Solución |
|---|---|---|
| Estilos o fuentes de la tienda | Se ve con los estilos básicos del navegador. | Agrega los estilos dentro del HTML, en una etiqueta style. |
| Clases de Bootstrap | Las clases no hacen nada. | Rehace el diseño con estilos simples dentro del HTML. |
| Un carrusel u otra librería cargada por la tienda anterior | Falta la librería y el script falla. | Carga la librería desde el HTML con una etiqueta script. El bloque se ejecutará directamente en la página. |
| Elementos de la página fuera del widget | El script no puede encontrarlos. | Mantén dentro del widget todos los elementos que el script necesita. |
| CSS personalizado o código de cabecera de la tienda anterior | No se aplica. | Mueve los estilos al widget o rediseña con el tema de la tienda. |
LÍMITES
| Elemento | Límite |
|---|---|
| Título de la estantería | 255 caracteres |
| Filtros por estantería | Al menos 1, uno por tipo |
| Caracteres para iniciar la búsqueda | 3 |
| Productos por estantería | 8 |
| Estanterías que cargan con la página | 3, luego 5 por cada desplazamiento |
| HTML incorporado | 65.000 caracteres |
| Resaltado de sintaxis | Hasta 20.000 caracteres |
PREGUNTAS FRECUENTES
¿Por qué no se ve una estantería en mi tienda?
Revisa estas causas en orden:
- La página no está publicada o la tienda todavía no está activa. Los visitantes solo ven la versión publicada.
- La estantería está oculta (icono de ojo).
- Ningún producto cumple los filtros para ese visitante. Las estanterías vacías no se muestran.
- La estantería empieza con el filtro Mi contenido. Los visitantes sin sesión iniciada no la ven.
¿Por qué mi estantería no tiene selector de orden?
Porque incluye el filtro Novedades o En promoción, que definen su propio orden.
¿Por qué mi estantería no tiene el enlace Ver más?
El enlace aparece solo cuando la estantería muestra 8 productos. Si hay menos coincidencias, no hay nada más que mostrar.
¿Puedo incorporar un script de terceros?
Sí. Agrega la etiqueta script al HTML incorporado. En ese caso el bloque se ejecuta directamente sobre la página, sin aislamiento.
ARTÍCULOS RELACIONADOS
- Tienda basada en bloques
- Editar y publicar una página en Apariencia
- Configurar la barra de navegación y el footer
- 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].