What you are actually setting up
A Shopify Buy Button is a block of embed code that shows a product and a buy action on a site that is not your Shopify store. Shopify describes it as a way to "add your products to your external website and blog posts". Product details you change in the Shopify admin show up on the button automatically. [1]
The page itself stays on Carrd or Framer. Shopify holds the products, inventory, payments and orders. That split is the point: you keep the page builder you like and rent only Shopify's catalogue and checkout.
This guide summarises Shopify, Carrd and Framer documentation read on 30 October 2026. We have not run a live store through this setup, so treat the steps as a checklist to test on your own account.
Requirements on each side
If you already run an older Starter store, Shopify's Starter help page does not mention the Buy Button, so check the Sales channels list in your own admin before you build the page around it. [2]
| Side | What you need | What the docs say |
|---|---|---|
| Shopify plan | Any subscription plan; Basic for most new stores | The Buy Button channel "is included in all Shopify subscription plans". Starter "isn't available to new stores". [1][2] |
| Shopify payments | A supported payment gateway | The setup article says you need a supported payment gateway, listed by country or region, and must add the channel if it is missing. [3] |
| Carrd | Pro Standard ($19/year) or higher | Embed elements require "Pro Standard or higher"; Pro Standard is $19 a year. [5][6] |
| Framer | An Embed component on the page | You add the script tag in the Embed component's HTML section. The help article does not state a plan requirement. [7] |
| Framer custom domain | A paid site plan | Framer's pricing lists a custom domain from Basic ($10 a month) up; Free does not include one. [8] |
Create the button in Shopify
Two limits to plan around. If you put more than one Buy Button on a page, all of them need the same action. And the button's appearance can't be changed after you embed it; you recreate it and replace the code. [4]
- Install the channel: Settings, Sales channels, Shopify App Store, search for Buy Button, Install. [3]
- Choose a product button (one product, one or all variants) or a collection button, which creates a button for each product in the collection. [4]
- Pick the action. "Add product to cart" lets shoppers keep adding items. "Direct to checkout" sends them straight to checkout. "Open product details" shows a pop-up and is not available with the Full view layout. [4]
- Pick a layout: Basic (button only), Classic (image and price) or Full view (image, price and description). [4]
- Decide where checkout opens. The default is a new window; you can switch to the same tab. [4]
- Copy the code from the Embed Code dialog. It contains a script element and a div element. [9]
Paste it into Carrd or Framer
Carrd: add an Embed element, set Type to Code and paste the whole snippet. Use the Inline style so the button appears where the element sits in your layout. Carrd notes that an embed "will not actually output anything in the builder", so publish and test on the live URL. [6]
Framer: insert an Embed component and put the script in its HTML section. Framer's help notes that, depending on the integration, you may need to wrap the script in extra code for it to work, and that some services block embedding through HTTP headers. [7]
If a builder only accepts scripts in the page header, Shopify's instructions for split placement apply: put the script element in the header and the div element where the button should appear. Carrd's Hidden embed style can place code in the Head, Body Top or Body End if you need that. [6][9]
Worked cost: five products off an existing site
Scenario: you already have a Carrd site and want to sell five products averaging $30, with about 20 orders a month. You use Shopify Payments on the Basic plan. Shopify's pricing page lists Basic at $39 a month, or $29 a month billed yearly, with an online card rate of 2.9% + 30 cents. [10]
- Shipping, taxes, apps and product costs are not included.
- If you use a third-party payment provider instead of Shopify Payments, Shopify charges a 2% transaction fee on Basic ($12 on $600), on top of that provider's own fees. [4][10]
- At low volume the plan fee dominates. At 5 orders a month ($150 in sales) the same setup costs about $46 on monthly billing or $36 on yearly billing, roughly a quarter to a third of revenue.
| Line | Monthly billing | Yearly billing |
|---|---|---|
| Shopify Basic | $39.00 | $29.00 ($348 paid for the year) |
| Card processing on $600 (20 x $30): 2.9% = $17.40 plus 20 x $0.30 = $6.00 | $23.40 | $23.40 |
| Carrd Pro Standard ($19 a year spread over 12 months) | $1.58 | $1.58 |
| Total per month | $63.98 | $53.98 |
| Share of $600 revenue | About 10.7% | About 9.0% |
When a Buy Button is the wrong tool
Shopify warns that Buy Buttons are not compatible with Shopify App Store apps, giving a product review app as the example. If your plan depends on reviews, upsell or subscription apps, a full Shopify storefront is the better fit. [11]
For a single digital product or a donation, Carrd Pro Plus ($49 a year) can take payments through Stripe Checkout in a form, without a Shopify subscription. Carrd's payment docs describe one product per form and do not mention a cart, so it suits one or two items, not five with variants. [5][12]
Shopify also does not recommend using Buy Buttons on a Shopify online store or blog, because they can cause cart problems. Use them on the external site only. [1][11]
Pre-launch checklist
- Place a real order with a low-priced test product and refund it, so you see the full checkout and the order notification.
- Check the button on a phone: the checkout window should open, and returning to the page should not lose the cart.
- If you show five products, use one collection button or make sure all buttons share the same action, so carts behave consistently. [4]
- Confirm prices on the page come from Shopify, not hard-coded text, so a price change in the admin cannot leave the page out of date. [1]
- Add your refund, shipping and contact policies to the Carrd or Framer page, since shoppers start there.
Questions before you decide
Which Shopify plan includes the Buy Button?
Shopify says the Buy Button sales channel is included in all subscription plans. Starter is not available to new stores, so most new sellers start on Basic, listed at $39 a month or $29 a month billed yearly.
Which Carrd plan can show a Shopify Buy Button?
Carrd embed elements require Pro Standard or higher. Pro Standard is $19 a year and allows your own code, including script tags.
Does the shopper leave my site to pay?
Checkout runs on Shopify. By default it opens in a new window; you can choose the same tab when you create the button.
Can I change how the button looks after embedding it?
Not directly. Shopify says the appearance cannot be changed after embedding, so you recreate the button and replace the code on your page.
Sources & verification
Product details and prices can change. Check the linked provider before buying.
- Shopify Help Center: Buy Button sales channel Accessed 30 Oct 2026
- Shopify Help Center: Starter plan Accessed 30 Oct 2026
- Shopify Help Center: setting up the Buy Button channel Accessed 30 Oct 2026
- Shopify Help Center: creating a Buy Button Accessed 30 Oct 2026
- Carrd: Pro plans Accessed 30 Oct 2026
- Carrd: embedding custom code Accessed 30 Oct 2026
- Framer Help: how to add an iframe or embed script Accessed 30 Oct 2026
- Framer pricing Accessed 30 Oct 2026
- Shopify Help Center: adding Buy Button embed code to your website Accessed 30 Oct 2026
- Shopify pricing Accessed 30 Oct 2026
- Shopify Help Center: Buy Button FAQ Accessed 30 Oct 2026
- Carrd: setting up payments Accessed 30 Oct 2026
Sources link directly to providers. Product buttons may use separately labeled affiliate links. Read our disclosure.