Overview
Flint pages support embed code placed into specific sections, the same way lead capture forms are added. This makes it possible to include an inline Add to Cart button on a landing page for headless Shopify stores.
The right implementation depends on how your Flint page is hosted relative to your Shopify store:
- •Same root domain - Use Shopify's AJAX Cart API
- •Separate domain - Use Shopify's Buy Button SDK
Scenario 1: Flint Page on the Same Root Domain as the Store
If the Flint page is hosted on a subdomain or subpath of the same root domain as your Shopify store (for example, landing.yourstore.com or yourstore.com/lp), Shopify's AJAX Cart API can be used.
Because the request originates from the same domain, it can tap into the existing cart session and checkout flow natively. No additional SDK is required.
To set this up:
- 1.Ask Flint to add an embed section to your page
- 2.Paste in your AJAX Cart API snippet or a lightweight custom button that calls
/cart/add.js - 3.The button will interact with the store's live cart session
Relevant guides:
- Hosting Setup Guide
- Shopify + O2O Routing Guide
Scenario 2: Flint Page on a Separate Domain
If your Flint page lives on a different domain from your Shopify store, the AJAX Cart API will not work reliably due to cookie and session isolation across domains.
In this case, Shopify's Buy Button SDK is the recommended approach.
The Buy Button SDK is purpose-built for embedding on external sites. It connects directly to the Storefront API and manages its own self-contained cart state and checkout flow, without relying on shared cookies or session state with the store.
To set this up:
- 1.Generate a Buy Button embed code from your Shopify admin under Sales Channels > Buy Button
- 2.Ask Flint to add an embed section to your page
- 3.Paste in the Buy Button embed code
The SDK handles cart creation, product variant selection, and redirect to checkout entirely within its own iframe, so cross-domain limitations do not apply.
Note on Custom Code (Head/Body Scripts)
Custom Code in Flint site settings injects scripts site-wide across all published pages. This is suited for analytics tools like GTM or Google Analytics, not for placing a product-specific widget on a single page.
For an Add to Cart button, use the section embed approach described above instead of Custom Code. This keeps the widget scoped to the specific page and avoids loading unnecessary scripts on every other page of your site.
