📍 Cómo colocar Upsell & Cross Sell en una posició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 Upsell & Cross Sell widget para aparecer exactamente donde Tú ¿Lo quieres, no sólo en los puntos predeterminados? 🎯
Eso es exactamente lo que Posición personalizada opción en Hoppy Upsell & Cross Sell está diseñado para.
En lugar de confiar en la colocación automática de la aplicación, Custom Position le permite decidir la ubicación precisa de su widget utilizando:
- 🧩 Un tema Bloque de aplicación (sin codificación necesaria)
- 📝 A code snippet puede pegar en una sección de líquido personalizado o sus archivos de tema
Esto es perfecto cuando desea que el widget se siente entre secciones específicas —por ejemplo, justo debajo de su descripción de producto, dentro de una pestaña, o por encima de los totales del carrito— por lo que se mezcla naturalmente en el diseño de su tienda ✨
🗺️ Donde funciona la posición personalizada
Posición personalizada se puede utilizar en las siguientes páginas:
- Página → cualquier lugar dentro de su plantilla de producto
- Página → cualquier lugar dentro de su plantilla de carrito
ℹ️ Posición personalizada sólo es compatible con Página y PáginaEl Cart Drawer se hace dinámicamente por su tema, por lo que los bloques de aplicaciones no se pueden colocar dentro de él - para el cajón del carrito, utilizar el dedicado Cart Drawer Tipo de colocación.
✅ Antes de empezar
Asegúrese de que los siguientes estén en su lugar antes de establecer una posición personalizada:
- El Upsell Cross-Sell Slider app embed está habilitado en su tema → Shopify Admin → Tienda Online → Temas → Editar tema → App Embeds → Upsell Cross-Sell Slider →
⚠️ Sin la aplicación incrustada, el script widget nunca carga — así que nada aparecerá, incluso si el bloque se coloca correctamente.
- Tienes tu ID de Upsell útil. No estoy seguro de dónde encontrarlo? Véase 🔎 Cómo encontrar la identificación de Upsell?.
🛠️ Paso 1 - Habilitar la posición personalizada en la aplicación
Hay dos maneras de encender la Posición Aduana — elegir cuál sea su situación.
Opción A — Crear una nueva posición personalizada Upsell
Abrir el Hoppy Upsell & Cross Sell app, entonces:
→ Crear nuevo upsell
→ En la pantalla tipo colocación, seleccione Posición personalizada
Esto crea un nuevo upsell cuya colocación ya está establecida Posición personalizada — configurará su contenido y diseño como de costumbre, y luego lo colocará sobre su tema en los próximos pasos.
Opción B — Cambiar un Upsell existente a la posición personalizada
Ya tengo un Página o Página upsell? Usted puede convertirlo:
→ Abrir el upsell de su dashboard → Ir al Colocación pestaña → Mostrar encendido (Incluir), abrir el desplegable de colocación y seleccionar Posición personalizada
💡 Cambiar a Posición personalizada aclara la colocación automática, por lo que el widget sólo aparecerá donde lo coloca usted mismo en el tema.
💾 Paso 2 - Guardar para obtener su Upsell ID & Code Snippet
Posición personalizada funciona al igualar su colocación temática a un upsell específico utilizando su ID de Upsell.
Después de seleccionar Posición personalizada:
→ Guardar
Una vez salvado, el Colocación ficha revela dos elementos listos para copiar:
- ID de Upsell → el ID único de este upsell (con un botón de copia 📋)
- Upsell code snippet → un fragmento HTML listo (también con un botón de copia)
ℹ️ Estos sólo aparecen después de guardar. Si usted ve “Guardar para ver Upsell ID y código snippet”, acaba de golpear Guardar primero.
🧩 Paso 3 - Coloque el Widget en su Tema
Ahora elige cómo quieres colocar el widget. Ambos métodos funcionan en plantilla de producto y el plantilla de carrito.
Método 1 - Uso del bloque de aplicación temática (recomendado)
Esta es la manera más fácil, sin código 🎉
→ Ir a Shopify Admin → Tienda Online → Temas → Editar tema → Desde la parte superior desplegable, abra la plantilla donde desea el widget:
- Productos → Producto predeterminado (para páginas de productos)
- Carrito (para la página del carrito)
→ En el panel izquierdo, haga clic Agregar bloque (o Add section) → Bajo Aplicaciones, seleccionar Upsell Cross-Sell Block
→ En la configuración del bloque, pega tu ID de Upsell en el ID de Upsell campo → Arrastre el bloque a su posición preferida ⬆️⬇️ → Guardar
💡 Justo después de publicar un upsell, la aplicación también muestra una Agregar bloque de aplicación botón de acceso directo en el banner de confirmación — abre el editor de temas directamente con el bloque listo para añadir.
⚠️ Si ID de Upsell campo se deja vacío, el bloque muestra un “Por favor, configura el ID de Upsell para utilizar App Block.” marcador de posición en lugar de tu widget – así que siempre pega el ID.
Método 2 - Usar un bloque líquido personalizado / Código Snippet
Preferir más control, o desear el widget en algún lugar bloques de aplicaciones no están disponibles? Usa el código snippet en su lugar.
→ En el editor de temas, añadir un Custom Liquid bloque o sección donde desea el widget → Pruebe el Upsell code snippet copiado de la aplicación. Se ve así:
Identificar clase="upsell-cross-sell-block" id=YOUR UPSELL ID
→ Guardar
La aplicación encuentra automáticamente este marcador de posición en la página y hace que el widget de upsell coincida dentro de ella - incluso si su tema re-render la sección más adelante 🔄
💡 También puede pegar el fragmento directamente en los archivos líquidos de su tema (por ejemplo, dentro de una sección de producto personalizado) si usted es cómodo código de edición.
📌 Notas importantes " Advertencias "
- ⚠️ App embed debe permanecer ON - ambos métodos dependen del Upsell Cross-Sell Slider app embed be enabled.
- ⚠️ Diseñado para el producto & Cart pages — La posición personalizada está construida y soportada para las páginas de productos y la página del carrito. El widget hace dondequiera que encuentre el bloque/snippet marcador de posición en la página, por lo que sólo colocarlo en esas plantillas — situarlo en otro lugar (como la página de inicio o las colecciones) no es compatible y puede producir resultados inesperados.
- 💡 1 ID = 1 upsell — el ID de Upsell dentro del bloque o snippet decide qué muestra upsell. Para mostrar un upsell diferente, cambiar su ID.
- 💡 Múltiples colocaciones — se puede añadir el mismo bloque o el snippet en más de un punto (por ejemplo, página de producto y página del carrito) usando el mismo ID de Upsell.
- ⚠️ Publish your upsell - el upsell debe ser publicado en la aplicación, de lo contrario nada hace en el escaparate.
- ℹ️ Las condiciones de visualización todavía se aplican: reglas de selección como el estado de acceso al cliente, geolocalización, valor del carrito o programación todavía se respetan en posiciones personalizadas. Véase 🎯 Opciones avanzadas de fijación de objetivos Upsell & Cross Sell para detalles.
🎉 Resultado final
Una vez que todo está preparado:
✅ Su widget de upsell aparece exactamente donde usted colocó el bloque o snippet ✅ Actualiza automáticamente con su contenido, diseño y configuración de segmentación de la aplicación ✅ Puede mover, eliminar o re-addir libremente la colocación en cualquier momento del editor de temas — no es necesario tocar la aplicación de nuevo
Esto es lo que parece en una página de producto:
🛟 Solución de problemas
Si su widget no aparece después de la colocación:
- 🔎 Verifique el app embed está habilitado y salvado
- 🔎 Confirmar el ID de Upsell en el bloque coincide con el upsell que publicó
- 🔎 Asegúrese de colocar el bloque en un producto o carrito plantilla
- 🔎 Verifica que el upsell es publicado y no programado fuera de la fecha actual
¿Sigues atrapado? Check Upsell & Cross Sell no se muestra en mi tienda [Fixed] para una lista completa de verificación.
📚 Guías relacionadas
- 🔎 ¿Cómo encontrar identificación de Upsell?
- 🎨 Upsell & Cross Sell – Diseño y estilo
- 🎯 Opciones avanzadas de fijación de objetivos Upsell & Cross Sell
- Upsell & Cross Sell no se muestra en mi tienda [Fixed]
Actualizado el: 15/09/2026
¡Gracias!