To redirect users back to your Webflow site after a Shopify Buy Button checkout, and track which specific Memberstack user completed the purchase, follow these steps:
1. Enable Redirect After Checkout in Shopify
- Log into your Shopify Admin.
- Go to the “Settings” → “Checkout” section.
- Scroll to “Order processing” and look for “Post-checkout redirection”.
- Enter the URL you want users to return to, such as:
https://www.yoursite.com/thank-you
Shopify’s native Buy Button checkout will always redirect back to the store domain unless deep integrations or workarounds are applied. So we’ll create a workaround using URL parameters.
2. Add Dynamic Parameters to the Checkout URL
- In your Webflow CMS or static page with the Shopify Buy Button, append Memberstack user data as query parameters to the Shopify cart or checkout URL.
- Example:
https://checkout.shopify.com/cart/...?step=1&memberId=ABC123&productId=XYZ789
- You can pull Memberstack user data via their front-end API:
window.MemberStack.onReady.then(({ member }) => { member.id })
Keep in mind: Shopify Buy Buttons create their own checkout path dynamically. You may need to customize the Buy Button code to inject parameters (via JavaScript) into the final checkout URL.
3. Handle the Return URL on Webflow
- Use a Webflow CMS “Thank You” page like:
https://www.yoursite.com/thank-you?memberId=ABC123
- On this page, use Memberstack's front-end API to verify:
- That the
memberId
in the URL matches a logged-in member. - You can optionally trigger a success message or log the event via Zapier or Make.
4. Track or Store Purchase Events
- You cannot use standard Webflow form submissions for Shopify purchases.
- Instead, use:
- Zapier or Make automation listening to Shopify orders (via Shopify’s webhook or integrations).
- Match the
note
, cart attribute
, or custom checkout field (if using Shopify Plus or custom API) to the memberId
. - Store the result in:
- Memberstack custom fields (via API),
- Google Sheets,
- Airtable, or other external databases.
- Buy Buttons are limited in URL customizations.
- You can’t easily add post-purchase metadata to Shopify orders unless you're using custom apps or Shopify Plus.
- For more advanced tracking, consider:
- Using Shopify Storefront API instead of the Buy Button.
- Creating a custom headless checkout flow integrated with Webflow and Memberstack.
Summary
To redirect users after checkout and track which Memberstack user made the payment, pass their memberId
as a URL parameter in the Buy Button or checkout URL, then use Webflow’s return page to decode and match it. For robust tracking, connect Shopify order events with Memberstack via Zapier or custom API workflows.