> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md).

# Widget de poscompra de Shopify

Las referencias suelen provenir de páginas poscompra con mucho tráfico, por lo que estos son lugares ideales para promocionar tu programa de referidos. El widget posterior a la compra de Shopify te permite interactuar con los clientes sin problemas justo después de la compra, impulsando las referencias. Al aprovechar el marco de extensibilidad de Shopify, este widget ofrece una experiencia fluida y coherente con la marca que maximiza el impacto del programa.

Si tu programa no está presente aquí, es posible que estés perdiendo interacciones valiosas y quedándote atrás frente a competidores que ya aprovechan estas ubicaciones.

#### ¿Qué es el widget posterior a la compra de Shopify?

Nuestro widget posterior a la compra aprovecha **Shopify Checkout Extensibility** para colocar una llamada a la acción (CTA) de referidos con la marca en las páginas poscompra. Se parece al popular [Widget de acceso instantáneo](/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget.md) y admite:

* Visualización incrustada
* Visualización en ventana emergente

Ambas versiones presentan dos estados principales del widget:

* Captura de correo electrónico / Identificación del usuario
* Página para compartir con detalles de referencia

#### Características clave

El widget posterior a la compra de Shopify está diseñado para maximizar la interacción con los referidos. Cuenta con un flujo de dos pasos: primero, el widget identifica al usuario recopilando su correo electrónico (si aún no ha iniciado sesión) y, luego, muestra su enlace o código de referido personalizado junto con botones para compartir. Para los usuarios de Shopify que han iniciado sesión, el paso del correo electrónico se omite por completo para ofrecer una experiencia más fluida.

El widget admite opciones de visualización tanto incrustada como emergente, por lo que puedes elegir el formato que mejor se adapte al diseño de tu tienda y a la experiencia del cliente. Se conecta sin problemas con tu programa de referidos para crear o actualizar perfiles de participantes y obtener los datos de referencia necesarios, como el enlace para compartir, el código de referido y las opciones para compartir en redes sociales. Se pueden mostrar hasta 3 botones para compartir, con compatibilidad para plataformas como correo electrónico, Facebook, WhatsApp, Messenger, LinkedIn, X (antes Twitter) y SMS.

La personalización es una función esencial. Puedes adaptar el contenido de cada paso, incluidos encabezados, subtítulos, botones CTA y mensajes para compartir. También tienes la opción de incluir una imagen en la parte superior del widget para reforzar aún más la identidad de tu marca. Y lo más importante: todos estos ajustes se pueden configurar dentro del Editor de páginas de Shopify, lo que facilita hacer cambios sin salir del panel de administración de Shopify.

Por último, el widget está diseñado para heredar la identidad de marca de tu sitio, por lo que no es necesario configurar manualmente colores ni tipografías. Esto garantiza un aspecto y una sensación coherentes con el resto de tu tienda.

#### Añade el widget a tu sitio

Para añadir el widget de Advocate a tu tienda Shopify:

1. Ve a tu *editor de temas*.
2. Seleccione el **navegador de páginas** en la parte superior de la pantalla y, luego, elige **Pago y cuentas de cliente**.
3. Repite el paso anterior para la *de agradecimiento* .
4. En la sección principal, selecciona **Añadir bloque**, luego elige **Widget de recomendación de Advocate** desde la sección de integración de impact.com.

#### Flujo del widget

La experiencia del widget está diseñada para guiar a los usuarios a través de dos sencillos pasos.

{% stepper %}
{% step %}

#### **Paso 1:**

El widget solicita a tu cliente que introduzca su nombre y su dirección de correo electrónico, a menos que ya haya iniciado sesión en Shopify; en ese caso, este paso se omite automáticamente. Una vez que se captura la información del usuario, se le añade a tu programa como nuevo participante o se actualizan sus datos si ya estaba en el programa.

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-061bb6690e6b6dfa4a077b1ec06087f561906dac%2F571f95c03ce48a5309bb35fa3dfb1dd9f52648a8250997c9c024c97d40539df8.png?alt=media" alt="" width="484"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### **Paso 2:**

Al cliente se le muestran los detalles de su referencia. Esto incluye un enlace de referencia único o un código de referencia, según cómo esté configurado el programa. El widget también muestra hasta 3 botones para compartir, y además puedes incluir un breve mensaje encima de la información de referencia para animar a compartirla y reforzar los beneficios del programa.

<div data-with-frame="true"><figure><img src="https://3147719151-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6a0f04d21deba06ba46938c9470f105773008db9%2F4629f5cdc1fb6845cb83f3e4a6b50b677072e4915ce88d4aa69726630b9c96bb.png?alt=media" alt="" width="492"><figcaption></figcaption></figure></div>
{% endstep %}
{% endstepper %}

**Opciones de personalización**

Todo el contenido visual se puede configurar para reflejar el tono de tu marca. Estas personalizaciones estarán disponibles directamente en el **Editor de páginas de Shopify** para facilitar su uso.

| Personalización                              | Secciones editables                                                                                                                                                                                                                                                                                                                                                                                                                               |
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Compartidas entre los estados del widget     | <p>• URL de imagen (opcional)</p><p>• Encabezado (obligatorio)</p><p>• Subencabezado (opcional)</p><p>• Enlace a términos y condiciones (opcional)</p>                                                                                                                                                                                                                                                                                            |
| Opciones específicas de la ventana emergente | • Etiqueta del botón CTA (p. ej., “Comenzar”)                                                                                                                                                                                                                                                                                                                                                                                                     |
| Opciones de captura de correo electrónico    | <p>• CTA del botón “Empezar a recomendar”</p><p>• Campo de nombre (opcional)</p>                                                                                                                                                                                                                                                                                                                                                                  |
| Opciones de información para compartir       | <p>• Texto personalizado encima del enlace</p><p>• Selecciona hasta 3 medios para los botones para compartir:</p><p>• Correo electrónico</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Enlace directo</p><p>• Correo electrónico</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Enlace directo</p> |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.impact.com/brand/es/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/shopify-post-checkout-widget.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
