Dónde aparece el widget en la página del producto

De forma predeterminada, el widget de Bundlex se muestra justo encima del botón Añadir al carrito en la página del producto. Si esa ubicación no encaja con tu tema, tienes dos formas de moverlo: un selector de ubicación personalizado en la inserción de la aplicación o un anclaje del creador de páginas. En este artículo se explica dónde aparece el widget y cómo decide Bundlex entre estas opciones.

La posición predeterminada

Cuando no coincide ninguna anulación de ubicación, Bundlex inserta el widget antes del contenedor detectado del formulario de producto, en el área de compra. La posición exacta con respecto a los controles de variantes y cantidad del tema depende de cada tema. En la práctica, esto significa que las tarjetas de oferta aparecen encima del botón Añadir al carrito, que es donde la mayoría de los compradores espera ver una oferta por cantidad o de paquete.

Esta configuración predeterminada depende de que Bundlex detecte automáticamente el formulario de producto. La mayoría de los temas se detectan automáticamente. Si el tuyo no se detecta, el widget no puede conectarse de forma fiable con Añadir al carrito. Un anclaje de ubicación por sí solo no corrige un formulario de producto ausente o incorrecto; pide al equipo de soporte que compruebe también la detección del formulario.

La cadena de prioridad de ubicación

Para la entrega mediante inserción de la aplicación, Bundlex busca un destino de ubicación en un orden fijo y usa el primero que encuentra. Los elementos superiores de la lista tienen prioridad sobre los inferiores.

1. Selector de ubicación personalizado, máxima prioridad. Un selector CSS que configuras en la inserción de la aplicación Bundlex. Cuando está configurado y coincide con un elemento, el widget se inserta directamente después de ese elemento y no se usa ningún elemento inferior de esta lista.
2. Anclaje del creador de páginas (data-bundlex-widget). Un elemento HTML que contiene el atributo data-bundlex-widget y que colocas en tu página. El widget se coloca dentro del primer anclaje coincidente. Se usa cuando no se encuentra ningún destino de ubicación personalizado.
3. Posición predeterminada antes del formulario de producto, prioridad más baja. Es la ubicación automática descrita anteriormente. Se usa cuando ninguna de las anulaciones proporciona un destino coincidente.

Como la cadena se detiene en la primera coincidencia, un destino de ubicación personalizado coincidente reemplaza tanto al anclaje como a la posición predeterminada, y un anclaje coincidente reemplaza la posición predeterminada. Si un selector deja de coincidir después de un cambio de tema, Bundlex puede recurrir a una ubicación de menor prioridad.

Opción 1: el selector de ubicación personalizado, inserción de la aplicación

Usa un selector de ubicación personalizado cuando necesites mantener la entrega mediante la inserción de la aplicación y colocar el widget después de un elemento específico de la página. Si no conoces el selector, pide ayuda al soporte de Bundlex para elegir uno. Pruébalo primero en un tema en borrador.

Lo configuras en la inserción de la aplicación Bundlex:

1. En el administrador de Shopify, ve a Tienda online y haz clic en Editar tema.
2. Abre Inserciones de aplicaciones y busca Bundlex Bundles.
3. Activa Mostrar configuración avanzada y, después, introduce un selector CSS en el campo Selector de ubicación personalizado.
4. Guarda el tema.

El widget se inserta justo después del elemento con el que coincide tu selector. Si no estás seguro de qué selector usar, el soporte de Bundlex puede ayudarte a encontrar uno. La configuración avanzada también muestra campos para el formulario de producto, el botón Añadir al carrito y los selectores de cantidad, que se usan para corregir la detección automática en temas personalizados, no para colocar el widget.

Opción 2: un anclaje del creador de páginas

Si creas páginas de producto con un creador visual como GemPages, PageFly o Shogun, normalmente querrás colocar el widget en un punto específico del diseño. Para ello, añade un bloque de HTML personalizado o de código donde quieras que aparezca el widget y coloca dentro un elemento vacío con el atributo data-bundlex-widget:

<div data-bundlex-widget></div>

No tienes que escribirlo manualmente: abre la pestaña Avanzado del editor de paquetes y expande ¿Usas un creador de páginas?. Elige Copiar y pega el fragmento en tu página.

Bundlex rellena el primer anclaje coincidente con el widget. No necesitas un fragmento diferente para cada paquete. El anclaje solo controla la posición. Bundlex sigue eligiendo qué paquete publicado mostrar según el producto.

Solo se usa el primer anclaje coincidente

Si existe más de un elemento data-bundlex-widget en la página, Bundlex usa solo el primero según el orden del DOM. Esto es importante cuando tu tienda duplica contenido, por ejemplo, en una ventana modal de vista rápida o en un cajón del carrito que repite el marcado del producto. Coloca el anclaje únicamente en la superficie donde realmente quieras el widget, para que la primera coincidencia sea la correcta.

Cuándo usar el bloque de aplicación

Bundlex también incluye un bloque de aplicación del tema para la página del producto, que es una forma independiente de mostrar el widget, distinta de la inserción de la aplicación. Usa el bloque de aplicación cuando quieras colocar el widget en una posición específica mediante la función de arrastrar y soltar del editor de temas, sin escribir un selector CSS ni editar el marcado de la página:

1. En el editor de temas, abre una plantilla de producto.
2. Haz clic en Añadir bloque en la sección donde quieras colocar el widget.
3. Abre la pestaña Aplicaciones, elige Bundlex Bundles y arrastra el bloque hasta la posición exacta que quieras.
4. Guarda el tema.

El bloque coloca el widget donde lo sueltas dentro de la sección, por lo que es un punto intermedio entre la posición predeterminada automática y un selector escrito manualmente. El bloque ignora el selector de ubicación personalizado y el anclaje del creador de páginas de la inserción. Usa un solo método de entrega en la página del producto: ejecutar la inserción y el bloque a la vez puede hacer que la ubicación y la configuración dependan de cuál se inicialice primero.

Prueba primero el cambio en un tema en borrador. Antes de desactivar una inserción que funciona en ese borrador, comprueba que el bloque esté dentro de una sección que se muestre en la plantilla real del producto. Recarga la página del producto inmediatamente después de cambiarlo; si el widget desaparece, vuelve a activar la inserción. Para descuentos con regalos, prefiere una ubicación que mantenga la inserción y su limpieza de regalos en la página del carrito. Consulta inserción frente a bloque.

Independientemente de la ubicación que elijas, el widget solo se muestra cuando la inserción de la aplicación, o el bloque, está activado y un paquete publicado coincide con el producto. Si el widget no aparece en absoluto, confirma esas dos condiciones antes de ajustar la ubicación.

Páginas de destino: el bloque "Bundlex Bundles featured"

Los métodos anteriores se aplican a las páginas de producto. En una página normal de Shopify, cualquier URL /pages/, como una página de destino que hayas creado para una campaña, el widget no puede conectarse por sí solo y el HTML personalizado tampoco lo cargará.

En su lugar, añade la sección Producto destacado de tu tema y coloca dentro el bloque Bundlex Bundles featured. La sección del tema proporciona el botón Añadir al carrito y el bloque añade el widget, igual que en la página de inicio:

1. En el administrador de Shopify, ve a Tienda online y haz clic en Editar tema.
2. En el menú desplegable de plantillas de la parte superior, selecciona Páginas y elige la plantilla que usa tu página de destino.
3. Haz clic en Añadir sección y elige la sección Producto destacado de tu tema; después, selecciona el producto cuyo paquete quieras mostrar.
4. Dentro de esa sección, haz clic en Añadir bloque, abre la pestaña Aplicaciones y elige Bundlex Bundles featured.
5. En la configuración del bloque destacado, establece Producto en el mismo producto que usa la sección o conserva su conexión Producto de la sección.
6. Guarda el tema.

El bloque por sí solo, fuera de una sección de Producto destacado, no encuentra ningún formulario de Añadir al carrito y no muestra nada. Colocado dentro de la sección, muestra el producto con sus ofertas de paquetes publicadas y los compradores pueden añadirlo al carrito directamente desde la página de destino. La misma configuración también funciona en la página de inicio.

Referencia rápida

Método de ubicación	Dónde configurarlo	Prioridad
Selector de ubicación personalizado	Inserciones de aplicaciones > Bundlex Bundles > Mostrar configuración avanzada	Máxima
data-bundlex-widget anclaje	Marcado de la página o creador de páginas	Se usa si no coincide ningún destino personalizado
Predeterminado (antes del formulario del producto)	Automático	Se usa cuando no coincide ninguna anulación