You can easily add your checkout to your landing page on Webflow.

Add a Buy button

You can add a Buy button that links to your checkout to open it in the same or new window.

Follow these steps to do it:

1. Open the page builder on Webflow

2. From the left-hand menu, select Add Elements

3. Drag Button and drop it in the desired place on your page

4. From your Checkout Page dashboard, click on the checkout you want to link to

5. Then click on Add to site in the top right corner and copy the payment link

6. Delete # from the URL field in the Link Settings pop-up on Webflow and paste the new link from Checkout Page instead

   

7. Tick Open in new tab if you'd like your checkout to open in a new tab

8. Double-click on the button text to change it as you wish

9. Preview your page through the little eye on the top left and publish when you're ready

Add a pop-up checkout

Adding a pop-up checkout is a great way to let your customers check out on your site while hiding the checkout from those just browsing.

Note: this option requires a paid Webflow account or an active site plan on your Webflow project.

Here's how to add it:

1. Open the page builder on Webflow

2. From the left-hand menu, select Add Elements

3. Click on Embed from the Components section to open the Custom Code window

4. From your Checkout Page dashboard, click on the checkout you want to add and then Add to site

5. Go to the Pop up section and copy the Script code under Webflow

6. Paste this script code into the box on Webflow and click Save & Close

   

7. From the left-hand menu, click on Add Elements again

8. Click on Button to add it to your page

9. Back on Checkout Page, copy the payment link below the Script code

10. Delete # from the URL field in the Link Settings pop-up on Webflow and paste the new link from Checkout Page instead

11. From the button settings on the right side of the page, click the paintbrush to open the Style tab

12. Click on the + under Selector and type in cp-button and enter

13. Publish your page to preview

Embed your checkout

Embed your checkout on your landing page for your customers to finish their purchases on your site.

Note: this option requires a paid Webflow account or an active site plan on your Webflow project.

Let us guide you through it:

1. Open the page builder on Webflow

2. From the left-hand menu, select Add Elements

3. Drag Embed from the Components section and drop it on your page

4. From your Checkout Page dashboard, click on the checkout you want to add and then Add to site

5. Go to the Embed section and copy the Embed code under Webflow

6. Paste this embed code into the box on Webflow and click Save & Close

   

7. Publish your page to preview

Great, now your checkout has been added to your landing page!