You're integrating Shopify Buy Buttons into your Webflow CMS and want to (1) redirect users after payment back to Webflow and (2) track which Memberstack user completed the purchase. Here’s how to approach this:
1. Set Up a Redirect URL in Shopify Checkout Settings
- Log in to your Shopify Admin and go to Settings > Checkout.
- Scroll to the section labeled Order Status Page / Additional Scripts.
- Shopify does not support custom redirect URLs in its standard checkout for Buy Buttons. However, you can add scripts to the “Thank You” page using Shopify Plus or use workaround tracking methods instead (see below for tracking).
Alternative Option: In the Shopify Buy Button embedding process, Shopify does not allow a redirect after checkout since the transaction is performed on their hosted checkout.
Because of this limitation, you cannot directly redirect the user after purchase. Instead, use a tracking method combined with post-purchase communication.
2. Track Memberstack User via Checkout Notes or Cart Attributes
Since Shopify Buy Button does not allow custom URL parameters or redirects upon checkout completion, the best way to pass user info is:
- When embedding the Buy Button, inject cart notes or line item properties that include the Memberstack User ID or email.
- This lets you store who made the purchase through the Shopify order metadata.
Implementation Steps:
- Use JavaScript to listen for the Buy Button interaction, then attach the Memberstack user ID via Shopify’s cart attributes or properties.
- Example properties: user_id: [Memberstack User ID], email: [Member Email].
- These can be later viewed in the Shopify order details for reconciliation.
3. Fetch Memberstack User Info on Page Load
Before injecting the Buy Button, you can pull user data from Memberstack’s front-end API:
- Access the logged-in user's data using
window.MemberStack.onReady
. - Extract the Member ID or email dynamically.
- Pass that data into the Buy Button initialization as line item properties.
Example:
- When initializing the Shopify Buy Button, configure it to include
properties: { member_id: 'abc123' }
.
4. Reconnect Users Post-Purchase via Thank You Page Tracking
Although Shopify doesn’t let you redirect, you can:
- Add a tracking script to the "Additional Scripts" section of the Order Status Page in Shopify.
- Use Google Analytics, Facebook Pixel, or a webhook/Zapier to track purchases and match them based on included Memberstack parameters.
You can also include the Memberstack user data in the order confirmation email and provide a button back to your Webflow site.
Summary
You cannot directly redirect users back to Webflow after a Shopify Buy Button checkout due to platform limitations. Instead:
- Pass Memberstack user data to Shopify using cart attributes or line item properties.
- Track purchases via Shopify order metadata or scripts on the Order Status Page.
- Optionally, link back to your site through post-purchase emails or thank-you page scripts.
This hybrid method allows you to associate purchases with logged-in users in Memberstack while using Webflow and Shopify together effectively.