Este artículo también está disponible en:

📍 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:

Ir a la Objetivo " Colocación " pestaña
Desplazarse hacia abajo Colocación sección
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:

Haga clic Guardar en la parte superior de la página
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:

Ve. Shopify Admin → Tienda Online → Temas → Editar Tema
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)
En la barra lateral izquierda, haga clic Agregar bloque dentro de la sección del producto
Bajo Aplicaciones pestaña, seleccione Hoppy Bundle
En la configuración del bloque, pega tu Bundle ID en el Bundle ID sobre el terreno
Arrastre el bloque hacia arriba o hacia abajo para posicionarlo exactamente donde desea que la oferta aparezca
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

Ve. Shopify Admin → Tienda Online → Temas → Personalizar
Cambiar a tu plantilla de producto
Haga clic Agregar bloque (o Add section) → elegir Custom Liquid
Pruebe el fragmento de código del Paso 3:

Coloque el bloque donde desea que aparezca la oferta
Haga clic Guardar

Opción B — Directamente en su código de tema

Ve. Shopify Admin → Tienda Online → Temas → ⋯ (tres puntos) → Editar código
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)
Pruebe el snippet exactamente donde usted desea la oferta del paquete para renderizar:

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 🚀

Actualizado el: 10/09/2026

¿Este artículo te resultó útil?

¡Gracias!