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.