To integrate a dynamic payment button on your Webflow site that redirects users to Shopify Checkout, you’ll need to use Shopify Buy Buttons with dynamic content passed from Webflow. Here's how:
In Webflow, go to Page Settings or Project Settings > Custom Code.
Add the Shopify Buy SDK script in the Before
section:
Script URL:https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js
Add a custom embed element or div with a unique class or ID (e.g., shopify-button-container
) wherever you want the button.
In a <script>
embed below the container, write JavaScript code to:
Initialize the Shopify Buy client using your Shopify domain and Storefront access token (get this from Shopify Admin under Apps > Manage private apps).
Dynamically render the correct product or variant using the extracted IDs.
You can pass dynamic variant IDs via Webflow CMS fields using custom attributes or embeds.
To integrate a dynamic Shopify Checkout button on Webflow, use Shopify Buy Buttons with the Storefront API and Webflow CMS support. Add the Shopify Buy SDK, map variant IDs using CMS or static embeds, and write JavaScript to mount the button. This setup lets users seamlessly purchase through Shopify while browsing your custom-designed Webflow site.