> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Bloque de upsells
> El bloque Upsells de Aftersell Cart: ofertas de productos elegidas por una estrategia y mostradas en el drawer.
> El bloque **Upsells** muestra ofertas de productos en el drawer del carrito, elegidas por una **Strategy** que tú seleccionas. Cuando un comprador abre el carrito, el bloque muestra los productos que tu Strategy devuelve según el contenido actual del carrito y cualquier regla de segmentación que hayas configurado.
Aumenta el valor promedio del pedido mostrando ofertas de productos relevantes en el momento en que los compradores abren su carrito, usando una Strategy que decide qué mostrar según el contenido del carrito y tus reglas de segmentación.
A diferencia del bloque [**Product add-on**](/es/aftersell/cart/product-add-on-block), que siempre muestra un producto que tú eliges, Upsells está impulsado por una Strategy que decide qué mostrar.
## Comportamiento
* Los productos se obtienen en vivo según el carrito actual del comprador, así que las ofertas reflejan lo que realmente hay en el carrito.
* **Toda la sección se oculta cuando no se resuelve ningún producto**: no hay Strategy adjunta, la Strategy no devuelve nada, o ninguno de los productos devueltos es comprable. Los compradores nunca ven una sección de Upsells vacía.
* Si una oferta devuelta lleva un descuento, el comprador ve un precio tachado honesto y una insignia de descuento, y el descuento se aplica en el checkout.
## Ajustes
| Ajuste | Qué controla | Predeterminado |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
| **Title** | Encabezado de texto enriquecido sobre las ofertas. Admite negrita, cursiva, alineación y color. | `You may also like` |
| **Add button text** | La etiqueta del botón de agregar de cada producto. | `Add` |
| **Strategy** | La Strategy que elige qué productos mostrar. | Una estrategia de IA de Shopify, asignada automáticamente |
| **Layout** | **Carousel** o **List**. | Carousel |
| **Maximum products** | Cuántos productos mostrar como máximo. Acepta de `1` a `12`. | `4` |
| **Show compare-at price** | Si se muestra un precio de comparación tachado. | Activado |
| **Show product reviews** | Si se muestran calificaciones de estrellas y recuentos de reseñas en cada tarjeta de upsell. Las calificaciones provienen de los metafields de producto de tu app de reseñas y solo aparecen cuando existen datos de reseñas válidos. | Desactivado |
### Apps de reseñas compatibles
Se admiten las siguientes apps de reseñas basadas en metafields: Shopify Product Reviews, Junip, Okendo, Growave, Fera, Stamped, Loox, REVIEWS.io, Automizely Reviews, Judge.me, Ali Reviews, Trustoo, Rivo, Rivyo y Vitals. Yotpo no es compatible porque usa una API separada en lugar de metafields de producto.
## Diseño
El bloque Upsells tiene overrides de diseño por bloque en su panel **Design**. Estos anulan los ajustes de diseño globales del carrito solo para este bloque. Dejar un valor en blanco hereda el ajuste global.
### Estilo de texto
El bloque Upsells incluye una sección **Text** en su configuración de Design. Úsala para controlar la tipografía de cada elemento de texto de cada tarjeta de upsell. Selecciona un elemento de texto en el selector para ajustar su configuración:
| Ajuste | Qué controla |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Text color** | Color del elemento de texto seleccionado. |
| **Font** | **Theme font** (hereda la fuente de tu tema) o **Custom font** (escribe el nombre de una fuente que tu tema ya cargue). Disponible solo para **Heading**. |
| **Size** | Tamaño de fuente en píxeles. |
| **Weight** | Grosor de la fuente: Light, Regular, Medium, Semibold o Bold. |
| **Line height** | Altura de línea como multiplicador del tamaño de fuente (por ejemplo, `1.4`). |
| **Letter spacing** | Espaciado entre letras en píxeles. Los valores negativos aprietan el texto. |
Los elementos de texto que puedes estilizar están agrupados por categoría:
**Heading**
* **Heading** — el encabezado de la sección encima de las tarjetas de upsell (por ejemplo, *You may also like*). También admite una familia de fuentes personalizada. El bold y el color se configuran en el Rich Text Editor de arriba.
**Product**
* **Product title** — el nombre del producto en cada tarjeta de upsell.
* **Review count** — el recuento de reseñas que se muestra cuando **Show product reviews** está habilitado.
**Pricing**
* **Price** — el precio actual de cada tarjeta.
* **Compare-at price** — el precio original tachado.
* **Discount** — la etiqueta de descuento (por ejemplo, *20% off*).
Dejar cualquier campo en blanco mantiene el valor predeterminado del elemento.
Al hacer clic directamente sobre un elemento de texto en la vista previa del carrito, se resalta y se abren automáticamente sus controles en el panel.
### Colores de las tarjetas
| Ajuste | Qué controla | Predeterminado |
| ------------------------- | ---------------------------------------------------------- | -------------- |
| **Tile background color** | El relleno de fondo de cada tarjeta de producto de upsell. | Transparente |
| **Tile border color** | El color del borde de cada tarjeta de producto de upsell. | `#F6F6F7` |
### Reseñas
Cuando **Show product reviews** está habilitado, puedes personalizar los colores de las estrellas desde la sección **Reviews** del panel Design.
| Ajuste | Qué controla | Predeterminado |
| -------------------- | ----------------------------------------- | -------------- |
| **Star color** | La porción rellena de cada estrella. | `#FDCC0D` |
| **Empty star color** | La porción sin rellenar de cada estrella. | `#D1D5DB` |
## Ubicación y límites
* **Región:** cuerpo o parte inferior.
* **Máximo:** 1 por estado del carrito. El carrito con artículos y el carrito vacío tienen cada uno el suyo.
* **Estado:** tanto carrito con artículos como carrito vacío.
* No se agrega de forma predeterminada. No está bloqueado: puedes quitarlo u ocultarlo.
## Seleccionar una estrategia
Un bloque Upsells no llega vacío: si no hay una Strategy configurada, Aftersell resuelve la estrategia de IA de Shopify de tu tienda (creándola si aún no tienes una) y la asigna, para que el bloque funcione de inmediato. Abre el selector **Strategy** para cambiarla. El selector tiene dos grupos:
**Quick start**
* **Create strategy from selected products**: elige productos específicos directamente y se crea una Strategy automáticamente para ti.
* **Create strategy from scratch**: abre el editor de Strategy para que puedas construir reglas sin salir del editor del carrito.
**Strategies**
* **Shopify AI recommendations**: crea una Strategy respaldada por las propias recomendaciones de Shopify, que se llama **Shopify AI recommended products** dondequiera que aparezca después. Esta entrada desaparece una vez que tienes una, ya que una tienda solo necesita una única estrategia de IA de Shopify.
* Tus Strategies existentes, listadas por nombre. Escribe en el campo de búsqueda para filtrarlas.
Una vez seleccionada una Strategy, su nombre aparece en la fila de estrategia dentro del bloque.
## Administrar una estrategia seleccionada
Después de adjuntar una Strategy, aparece un botón **•••** (puntos suspensivos) en la fila de estrategia. Haz clic en él para abrir el menú de acciones:
* **Edit strategy**: abre el editor de Strategy en una nueva pestaña, para que tu sesión del editor del carrito y cualquier cambio sin guardar permanezcan intactos. Esta opción no está disponible para la estrategia recomendada por la IA de Shopify, que se administra automáticamente y no tiene reglas editables.
* **Remove from upsell**: desvincula la Strategy de este bloque. La Strategy en sí no se elimina; sigue disponible en tu lista de Strategies.
Editar una Strategy en una nueva pestaña no afecta la sesión del editor del carrito: puedes volver a la pestaña del editor del carrito y continuar configurando sin perder tu trabajo.
## Plantilla personalizada
Admite una [plantilla personalizada](/es/aftersell/cart/custom-templates) desde su pestaña Code, que reemplaza el marcado integrado de este bloque con tu JSX. Estas son las props que recibe.
### Contenido del bloque
| Prop | Tipo | Para qué sirve |
| --------------- | ---------------------- | --------------------------------------------------------------------------------------------- |
| `title` | `string` | Encabezado de la sección. |
| `addButtonText` | `string` | Etiqueta del botón de agregar al carrito. |
| `layout` | `'carousel' \| 'list'` | Desplazamiento horizontal, o ajuste de línea. Ramifica tu marcado según esto. |
| `upsells` | `UpsellCard[]` | Los productos listos para mostrar. Consulta [la forma de la tarjeta](#the-upsell-card) abajo. |
| `isLoading` | `boolean` | `true` mientras los productos de upsell todavía se están obteniendo. |
### Agregar al carrito
| Prop | Tipo | Para qué sirve |
| ----------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- |
| `selectVariant` | `(productId: string, variantId: number) => void` | Selecciona una variante para un producto. |
| `handleAdd` | `(productId: string) => void` | Agrega al carrito la variante seleccionada de ese producto. |
| `addingProductId` | `string \| null` | El producto que se está agregando actualmente, para que puedas deshabilitar solo su botón. `null` cuando está inactivo. |
### Controles del carrusel
Solo es relevante cuando `layout` es `'carousel'`.
| Prop | Tipo | Para qué sirve |
| -------------- | ------------------------------------- | ------------------------------------------------------------------------------------------- |
| `trackRef` | `{ current: HTMLDivElement \| null }` | Adjúntalo a tu scroller con `ref={props.trackRef}` para que las flechas puedan desplazarlo. |
| `atStart` | `boolean` | `true` cuando la pista está en su borde inicial. Deshabilita la flecha izquierda. |
| `atEnd` | `boolean` | `true` cuando la pista está en su borde final. Deshabilita la flecha derecha. |
| `scrollByCard` | `(direction: 1 \| -1) => void` | Desplaza la pista una tarjeta a la izquierda (`-1`) o a la derecha (`1`). |
### La tarjeta de upsell
Cada entrada en `upsells`:
| Campo | Tipo | Para qué sirve |
| ------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `productId` | `string` | GID del producto. Úsalo como key de React y como destino del agregar al carrito. |
| `title` | `string` | Título del producto. |
| `description` | `string` | Descripción en texto plano. `''` cuando el producto no tiene. |
| `url` | `string \| null` | URL de la página del producto. `null` cuando no está disponible. |
| `imageUrl` | `string \| null` | Imagen destacada. `null` cuando el producto no tiene. |
| `selectedVariantImageUrl` | `string \| null` | La imagen propia de la variante seleccionada. `null` cuando la variante no tiene ninguna; en ese caso, recurre a `imageUrl`. |
| `variantTitle` | `string \| null` | Los valores de opción de la variante seleccionada (p. ej. `Medium / Blue`), ya resueltos. `null` cuando la variante no tiene un título real — en blanco o el placeholder `Default Title` de Shopify. Un producto con una única variante con nombre igual devuelve ese nombre, así que protégelo con `{upsell.variantTitle && …}` en lugar de basarte en `hasMultipleVariants`. |
| `priceLabel` | `string` | Precio a mostrar, ya formateado. El precio de oferta cuando hay descuento; de lo contrario, el precio de la variante. |
| `compareAtLabel` | `string \| null` | Original tachado, ya formateado. `null` cuando no hay nada que tachar. |
| `discountLabel` | `string \| null` | Etiqueta de descuento en línea como `(20% off)`. `null` cuando no hay descuento. |
| `review` | `object \| null` | `{ rating, count, stars }`, donde `stars` son 5 URLs de imágenes pre-renderizadas con el relleno fraccionario ya incorporado. Renderiza cada una como un elemento de imagen. `null` cuando las reseñas están desactivadas o el producto no tiene. |
| `options` | `Array<{ name, values }>` | Grupos de opciones, para construir selectores o muestrarios. |
| `variants` | `array` | Las combinaciones de variantes. Ver abajo. |
| `selectedVariantId` | `number` | La variante actualmente seleccionada. Pásala a `selectVariant`. |
| `hasMultipleVariants` | `boolean` | Si se debe renderizar un selector de variantes en absoluto. |
| `vendor` | `string` | El proveedor del producto. |
Cada entrada en `variants` lleva `id`, `title`, `price` y `compareAtPrice` (sin procesar, sin formato, en la unidad mayor de la moneda como strings), `availableForSale`, `imageUrl`, `sku` y `selectedOptions` (`[{ name, value }]`).
**La disponibilidad es por combinación, no por opción.** `options` te da los grupos a renderizar, pero si una selección dada es comprable vive en la entrada correspondiente de `variants`. Resuelve la combinación elegida por el comprador contra `variants` y condiciona según el `availableForSale` de esa entrada, en lugar de asumir que cada valor de `options` se puede pedir.
`priceLabel` y `compareAtLabel` ya están formateados para mostrarse, mientras que `variants[].price` y `variants[].compareAtPrice` son strings sin procesar en la unidad mayor de la moneda. No mezcles los dos: muestra las etiquetas y usa los valores sin procesar solo para comparaciones.
## Diseño
Da estilo a este bloque con su sección **Design** en el panel de ajustes. Son overrides por bloque que se superponen a tu diseño global y recurren a él cuando están en blanco.
¿Qué son los ajustes de diseño? Obtén más información aquí: [Ajustes de diseño](/es/aftersell/cart/design-settings).