> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 📍 Cómo configurar Bundles Oferta para la colocación personalizada > ℹ️ **Note:** Este artículo fue traducido automáticamente usando AI y puede contener imprecisiones. Si algo se ve mal, póngase en contacto con nuestro equipo de apoyo. Quieres tu oferta de paquetes para aparecer _exactamente_ donde lo desea en su página de producto - no sólo debajo del botón Añadir al carrito? 🎯 Eso es exactamente lo que **Colocación personalizada** opción en Hoppy Bundles está diseñado para. Por defecto, cada oferta de paquetes se muestra **debajo del botón Añadir al carrito** automáticamente. Pero con la colocación personalizada, puede colocar la oferta en cualquier lugar de su página de producto utilizando cualquiera: * 🧩 El **Hoppy Bloqueo de la aplicación del paquete** dentro del Shopify editor de temas (no se necesita codificación!) * 📝 Un pequeño **code snippet** pegado en su código de tema o una sección de líquido personalizado Esta guía te lleva a través de ambos métodos paso a paso ✨ --- # **🤔 ¿Cuándo debe utilizar la colocación personalizada?** Colocación personalizada es útil cuando desea: * Mostrar la oferta del paquete **arriba** el botón Añadir al carrito * Coloque la oferta junto a la descripción del producto, imágenes o opiniones * Mueva la oferta más baja en la página, por ejemplo debajo de los detalles del producto * Tenga control completo sobre la posición exacta dentro de su diseño de tema ℹ️ Obras de colocación personalizadas **sólo en la página del producto**. Otras páginas no se ven afectadas por esta configuración. --- # **✅ Antes de empezar** Antes de configurar una colocación personalizada, asegúrese de tener: * ✅ El **Hoppy Bundles** app instalada en tu tienda * ✅ A **Bundle oferta** ya creado (o crear uno nuevo) * ✅ El **App Inserted** habilitado en su tema (ver el siguiente paso) 💡 Los mismos pasos también funcionan para **Cantidad** ofertas — la sección de Colocación mira y se comporta exactamente igual. --- # **⚙️ Paso inicial: Activar la aplicación** Para que la oferta del paquete aparezca en cualquier lugar de su tienda, la aplicación embed debe ser habilitada dentro de su Shopify tema. Ve a: **Shopify Admin → Canales de Venta → Tienda Online → Temas → Personalizar → App Embeds** Entonces: * Encontrar **Oferta de descuento a granel** ( Hoppy Bundles incrustado) * Toggle it ON * Haga clic **Guardar** ⚠️ Sin la aplicación incrustada habilitada, ni la colocación predeterminada ni la colocación personalizada se renderizarán en su escaparate. --- # **🛠️ Paso 1 - Seleccione la ubicación personalizada en su oferta** Abrir el **Hoppy Bundles** app y abre la oferta de paquetes que deseas poner manualmente. Entonces: 1. Ir a la **Objetivo " Colocación "** pestaña 2. Desplazarse hacia abajo **Colocación** sección 3. En el desplegable, seleccione **Personal (sólo en la página del producto)** en lugar de _A continuación, añadir a Cart Button (Default)_ --- # **💾 Paso 2 - Guardar la Oferta Primero** Este paso es importante ⚠️ El **Hoppy bundles ID** y el **code snippet** sólo se generan **después de la oferta se salva**. Si seleccionas _Aduanas_ colocación en una nueva oferta (sin guardar) , verá este mensaje en su lugar: > _Guardar para ver Hoppy bundles ID y codificador_ Entonces: 1. Haga clic **Guardar** en la parte superior de la página 2. Volver a **Objetivo " Colocación → Colocación** Ahora verás dos cosas. 👇 --- # **🆔 Paso 3 - Copiar su Hoppy bundles ID & Code Snippet** Una vez guardado, la sección de Colocación muestra: * **Hoppy bundles ID** → un ID único para esta oferta específica, con un icono de copia junto a él * **Hoppy bundles code snippet** → un fragmento HTML listo para usar, también con un icono de copia: ################################################################################################################################################################################################################################################################ ℹ️ Cada oferta tiene su propio ID único. Si crea múltiples ofertas de paquetes, asegúrese de copiar el ID/snippet de la correcta. Ahora puede colocar la oferta usando **o** de los dos métodos siguientes 👇 --- # **🧩 Método 1 — Colocar la Oferta Usando el bloque de aplicación del editor de temas (recomendado)** Este es el método más fácil: no se requiere codificación 🎉 El Hoppy bundles bloque de aplicaciones se puede añadir, eliminar, reposicionar y personalizar a través del editor de temas utilizando su ID de Bundle. Siga estos pasos: 1. Ve. **Shopify Admin → Tienda Online → Temas → Editar Tema** 2. En la parte superior del editor de temas, cambie el selector de página a **Productos → Producto predeterminado** (o la plantilla de producto que utiliza) 3. En la barra lateral izquierda, haga clic **Agregar bloque** dentro de la sección del producto 4. Bajo **Aplicaciones** pestaña, seleccione **Hoppy Bundle** 5. En la configuración del bloque, pega tu **Bundle ID** en el **Bundle ID** sobre el terreno 6. Arrastre el bloque hacia arriba o hacia abajo para posicionarlo exactamente donde desea que la oferta aparezca 7. Haga clic **Guardar** ⚠️ Si usted deja vacío el campo de identificación del paquete, el bloque mostrará un _“Configure el ID para utilizar App Block”_ advirtiendo en lugar de su oferta — así que no olvide pegar la identificación! 💡 Usted puede reposicionar el bloque en cualquier momento simplemente arrastrándolo en el editor de temas — la oferta seguirá la posición del bloque en la página. --- # **📝 Método 2 - Colocar la Oferta Usando el Código Snippet** Utilice este método si desea colocar la oferta dentro de un punto específico en su código de tema, o dentro de un **Custom Liquid** sección/bloqueo. ## **Opción A — Usando un bloque líquido personalizado en el editor de temas** 1. Ve. **Shopify Admin → Tienda Online → Temas → Personalizar** 2. Cambiar a tu **plantilla de producto** 3. Haga clic **Agregar bloque** (o **Add section**) → elegir **Custom Liquid** 4. Pruebe el fragmento de código del Paso 3: ################################################################################################################################################################################################################################################################ 5. Coloque el bloque donde desea que aparezca la oferta 6. Haga clic **Guardar** ## **Opción B — Directamente en su código de tema** 1. Ve. **Shopify Admin → Tienda Online → Temas → ⋯ (tres puntos) → Editar código** 2. Abra su archivo de plantilla de producto — generalmente algo como `product.liquid`, `main-product.liquid`, o un archivo JSON / sección del producto (el archivo exacto depende de su tema) 3. Pruebe el snippet exactamente donde usted desea la oferta del paquete para renderizar: ################################################################################################################################################################################################################################################################ 4. Haga clic **Guardar** ⚠️ Editar código de tema directamente puede romper su diseño si se hace incorrectamente. Si no estás cómodo código de edición, utiliza **Método 1** o **Opción A** en su lugar — o duplicar su tema primero como una copia de seguridad. --- # **📌 Notas importantes " Advertencias "** * ⚠️ **¡Salven primero!** El ID de Bundle y snippet sólo aparecen después de que la oferta haya sido guardada al menos una vez. * ⚠️ Trabajos de colocación personalizados **sólo en la página del producto** — la oferta no se inyectará en posiciones personalizadas en otras páginas. * ⚠️ Asegúrese de que **App Inserted** está habilitado en su tema, de lo contrario el snippet/block permanecerá vacío en el escaparate. * ℹ️ El snippet debe mantener el nombre exacto de la clase `futureblink-bundle-block` y su oferta es única `id` — no los renombre, de lo contrario la aplicación no encontrará el contenedor. * ℹ️ Cada oferta tiene su **propio ID único**. Copiar el fragmento de una oferta y esperar otra oferta para aparecer no funcionará. * 💡 Si cambia la desplegable de Placement **A continuación, añadir a Cart Button (Default)**, la aplicación devolverá la oferta automáticamente de nuevo - no se necesita identificación o fragmento. --- # **🎉 Resultado final** Una vez que todo está configurado: ✅ Su oferta de paquetes aparece en la posición exacta que eligió en la página del producto ✅ Usted puede reposicionarlo en cualquier momento desde el editor de tema (Método App Block) ✅ La oferta se mantiene totalmente dinámica — precios, descuentos y versiones de actualización en tiempo real ✅ Su diseño de página de producto es exactamente la forma en que lo diseñó ✨ Uso personalizado Placement te da control completo sobre dónde vive tu paquete en la página, por lo que encajan perfectamente en el diseño y el flujo de compras de tu tienda 🚀