> ## 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.

# Widgets post-compra

> Este documento describe los widgets post-compra disponibles en Aftersell y cómo se usan para construir experiencias de upsell post-compra. Los widgets están agrupados por alcance y función, y cada widget se documenta una sola vez para evitar duplicaciones.

***

<div id="funnel-wide-widgets">
  # Widgets a nivel de embudo
</div>

<div id="progress-bar">
  ## Barra de progreso
</div>

La **barra de progreso** muestra a los clientes en qué punto del flujo post-compra se encuentran.

Cuando está habilitada, la barra de progreso aparece en todas las ofertas de upsell dentro del embudo. Cualquier cambio realizado en la barra de progreso se aplica a todo el embudo.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Barra de progreso post-compra con los pasos Cart, Order placed, Special offer y Done" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

**Opciones de configuración**

* Activa o desactiva la barra de progreso para el embudo
* Elige un estilo de visualización:
  * **Minimal**
  * **Minimal with labels**
  * **Maximal**
* Selecciona una apariencia clara u oscura
* Ajusta el relleno superior e inferior para controlar el espaciado

***

<div id="offer-level-widgets">
  # Widgets a nivel de oferta
</div>

Los widgets a nivel de oferta controlan el contenido y el comportamiento de una oferta de upsell individual.

Estos widgets definen lo que el cliente ve en un paso de upsell específico, incluyendo mensajes, urgencia, información del producto, detalles de precios y acciones.

Cada oferta de un embudo se puede personalizar de forma independiente usando widgets a nivel de oferta, lo que te permite adaptar la experiencia en cada paso.

Estos widgets incluyen:\
[Texto](#text)\
[Temporizador](#timer)\
[Producto de upsell](#upsell-product)\
[Selección de producto](#product-selection)\
[Descuento](#discount)\
[Insignia](#badge)\
[Envío](#shipping)\
[Imagen](#image)\
[Botones](#buttons)\
[Desglose de precios](#price-breakdown)\
[Detalles del producto](#product-details)\
[Variantes](#variant-plan-options)\
[Diseño](#layout)\
[Vídeo](#video)\
[Testimonios](#testimonials)

***

<div id="text">
  ## Texto
</div>

El widget de **Texto** se usa para títulos y textos de apoyo a lo largo de una oferta.

Admite un título y un texto de cuerpo opcional, con controles para el tamaño de fuente, color, grosor, alineación, tachado y espaciado.

Usa la variable dinámica `{first-name}` para personalizar los mensajes para cada cliente.

***

<div id="timer">
  ## Temporizador
</div>

El widget de **Temporizador** añade urgencia mostrando una cuenta regresiva en vivo.

Mientras el temporizador está en marcha, la oferta permanece visible. Cuando el temporizador llega a cero, la oferta de upsell desaparece automáticamente y el cliente avanza en el embudo.

***

<div id="upsell-product">
  ## Producto de upsell
</div>

El widget de **Producto de upsell** es el corazón de la oferta. Define qué producto se muestra y actúa como contenedor de todos los widgets relacionados con el producto que se describen a continuación.

Todo lo que sigue se configura dentro de este widget.

***

<div id="product-selection">
  ## Selección de producto
</div>

El widget de selección de producto controla qué producto se muestra en una oferta de upsell.

Puedes seleccionar un producto fijo o determinar dinámicamente el producto de upsell según el pedido original del cliente, lo que permite experiencias de upsell tanto estáticas como adaptativas.

<div id="product-type-options">
  #### Opciones de tipo de producto
</div>

* **Specific product**\
  Muestra siempre el mismo producto en el upsell.
* **Automatic upsell**\
  Selecciona dinámicamente un producto usando una lógica de upsell predefinida.
* **Most expensive in cart**\
  Usa el artículo de mayor precio del pedido original del cliente.
* **Least expensive in cart**\
  Usa el artículo de menor precio del pedido original del cliente.

<div id="changing-the-product">
  #### Cambiar el producto
</div>

El producto seleccionado aparece en la parte superior del widget. Para cambiarlo:

1. Haz clic en **Change product**
2. Selecciona un tipo de producto
3. Elige o confirma el producto

Al navegar por la pestaña **Products** del selector, puedes marcar **Active products only** para ocultar de la lista los productos en borrador (Draft) y archivados (Archived). Este filtro está desactivado por defecto y solo se aplica a la pestaña Products — las colecciones no se ven afectadas.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="Editor de ofertas de Aftersell mostrando el panel Edit upsell product junto a una vista previa en vivo de la oferta" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### Identificar productos con nombres idénticos
</div>

Si tu tienda tiene varios productos o variantes con el mismo título, habilita el conmutador **Show IDs** en el selector de productos para mostrar el ID numérico de producto de Shopify y el ID de variante debajo de cada nombre. Esto facilita confirmar que estás seleccionando el producto correcto.

El conmutador **Show IDs** está disponible en la pestaña **Product** del selector y está desactivado por defecto. No está disponible en la pestaña Collection.

***

<div id="discount">
  ## Descuento
</div>

El widget de **Descuento** aplica y muestra precios promocionales.

Puedes elegir entre un descuento porcentual (%) o un descuento de importe fijo (\$). Se puede añadir un texto de descuento personalizado si lo deseas, y el descuento puede hacer referencia al precio de comparación del producto o ignorarlo.

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### Atajo de descuento masivo para ofertas multiproducto
</div>

Para las ofertas multiproducto y de colección, aparece una sección de **Discount** directamente en los ajustes del widget Upsell Products — debajo del área de selección de productos. Esto te ofrece una forma más rápida de establecer o actualizar descuentos en varios productos sin abrir los ajustes individuales de cada producto.

La sección está contraída por defecto. Cuando la expandes:

* Se muestra una lista de todos los productos de la oferta, cada uno con una casilla y una insignia que muestra su descuento actual (por ejemplo, `17% off` o `$18.00 off`).
* Selecciona los productos que quieres actualizar usando las casillas. Todos los productos están seleccionados por defecto.
* Una etiqueta debajo de la lista muestra a cuántos productos se aplicarán tus cambios.
* Usa los campos de tipo y valor del descuento para establecerlo. Los cambios se aplican solo a los productos seleccionados — los no seleccionados conservan sus descuentos existentes.

<div id="mixed-discounts-across-products">
  #### Descuentos mixtos entre productos
</div>

Cuando los productos seleccionados tienen diferentes ajustes de descuento, los campos muestran texto indicativo para señalar la variación:

* Si los productos tienen diferentes **tipos de descuento** (por ejemplo, algunos son % de descuento y otros \$ de descuento), el selector de tipo muestra **Mixed**.
* Si los productos tienen diferentes **valores de descuento** o tipos, el campo de valor muestra **Multiple values** con una nota indicando que introducir un nuevo valor sobrescribirá el descuento actual de cada producto seleccionado.

<div id="info-icon-on-product-rows">
  #### Icono de información en las filas de productos
</div>

Aparece un icono de información (i) junto a la insignia de descuento de un producto cuando ese producto tiene ajustes de descuento adicionales configurados — como un título de descuento personalizado, un precio de comparación o un descuento de suscripción. Al pasar el cursor sobre el icono se muestra un resumen de esos extras.

***

<div id="badge">
  ## Insignia
</div>

El widget de **Insignia** destaca atributos clave del producto, como la popularidad o la urgencia.

Puedes seleccionar una etiqueta de insignia predefinida, elegir entre varios estilos visuales, incluir un icono y controlar dónde aparece la insignia en la oferta o directamente sobre la imagen del producto.

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="Oferta post-compra mostrando una insignia Trending encima del título del producto" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

Se pueden subir imágenes de insignia personalizadas desde **Advanced badge settings** (SVG o PNG, hasta 10 MB).

***

<div id="shipping">
  ## Envío
</div>

El widget de **Envío** controla cómo se comunican los costes de envío.

Puedes ofrecer envío gratuito o cobrar por el envío estableciendo un precio de envío específico.

***

<div id="image">
  ## Imagen
</div>

El widget de **Imagen** controla cómo se muestran las imágenes del producto.

Incluye opciones para ajustar el tamaño de la imagen principal, añadir un borde, habilitar un carrusel de imágenes y subir una imagen de producto personalizada desde **Advanced image settings**.

***

<div id="language">
  ## Idioma
</div>

La sección de **Idioma** controla qué idioma se usa para todo el texto del sistema en la oferta, incluyendo el texto de los botones, las etiquetas de suscripción, las etiquetas de precios y otras cadenas no editables.

Selecciona un idioma en el desplegable **Language** para traducir automáticamente el texto del sistema para esa oferta. Aftersell admite 32 idiomas.

Este ajuste no afecta a las insignias ni a los campos de texto personalizados — solo se traduce el texto generado por el sistema.

***

<div id="buttons">
  ## Botones
</div>

El widget de **Botones** controla cómo los clientes aceptan o rechazan un upsell durante el checkout.

Puedes personalizar el comportamiento y la apariencia de los botones, incluyendo:

* Seleccionar el **texto predeterminado del botón de aceptación**
* Requerir un **clic de confirmación** antes de aceptar un upsell
* Cambiar el **estilo del botón de rechazo** (por ejemplo, botón o enlace)
* Ajustar la **alineación de los botones** y su anchura
* Añadir **texto de apoyo** opcional encima o debajo de los botones, con controles de estilo y compatibilidad con variables dinámicas

<div id="button-text">
  ### Texto de los botones
</div>

Puedes configurar el texto del botón de aceptación de tus ofertas post-compra usando el desplegable **Default accept button text**. Las opciones disponibles dependen del tipo de oferta:

**Ofertas estándar:**

* **Pay Now** - Muestra "Pay Now • \[precio total del producto]" (o "Add Now • Free" para productos gratuitos)
* **Accept Offer** - Muestra "Accept Offer" independientemente del precio

**Ofertas de Subscription Upgrade:**

* **Upgrade Subscription** - Muestra "Upgrade Subscription" (predeterminado para nuevas ofertas de Subscription Upgrade)
* **Accept Offer** - Muestra "Accept Offer" independientemente del precio
* **Pay Now** - Muestra "Pay Now • \[precio total del producto]" (o "Add Now • Free" para productos gratuitos)

Para traducir el texto de los botones, usa la sección **Language** situada encima de la sección Buttons.

<div id="button-layout-options">
  ### Opciones de disposición de los botones
</div>

También puedes controlar la **posición de los botones de aceptar y rechazar** uno respecto al otro. Se admiten las siguientes disposiciones:

* **Accept above decline** - Muestra el botón de aceptar encima de la opción de rechazar
* **Decline above accept** - Muestra la opción de rechazar encima del botón de aceptar
* **Accept beside decline** - Muestra los botones de aceptar y rechazar uno al lado del otro

Estas opciones de disposición te dan más flexibilidad para adaptarte a la experiencia de checkout y la jerarquía de mensajes que desees.

***

<div id="price-breakdown">
  ## Desglose de precios
</div>

El widget de **Desglose de precios** añade claridad en torno a los precios.

Puede mostrar el envío y los impuestos, incluir detalles adicionales como el subtotal y los descuentos, y alinearse o posicionarse cerca de los botones de pago para lograr la máxima claridad.

<div id="hide-shipping-adjustment-line">
  ### Ocultar la línea de ajuste de envío
</div>

Cuando tu oferta está configurada como un replacement upsell (usando el ajuste "Replace item in original order with upsell"), el desglose de precios incluye una línea de **Shipping adjustment** que refleja cualquier diferencia de coste de envío entre el producto original y el de reemplazo.

Puedes suprimir esta línea usando la casilla **Hide shipping adjustment line**, que aparece en la sección Price Breakdown solo cuando hay un replacement upsell configurado. Este ajuste está desactivado por defecto, por lo que las ofertas existentes no se ven afectadas.

* Cuando está marcada, la línea de ajuste de envío se oculta del desglose de precios del cliente.
* Cuando no está marcada, la línea de ajuste de envío se muestra con normalidad.

Este ajuste solo afecta a la línea de ajuste de envío en las ofertas de replacement upsell. La línea de envío estándar en ofertas que no son de reemplazo no se ve afectada.

***

<div id="product-details">
  ## Detalles del producto
</div>

El widget de **Detalles del producto** controla cómo se presenta la información clave del producto.

Admite valoraciones de reseñas del producto (ocultas automáticamente si no existen reseñas), un selector de cantidad opcional y la posibilidad de omitir la oferta si el producto ya existe en el pedido original.

Los títulos y precios de los productos son completamente estilizables y admiten algunas variables dinámicas como `{product}`, `{original-price}`, `{current-price}`, `{savings}` y `{savings-line}`.

Se puede añadir una descripción de oferta opcional para reforzar el valor o la urgencia.

<div id="product-review-star-colors">
  ### Colores de las estrellas de las reseñas del producto
</div>

Cuando **Show product reviews rating** está habilitado, puedes personalizar los colores de la visualización de la valoración por estrellas:

* **Star color** — el color de las estrellas rellenas (activas). Por defecto es `#fdcc0d` (amarillo).
* **Empty star color** — el color de las estrellas sin rellenar (inactivas). Por defecto es `#d1d5db` (gris claro).

Para cambiar los colores, abre los ajustes del widget **Product Details**, habilita **Show product reviews rating** y usa los campos de color para establecer los valores hexadecimales que prefieras.

<div id="quantity-selector-presets">
  ### Valores predefinidos del selector de cantidad
</div>

Cuando el selector de cantidad está habilitado, puedes configurar una **cantidad predefinida** para controlar cuántas unidades se muestran o se permiten cuando se muestra la oferta. Están disponibles las siguientes opciones predefinidas:

* **Fixed** — Establece una cantidad específica con la que empieza el cliente. El selector de cantidad se oculta y el cliente no puede cambiar la cantidad.
* **Percentage of purchased quantity** — Establece la cantidad como un porcentaje del número de unidades que el cliente compró originalmente.
* **Minimum quantity** — Establece un mínimo de cantidad. El cliente empieza en este valor y puede aumentarlo a partir de ahí.
* **Maximum quantity** — Establece un tope de cantidad. El cliente empieza en 1 y no puede aumentar más allá del máximo configurado (hasta 20). Se muestra un mensaje al cliente indicando la cantidad máxima para el artículo.

<div id="description-position">
  ### Posición de la descripción
</div>

Para las ofertas de un solo producto, puedes controlar dónde aparece la descripción del producto en relación con los botones CTA:

* **Default (above buttons)** - La descripción aparece encima de los botones de aceptar y rechazar
* **Below buttons** - La descripción aparece debajo de los botones de aceptar y rechazar

Este ajuste te permite adaptar el diseño para que se ajuste mejor a tu jerarquía de mensajes y preferencias de diseño.

***

<div id="variant-plan-options">
  ## Opciones de variante y plan
</div>

El widget de **Variant & Plan Options** controla la visibilidad de las variantes, la selección y el bloqueo del plan de suscripción.

Puedes mostrar u ocultar las variantes agotadas, ocultar todo el producto si todas las variantes no están disponibles y controlar si se muestran las opciones de variante con una sola opción. **Los ajustes avanzados te permiten ocultar por completo el selector de variantes**.

Las opciones de preselección de variantes incluyen Smart matching con la compra inicial, Unselected (que requiere la selección del usuario) o First available variant.

Para productos con varias opciones de variante, se muestran todas las opciones y se preselecciona una variante en stock cuando está disponible; las opciones agotadas se muestran como no disponibles. Para productos con una sola opción de variante, las opciones agotadas se ocultan.

<div id="subscription-plan-locking">
  ### Bloqueo del plan de suscripción
</div>

Al ofrecer productos de suscripción con varios planes de suscripción, puedes bloquear la oferta a un plan específico. Esto impide que los clientes cambien el plan de suscripción durante la experiencia post-compra, garantizando que reciban exactamente la opción de suscripción que has configurado.

**Para bloquear un plan de suscripción:**

1. En la sección **Variant & Plan Options**, localiza el desplegable **Lock subscription plan**
2. Selecciona un plan específico en el desplegable
3. El plan ya está bloqueado — los clientes verán el nombre del plan como texto estático en lugar de un desplegable modificable

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Panel Variant and Plan Options con el desplegable Lock subscription plan" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**Cuando un plan está bloqueado:**

* Los clientes ven el nombre del plan mostrado como texto
* El desplegable de selección de plan se oculta
* Los clientes no pueden cambiar el plan de suscripción
* Si el plan bloqueado ya no está disponible en Shopify, la oferta vuelve de forma controlada a mostrar todos los planes disponibles

**Restablecimiento automático:**

El ajuste de plan bloqueado se restablece automáticamente si cambias la opción de compra del producto a solo compra única (eliminando la opción de suscripción).

<div id="variant-selector-position">
  ### Posición del selector de variantes
</div>

Puedes controlar dónde aparece el selector de variantes en relación con los botones CTA:

* **Above CTA buttons (default)** - El selector de variantes aparece encima de los botones de aceptar y rechazar
* **Below CTA buttons** - El selector de variantes aparece debajo de los botones de aceptar y rechazar

Cuando tanto el selector de variantes como la descripción del producto están posicionados debajo de los botones CTA, puedes controlar su orden:

* **Variant selector first** - El selector de variantes aparece antes de la descripción del producto
* **Description first** - La descripción del producto aparece antes del selector de variantes

También puedes ajustar el relleno superior e inferior del selector de variantes para afinar el espaciado y crear el diseño visual deseado.

***

<div id="layout">
  ## Diseño
</div>

El widget de **Diseño** controla la estructura general y el espaciado del upsell.

Puedes elegir entre un diseño de una o dos columnas, ajustar la anchura máxima del diseño y afinar el relleno superior e inferior para crear una experiencia limpia y legible.

***

<div id="video">
  ## Vídeo
</div>

El widget de **Vídeo** añade una miniatura clicable a una oferta que abre un reproductor de vídeo alojado en una pestaña nueva, con un fondo estilizado y un botón para volver al upsell. El vídeo se reproduce en una pestaña nueva en lugar de en línea, por lo que la oferta de upsell permanece abierta en la pestaña original.

El widget también admite un **color de fondo** para que coincida con tu marca o para centrar la atención en el reproductor, y **ajustes de diseño** para la alineación (izquierda, centro, derecha) y el relleno superior e inferior.

Para previsualizar la experiencia del cliente, haz clic en la miniatura en la **vista previa de la oferta** del editor. El reproductor de vídeo alojado se abre en una pestaña nueva exactamente como lo hará en el escaparate, para que puedas confirmar la miniatura, el CTA y los comportamientos de cierre antes de publicar.

<div id="browser-compatibility">
  ### Compatibilidad con navegadores
</div>

El widget de vídeo abre el reproductor en una pestaña nueva. En escritorio esto siempre funciona, así que el widget siempre se muestra.

En móvil funciona al revés: Aftersell muestra el widget solo en navegadores que reconoce como capaces de abrir una pestaña nueva sin sacar al cliente del checkout. Eso incluye los navegadores móviles nativos — Safari, Chrome, Firefox y otros bien conocidos — junto con los navegadores integrados de Facebook e Instagram.

**Todos los demás navegadores móviles ocultan el widget.** Eso incluye navegadores integrados como los de la app de Google, TikTok y Pinterest, webviews genéricos y cualquier cosa que Aftersell no reconozca. Como los navegadores no reconocidos se ocultan en lugar de mostrarse, el conjunto de entornos donde el widget no aparecerá no es una lista fija — un navegador que Aftersell no haya visto antes también lo oculta.

Donde el widget está oculto, puedes subir una **imagen de respaldo** para mostrar en su lugar — una imagen promocional estática o un gráfico de marca, por ejemplo. Se muestra sin enlace ni botón de reproducción. Si no se establece ninguna imagen de respaldo, no se renderiza nada en lugar del widget.

<Tip>
  Establece una **imagen de respaldo** en cualquier widget de vídeo que publiques. Como todo lo no reconocido se oculta, tus fuentes de tráfico por sí solas no te dirán si algunos clientes no están viendo el widget — y sin una imagen de respaldo, esos clientes no ven nada en absoluto.
</Tip>

<div id="video-source">
  ### Fuente del vídeo
</div>

El widget reproduce un único vídeo desde una de dos fuentes. Usa el conmutador **Upload** / **Link** en los ajustes del widget para elegir qué fuente usa el reproductor:

* **Upload** — arrastra y suelta o selecciona un archivo MP4, WebM o MOV (hasta 50 MB) para alojarlo directamente en tus Shopify Files. Después de subirlo, Shopify procesa el archivo y aparece una vista previa en el editor.
* **Link** — pega una URL de YouTube, una URL de Vimeo o un enlace directo a un archivo de vídeo alojado (por ejemplo, un MP4 en tu propio CDN).

Puedes rellenar ambas, pero solo se reproduce la fuente seleccionada en el conmutador — la otra se mantiene detrás de su pestaña y **no** se usa como respaldo automático. Si solo hay una fuente establecida, esa fuente se reproduce independientemente del conmutador.

Debes establecer al menos una fuente — un vídeo subido o un enlace de vídeo — antes de poder guardar el widget.

<div id="supported-link-formats">
  #### Formatos de enlace admitidos
</div>

El campo de enlace acepta lo siguiente:

* **YouTube** — usa la URL estándar del vídeo (por ejemplo, `https://youtu.be/VIDEO_ID` o `https://www.youtube.com/watch?v=VIDEO_ID`). Las URL de YouTube Shorts (`youtube.com/shorts/...`) no se admiten — abre el vídeo en YouTube y usa el enlace de compartir en su lugar.
* **Vimeo** — usa la URL estándar del vídeo (por ejemplo, `https://vimeo.com/VIDEO_ID`). Las URL de showcase, y las páginas de canal o perfil que no apuntan a un vídeo específico, no se admiten — usa la URL del vídeo individual desde su barra de direcciones. Una URL de canal o grupo que incluya el ID numérico del vídeo sí funciona.
* **Archivo directo** — una URL HTTPS de acceso público que apunte a un archivo de vídeo (por ejemplo, un MP4 en tu CDN).

<div id="link-validation">
  #### Validación de enlaces
</div>

El editor valida tu enlace en dos momentos:

* **Cuando sales del campo** — si la forma de la URL es claramente incorrecta (por ejemplo, un enlace de YouTube Shorts o una URL de showcase de Vimeo), un error en línea explica qué usar en su lugar.
* **Cuando guardas** — el editor comprueba con el proveedor de vídeo que el vídeo se puede insertar. Si el vídeo es privado, se ha eliminado o tiene la inserción desactivada, el guardado se bloquea y el motivo se muestra en el campo del enlace. Corrige el enlace y guarda de nuevo para continuar.

Si la comprobación del proveedor no está disponible (por ejemplo, por un problema de red), el guardado continúa sin bloquearse.

<div id="shopify-files-permission">
  #### Permiso de Shopify Files
</div>

Subir un vídeo requiere el permiso `write_files`. Si este permiso no se ha concedido, aparece un banner en el área de subida con un botón **Update**. Haz clic en él para conceder el permiso y habilitar las subidas.

<div id="upload-processing">
  #### Procesamiento de la subida
</div>

Después de soltar o seleccionar un archivo, el cargador muestra **Uploading…** mientras el archivo se transfiere, y luego **Processing…** mientras Shopify lo transcodifica. Una vista previa aparece una vez completado el procesamiento. Puedes seguir editando otros ajustes del widget mientras el vídeo se procesa.

No puedes guardar un widget cuya única fuente sea un vídeo que aún se está procesando — el guardado se bloquea hasta que finalice la transcodificación, o hasta que añadas un enlace de vídeo para usarlo como fuente mientras tanto. Si descartas los cambios o cierras el editor antes de guardar, cualquier subida en curso se elimina de Shopify Files.

Los enlaces de vídeo se validan cuando guardas el widget.

<div id="thumbnail-and-watch-video-cta">
  ### Miniatura y CTA de ver vídeo
</div>

Sube la imagen que verán los clientes en la oferta antes de abrir el vídeo. Un CTA de ver vídeo se coloca automáticamente sobre la miniatura para llamar la atención hacia la acción de reproducir. Puedes estilizar el texto de la etiqueta del CTA para que coincida con tu marca. Las miniaturas no se generan automáticamente a partir del vídeo — deben subirse.

También puedes subir una **miniatura exclusiva para móvil**. Cuando está establecida, la miniatura móvil se muestra en dispositivos móviles y la miniatura predeterminada se usa en escritorio, para que puedas adaptar la imagen a cada tamaño de pantalla.

<div id="fallback-image">
  ### Imagen de respaldo
</div>

El ajuste de **Fallback image** te permite subir una imagen para mostrar cuando el widget de vídeo está oculto porque el navegador del cliente no puede abrir el reproductor — consulta [Compatibilidad con navegadores](#browser-compatibility). La imagen de respaldo se muestra sin enlace ni superposición de reproducción; es solo una imagen estática.

Si no se sube ninguna imagen de respaldo, no se renderiza nada en lugar del widget.

<div id="autoplay">
  ### Reproducción automática
</div>

El conmutador de **Autoplay** controla si el vídeo empieza a reproducirse automáticamente cuando se abre el reproductor alojado.

Cuando la reproducción automática está habilitada, el vídeo empieza **silenciado**. La mayoría de los navegadores modernos bloquean la reproducción automática de vídeos con sonido hasta que el cliente interactúa con la página, por lo que reproducir en silencio es necesario para que la reproducción automática realmente funcione de forma fiable. Los clientes pueden activar el sonido del vídeo usando los controles del reproductor una vez iniciado.

Si prefieres que el audio se reproduzca desde el primer fotograma, deja la reproducción automática desactivada y confía en que el cliente haga clic manualmente en reproducir en el vídeo.

<div id="closing-the-video">
  ### Cerrar el vídeo
</div>

Hay tres formas de que un cliente cierre el reproductor alojado y vuelva a la oferta de upsell:

* **Botón Back to offer** — un botón debajo del reproductor que cierra la pestaña y vuelve al upsell.
* **Doble clic en cualquier lugar** — hacer doble clic en cualquier parte del fondo cierra el reproductor.
* **Cierre automático al finalizar** — cuando el vídeo termina de reproducirse, el reproductor se cierra automáticamente.

Como el vídeo se abre en una pestaña nueva, cerrar el reproductor cierra esa pestaña — el upsell permanece en la pestaña original.

<div id="language-and-translations">
  ### Idioma y traducciones
</div>

Los textos de la página del reproductor de vídeo — la etiqueta del botón de volver a la oferta, los avisos de escritorio y móvil, y el título y el mensaje que se muestran cuando el vídeo no está disponible — siguen el ajuste de **Language** de la oferta y se pueden personalizar en **Settings > Translations**.

***

<div id="testimonials">
  ## Testimonios
</div>

El widget de **Testimonios** muestra reseñas reales de productos en tu oferta post-compra para generar confianza y reforzar la decisión del cliente de aceptar un upsell.

Las reseñas se extraen de tu app de reseñas conectada. El widget aparece en el selector del editor de ofertas como **"Testimonials"** con un icono de estrella.

Para usar este widget, debes tener una app de reseñas conectada en **Settings > Product Reviews**. Las apps compatibles incluyen Judge.me, Klaviyo, Okendo y Yotpo. Consulta [Integraciones de apps de reseñas](/es/aftersell/checkout_widget_types#review-app-integrations) para las instrucciones de configuración.

<div id="selection-modes">
  ### Modos de selección
</div>

El widget de Testimonios admite dos modos:

* **Manual** — Seleccionas un conjunto seleccionado de reseñas para mostrar. Las reseñas se muestran en el orden en que las guardaste.
* **Dynamic** — Las reseñas se extraen automáticamente de la caché sincronizada de tu app de reseñas según los productos de la oferta de upsell. Las reseñas están vinculadas a los productos de la oferta, no al pedido original del cliente.

<div id="configuration-options">
  ### Opciones de configuración
</div>

* **Review app** — Selecciona de qué app de reseñas conectada extraer las reseñas.
* **Mode** — Elige Manual o Dynamic.
* **Minimum rating** — Establece la valoración mínima por estrellas para que las reseñas se muestren (por ejemplo, 4 estrellas o más).
* **Display toggles** — Muestra u oculta elementos individuales de la reseña:
  * Valoración por estrellas
  * Título de la reseña
  * Nombre del autor de la reseña
  * Fecha de la reseña
  * Insignia de comprador verificado
* **Truncate review text** — Establece una longitud máxima de caracteres para el texto de la reseña. Las reseñas que superan este límite se recortan con puntos suspensivos.
* **Max reviews to show** — Establece cuántas reseñas aparecen, de 1 a 3.
* **Layout** — Organiza las reseñas en **Horizontal** (una al lado de otra) o **Vertical** (apiladas).
* **Padding** — Ajusta el espaciado alrededor del widget.

<div id="dynamic-mode-and-review-syncing">
  ### Modo dinámico y sincronización de reseñas
</div>

En el modo dinámico, Aftersell importa reseñas de tu app de reseñas y las almacena para poder mostrarlas en la oferta. La primera importación ocurre automáticamente en las 24 horas siguientes a la conexión de tu app de reseñas, y luego una vez a la semana.

Para importar reseñas inmediatamente, ve a **Settings > Product Reviews** y haz clic en **Sync now** para tu app de reseñas.

<div id="verified-buyer-badge">
  ### Insignia de comprador verificado
</div>

Cuando la insignia de comprador verificado está habilitada, se muestra una etiqueta de **"Verified buyer"** en las reseñas que cumplen los requisitos. Esta etiqueta se traduce automáticamente al idioma establecido para la oferta y admite 32 idiomas.

***

<div id="adding-additional-widgets">
  ## Añadir widgets adicionales
</div>

Los widgets se pueden añadir **encima o debajo del widget Upsell Product**, lo que te permite controlar el flujo de información antes o después del propio producto.

Los widgets adicionales que se pueden añadir incluyen:

* **Image** - Muestra una imagen de apoyo para reforzar visualmente la oferta.
* **Text** - Añade texto de apoyo para comunicar mensajes clave.
* **Text & Image** - Combina texto y elementos visuales para destacar el valor o explicar la oferta.
* **Extra Buy Button** - Añade una llamada a la acción adicional para fomentar la aceptación de la oferta.
* **Trust Badge** - Muestra señales de confianza como garantías, seguridad o indicadores de credibilidad.
* **FAQs** - Responde a preguntas comunes de los clientes para reducir la fricción y aumentar la confianza.

Para añadir un widget:

1. Elige si quieres que el widget aparezca **encima o debajo** del widget Upsell Product
2. Haz clic en **Add widget** en la sección seleccionada
3. Selecciona y configura el widget que quieras incluir

***

Para saber más sobre qué son las ofertas post-compra, cómo funcionan y cómo empezar a usarlas con Aftersell, echa un vistazo a [este artículo para más información](/es/aftersell/post_purchase_overview).

***

El comportamiento y la apariencia de los widgets están limitados a las opciones de configuración disponibles en el editor.\
No se admiten personalizaciones adicionales debido a las limitaciones de Shopify.

***

<div id="need-help">
  ## ¿Necesitas ayuda?
</div>

Si tienes preguntas o necesitas ayuda para configurar tus ofertas post-compra, nuestro equipo de soporte está aquí para ayudarte. Puedes contactarnos en cualquier momento a través del chat de la app o por correo electrónico.
