How can I redirect users back to my website after completing a payment on Shopify using the Shopify Buy button integrated on my Webflow CMS collection, and is it possible to pass parameters to Shopify to track which user (Memberstack) has made a payment?

TL;DR
  • Pass Memberstack user data (e.g., email or ID) as URL parameters into the Shopify checkout URL via customized Buy Button or custom cart link.  
  • Use Shopify’s Order Status Page settings to add a manual redirect or thank-you link back to Webflow, and track user info through URL parameters in the order referral.

To redirect users back to your Webflow site after a payment via a Shopify Buy Button, and track which Memberstack user made the payment, you’ll need to use Shopify's checkout URL options along with URL parameters.

1. Understand How Shopify Buy Button Checkout Works  

  • The Shopify Buy Button creates a cart that redirects users to the Shopify-hosted checkout page.
  • After the transaction, Shopify shows a default thank you/payment confirmation page—there's no native support for a post-checkout redirect.
  • However, you can pass URL query parameters (e.g., user ID or product ID) into the checkout session for tracking purposes.

2. Capture the Memberstack User Info

  • Use Memberstack custom attributes to identify the currently logged-in user, such as their unique Memberstack ID or email.
  • You can dynamically insert these values into your Webflow page using Memberstack's front-end API or attributes like data-ms-member="email".

3. Append Tracking Parameters to Shopify Cart URLs  

  • Customize the Buy Button embed code or build a custom "Add to Cart" button that redirects to Shopify checkout while appending tracking values.
  • Example parameterized checkout URL:  

  https://yourstore.myshopify.com/cart/12345678:1?checkout[email]=user@example.com&customuserid=abc123

  • Use:
  • checkout[email] to pre-fill customer email
  • Additional custom parameters (e.g., customuserid=xyz) for internal tracking

  • Note: Shopify may ignore unknown query parameters in the UI, but you can view them in the order’s referral URL in the admin dashboard for backend tracking.

4. Handling Redirect After Payment

  • Shopify does not support redirecting to external thank-you pages after checkout for standard plans using the Buy Button.
  • Workaround:
  • Use Shopify’s Order Status Page (OSP) section in Settings > Checkout to embed a script or a meta refresh tag for conditional redirect.
  • Alternatively, customize the "Thank you" content (e.g., "Click here to return to our site") with a link back to Webflow like:

    https://yourdomain.com/thank-you?user=abc123

5. Create a Matching Thank You Page in Webflow

  • Build a /thank-you page that reads the returned user parameter from the URL.
  • Optionally, use Memberstack front-end logic to personalize the thank-you message (e.g., "Thanks for your purchase, John!").

Summary

To redirect and track users after a Shopify Buy Button checkout on Webflow:

  • Pass Memberstack user data as URL params into the Shopify checkout URL.
  • Customize Shopify’s thank-you page to include a manual link or redirect to your Webflow site if needed.
  • Track user-based parameters via Shopify’s order referral URL or tags.
  • Full auto-redirection requires Shopify Plus or advanced custom scripting in the order status page.
Rate this answer

Other Webflow Questions