> ## 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 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ágina**El **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\]