# Shopify Post-Checkout Widget

Referrals frequently come from high-traffic post-checkout pages, making these prime spots to promote your referral program. The Shopify Post-Checkout Widget lets you seamlessly engage customers right after purchase, boosting referrals. By leveraging Shopify’s extensibility framework, this widget delivers a smooth, branded experience that maximizes program impact.

If your program isn’t present here, you may be missing out on valuable engagement and falling behind competitors who already leverage these locations.

#### What is the Shopify post-checkout widget?

Our Post-Checkout Widget leverages **Shopify Checkout Extensibility** to place a branded referral call-to-action (CTA) on post-checkout pages. It mirrors the popular [Instant Access Widget](https://help.impact.com/brand/advocate-program/manage-advocate-participant-experiences/widget-experiences/set-up-an-instant-access-widget) and supports:

* Embedded display
* Popup modal display

Both versions feature two primary widget states:

* Email Capture / User Identification
* Share Page with Referral Details

#### Key features

The Shopify Post-Checkout Widget is designed to maximize referral engagement. It features a two-step flow: first, the widget identifies the user by collecting their email (if they’re not already logged in), and then it displays their personalized referral link or code along with share buttons. For logged-in Shopify users, the email step is skipped entirely for a more seamless experience.

The widget supports both embedded and popup display options, so you can choose the format that best fits your store’s layout and customer experience. It seamlessly connects with your referral program to create or update participant profiles and pull in the necessary referral data, like the share link, referral code, and social sharing options. Up to 3 sharing buttons can be shown, with support for platforms like Email, Facebook, WhatsApp, Messenger, LinkedIn, X (formerly Twitter), and SMS.

Customization is a core feature. You can tailor the content for each step, including headers, subheaders, CTA buttons, and share messages. You also have the option to include an image at the top of the widget for additional branding. Importantly, all these settings can be configured within the Shopify Page Editor, making it easy to adjust without leaving the Shopify admin.

Lastly, the widget is designed to inherit your site’s branding, so there’s no need to manually configure colors or fonts. This ensures a consistent look and feel with the rest of your store.

#### Add the Widget to Your Site

To add the Advocate widget to your Shopify store:

1. Navigate to your *theme editor*.
2. Select the **page navigator** at the top of the screen, then choose **Checkout and customer accounts**.
3. Repeat the step above for the *Thank you* page.
4. In the main section, select **Add block**, then choose **Advocate Referral Widget** from the Impact.com integration section.

#### Widget flow

The widget experience is designed to guide users through two simple steps.

{% stepper %}
{% step %}

### **Step 1:**

The widget prompts your customer to enter their name and email address, unless they’re already logged in to Shopify, in which case this step is skipped automatically. Once the user’s information is captured, they’re either added to your program as a new participant or their details are updated if they’re already in the program.

<div data-with-frame="true"><figure><img src="https://4048883401-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 %}

### **Step 2:**

The customer is shown their referral details. This includes either a unique referral link or a referral code, depending on how the program is configured. The widget also displays up to 3 share buttons, and you can also include a short message above the referral info to encourage sharing and reinforce the program’s benefits.

<div data-with-frame="true"><figure><img src="https://4048883401-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 %}

**Customization options**

All visual content can be configured to reflect your brand’s voice. These customizations will be available directly in the **Shopify Page Editor** for ease of use.

| Customization                | Editable sections                                                                                                                                                                                                                                                                                                                                                            |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Shared Between Widget States | <p>• Image URL (optional)</p><p>• Header (required)</p><p>• Subheader (optional)</p><p>• Terms and conditions link (optional)</p>                                                                                                                                                                                                                                            |
| Popup-specific Options       | • CTA button label (e.g., “Get Started”)                                                                                                                                                                                                                                                                                                                                     |
| Email Collection Options     | <p>• "Start Referring" button CTA</p><p>• Name field (optional)</p>                                                                                                                                                                                                                                                                                                          |
| Share Info Options           | <p>• Custom text above link</p><p>• Select up to 3 share button mediums:</p><p>• Email</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Direct Link</p><p>• Email</p><p>• SMS</p><p>• Facebook</p><p>• Facebook Messenger</p><p>• WhatsApp</p><p>• LinkedIn</p><p>• X (Twitter)</p><p>• Direct Link</p> |
