Webflow sync, pageviews & more.
NEW

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
  • Enable Shopify’s post-checkout redirection and set a Webflow thank-you page URL.
  • Dynamically append Memberstack user data as URL parameters to the Shopify checkout link.
  • On the thank-you page, use Memberstack’s API to verify the member and display confirmation.
  • Use Zapier or Make to link Shopify order data back to Memberstack using custom fields or URLs.
  • For advanced control, consider replacing Buy Buttons with the Shopify Storefront API or a headless setup.

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.

5. Limitations with Shopify Buy Button Integration

  • 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.

Rate this answer

Other Webflow Questions