> ## 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 Producto Upsell > ℹ️ **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 aumentar el valor medio del pedido (AOV) al recomendar los productos adecuados en el momento adecuado? 🛍️ Eso es exactamente lo que **Producto Upsell (Slider)** tipo de oferta en **Hoppy Bundles** está diseñado para. Con esta oferta, puede mostrar un hermoso slider de productos en sus páginas de productos que recomienda productos adicionales a sus clientes, tales como: * 🧠 Recomendaciones impulsadas por la IA (Productos Relacionados o Complementarios) * 🎯 Productos a mano específicos que desea promover Los clientes pueden añadir productos recomendados a su carrito directamente desde el slider — sin dejar nunca la página del producto ✨ En este guía, te guiaremos a través de la configuración completa, paso a paso, por lo que tu slider de upsell está viviendo en pocos minutos ⚙️ --- # **📋 Antes de empezar** Antes de crear tu primer producto Upsell, asegúrate de tener los siguientes listos: * ✅ **Hoppy Bundles instalado** en tu Shopify tienda * ✅ Una idea difícil **productos** desea recomendar (o si desea que AI decida por usted) * ✅ _(Sólo para AI Upsell)_ El libre **Shopify Search & Discovery app** instalado, aquí es donde Shopify almacena tus recomendaciones de productos relacionadas y complementarios ℹ️ El producto Upsell slider hace **no** crear cualquier descuento. Los productos recomendados se añaden al carrito a su precio regular, es puramente una herramienta de recomendación de productos 💡 --- # **✅ Paso inicial: Activar la aplicación** Para que el slider de upsell aparezca en tu escaparate, el Hoppy Bundles app embed debe ser habilitado dentro de tu Shopify tema. Ve a: **Shopify Admin → Tienda Online → Temas → Editar Tema → App Embeds** Desde allí: 1. Abrir el **App Embeds** sección de la barra lateral izquierda 2. Encontrar el **Hoppy Bundles** app embed 3. Toggle it **ON** ✅ 4. Haga clic **Guardar** ⚠️ No te preocupes si saltas este paso – después de publicar tu oferta, Hoppy Bundles le mostrará un banner de recordatorio con un **Enable App Embed** botón que te lleva directo al lugar correcto en el editor de temas. --- # **⚙️ Paso 1 — Crear una nueva oferta de productos Upsell** Desde **Hoppy Bundles** app dashboard: 1. Haga clic **Crear nueva oferta** 2. En el **Seleccione el tipo de oferta** pantalla, encontrar la **Producto Upsell (Slider)** tarjeta 🏷️ 3. Haga clic **Crear Upsell Slider** Usted aterrizará en el **Crear Upsell Slider** página de configuración. La página de configuración se divide en dos áreas: * **A la izquierda** → Tus ajustes, organizados en 3 pestañas: **General**, **Diseño**, y **Objetivo " Colocación "** * **El lado derecho** → A **vista previa en vivo** de su deslizador en ambos 🖥️ Escritorio y 📱 Móvil, que actualiza al instante a medida que cambia la configuración 💡 Cada cambio que haces se refleja en la vista previa en tiempo real — ¡siéntate libre de experimentar! --- # **🏷️ Paso 2 - Nombre de su oferta & Establecer el título de deslizador** En el **General** tab, empieza con lo básico: ## **Nombre de la oferta** Este nombre es **sólo visible para usted** dentro de la aplicación — los clientes nunca lo ven. Use algo reconocible para su propia referencia, como: * _Colección de verano Upsell_ * _Accesorios Slider_ ## **Slider Title** Estos son los clientes de encabezado **verás** por encima del deslizador en tu escaparate. El título predeterminado es **“También te gustaría”**, pero puedes cambiarlo a lo que quieras, como: * _Completa el look_ * _Parejas bien con_ * _Los clientes también han comprado_ ⚠️ El **Slider Title is required** - si lo dejas vacío, verás un _“Se requiere un título más bajo”_ error y no será capaz de guardar. --- # **🔢 Paso 3 — Configuración deslizante Configuración** Todavía en el **General** pestaña, **Ajustes** sección controla cuántos productos son visibles inmediatamente dentro del deslizador: * **Productos por diapositiva (Desktop)** → ¿Cuántos productos muestran por diapositiva en pantallas de escritorio _(por defecto: 3)_ * **Productos por diapositiva (Mobile)** → ¿Cuántos productos muestran por diapositiva en dispositivos móviles _(default: 2)_ ℹ️ Si selecciona más productos que caben en una diapositiva, los clientes pueden girar o navegar a través del slider para ver el resto, así que no tengas miedo de añadir muchas recomendaciones. --- # **🛍️ Paso 4 - Seleccione sus productos Upsell** Este es el corazón de tu oferta ❤️ - elegir **productos** ser recomendado dentro del deslizador. Tiene dos opciones: --- ## **Opción 1 - Productos específicos de Upsell _(por defecto)_** Mano-pick los productos exactos que desea recomendar: 1. Seleccione **Productos específicos de Upsell** 2. Haga clic **Seleccione productos** 3. Shopify’s producto picker se abrirá — buscar y seleccionar uno o más productos 4. Confirme su selección ✅ Sus productos elegidos aparecerán como una lista debajo del botón, e instantáneamente en la vista previa en vivo. 💡 Esta opción es perfecta cuando deseas un control completo, por ejemplo, recomendando siempre accesorios de combinación en una página de producto específica. --- ## **Opción 2 — AI Upsell (Frequently Bought Together)** Vamos. Shopify’s AI decide qué productos recomendar para cada página de producto automáticamente. Cuando se selecciona esta opción, hay dos tipos de recomendación disponibles: * **Productos relacionados** → Productos similares al que se ve * **Productos complementarios de Upsell** → Productos que van bien junto con el que se ve ⚠️ **Importante:** AI Upsell utiliza las recomendaciones que configuras gratuitamente **Shopify Search & Discovery app**. Verás un banner de recordatorio con un **Búsqueda abierta y descubrimiento** botón — utilizarlo para configurar sus productos relacionados o complementarios por producto, de lo contrario el deslizador puede no tener nada que mostrar. ## **Max No. de Productos** Cuando se selecciona AI Upsell, aparece un campo adicional: **Max No. de Productos** → El número máximo de productos recomendados mostrados en la barra deslizante _(hasta 10)_. --- ⚠️ **¡Arriba la cabeza!** Interruptor entre _Productos específicos de Upsell_ y _AI Upsell_ **despeja su selección de productos actual**. Elige tu enfoque primero, luego selecciona productos. --- # **🌍 Paso 5 - Traducciones (opcional)** ¿Vendiendo en varios idiomas? El **Traducción** sección en la pestaña General le permite traducir los textos deslizantes para cada uno de los idiomas de su tienda. Este paso es completamente opcional durante la configuración — siempre puede volver a él más tarde. Para un paseo completo, echa un vistazo a nuestro dedicado **Guía de traducción** 📖 --- # **🎨 Paso 6 - Personalizar el diseño (opcional)** Cambiar a la **Diseño** pestaña para hacer que el slider coincida con su marca perfectamente 🎨 Aquí hay una rápida visión general de lo que puede personalizar: * **Fuente** → Utilice su fuente temática (default) o elegir de una gran lista de fuentes * **Tipografía & colores** → Tamaño de texto, peso y color para el título deslizante, títulos de producto, precios, y el botón Añadir al carrito * **Frontera** → Ancho fronterizo y redondez de esquina (radius) de las tarjetas de producto * **Antecedentes " Colores fronterizos "** → Para las tarjetas de producto y el botón Todos los cambios se actualizan instantáneamente en la vista previa en vivo a la derecha 🖥️📱 ℹ️ El diseño predeterminado ya se ve limpio de la caja, por lo que puede saltar esto de forma segura durante su primera configuración y refinarlo más adelante. Para una profunda inmersión en cada opción de estilo, echa un vistazo a nuestra dedicada **Diseño y guía de estilo** 📖 --- # **📍 Paso 7 - Elija el lugar** Cambiar a la **Objetivo " Colocación "** pestaña y decidir **Donde** el deslizador aparece. Tiene dos opciones de colocación: ## **A continuación, añadir a Cart Button (Default)** El deslizador se coloca automáticamente debajo del **Añadir al carrito** botón en sus páginas de producto. No se necesita trabajo extra: esta es la opción recomendada para la mayoría de las tiendas ✅ ## **Personal (sólo en la página del producto)** Elija esto si desea colocar el deslizador manualmente, en cualquier lugar que desee en la página del producto. Cuando se selecciona, la aplicación te muestra dos cosas: * **Hoppy Bundles ID** → Use este ID con el Hoppy Bundles bloque de aplicación en su editor de temas para añadir, eliminar o reposicionar el slider * **Hoppy Bundles code snippet** → Un pequeño `
` snippet usted puede pegar cualquier lugar en su código de tema ⚠️ El ID y el código solo aparecen **después de guardar o publicar** la oferta - así que guardar primero, luego copiarlos. --- # **🎯 Paso 8 - Establecer objetivos " Programación " (opcional)** Todavía en el **Objetivo " Colocación "** pestaña, encontrará controles opcionales para **quién** ve el deslizador y **cuando** 👇 ## **👤 Atención al cliente** Controlar qué clientes ven el slider: * **Visibilidad (Customer Login Status)** → Mostrar a todos los clientes, o sólo a los clientes conectados * **Mostrar bar a** → Todos los clientes, clientes con un específico **etiqueta del cliente** (por ejemplo. `premium, wholesale`), o clientes por encima de un determinado **por vida** Monto * **Ocultar la barra** → Exclusión opcional de los clientes por etiqueta o vida gastada ## **🌍 Geolocation Targeting** * **Todo el mundo** _(por defecto)_ → Mostrar el slider a los visitantes de cada país * **Países concretos** → **Seleccionar países** para abrir el picker del país, buscar y seleccionar exactamente dónde debe aparecer el slider ## **🗓️ Programación** Perfecto para campañas de tiempo limitado: * **Comienzo** → _Ahora mismo._ (por defecto) o _Fecha específica_ y tiempo * **Final** → _Nunca_ (por defecto) o _Fecha específica_ y tiempo ℹ️ Todas estas opciones de selección son opcionales. Para la mayoría de las tiendas, los defectos (mostrar a todos, en todas partes, siempre) funcionan bien para empezar. Para configuraciones avanzadas, echa un vistazo a nuestra dedicada **Guía de destino** 📖 --- # **🚀 Paso 9 - Guardar " Publish** ¡Ya casi terminaste! 🎉 ## **Guarda tu oferta** Cada vez que haces cambios, **Guardar bar** aparece en la parte superior de la página: * Haga clic **Guardar** para almacenar su oferta como **Proyecto** 📝 * Haga clic **Divulgación** para revertir sus cambios ⚠️ En una nueva oferta, la **Publish** botón se mantiene desactivado hasta que haya guardado al menos una vez - así que golpe **Guardar** primero. ## **Publica tu oferta** Una vez guardado, haga clic **Publish** en la esquina superior derecha para hacer que el deslizador viva en su tienda 🚀 Después de publicar, Hoppy Bundles muestra un banner de confirmación: * Si **app embed no está habilitado aún**, verás un _“Asegúrese de que la aplicación Embed está activa”_ banner con un **Enable App Embed** botón — click it and toggle the embed on (see the Initial Step above) * Si todo está activo, haga clic **Open Store** para ver tu slider en vivo en una página de producto ✨ Puedes **Unpublish** en cualquier momento para tomar el slider offline sin perder la configuración. --- # **⚠️ Notas importantes & Consejos** * 💰 **No se aplican descuentos** — el deslizador Product Upsell recomienda productos a su precio regular. Si quieres paquetes con descuento, echa un vistazo a nuestros **Bundle** o **Cantidad** oferta tipos en su lugar * 🧠 **AI Upsell necesita Buscar & Discovery** — sin productos relacionados/complementarios configurados en Shopify Search & Discovery app, el deslizador AI puede aparecer vacío * 🔄 **Cambiar el tipo upsell reinicia tu selección** - cambiar entre _Productos específicos_ y _AI Upsell_ despeja los productos que ha elegido * 🗑️ **Eliminar es permanente** — **Suprimir** acción (top of the edit page) elimina la oferta _y_ sus estadísticas de análisis para siempre. Esto no puede ser deshecho * 📄 **Duplicar ofertas fácilmente** - utilizar el **Duplicar** acción en cualquier oferta existente para crear una copia y tweak it, en lugar de empezar desde cero --- # **🎉 Resultado final** Eso es todo — su producto Upsell slider es en vivo! 🥳 Sus clientes verán ahora un hermoso slider de recomendaciones de productos en sus páginas de productos, justo donde lo colocó. Pueden navegar por las recomendaciones y añadir productos a su carrito con un solo clic: impulsar su AOV en el piloto automático 📈 Desde Hoppy Bundles Dashboard, puedes: * ✏️ **Editar** la oferta en cualquier momento para cambiar productos, diseño o segmentación * 📊 **Seguimiento** para ver cómo sus upsells están convirtiendo * ⏸VIEW **Unpublish** cuando quieras pausar la oferta ¡Feliz grito! 🚀