Add Checkout Page to Swipe Pages

In this help article, you will learn how to add Checkout Page to your Swipe Pages landing page.

With Checkout Page, you can easily create a one-page checkout and add it to your site in different ways.

Here are the instructions for Swipe Pages.

Add a Buy button

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

Follow these steps to do it:

  1. Open the page builder on Swipe Pages
  2. Click on any button on your page if you’re using a template or drag and drop Button from the top-left Modules menu

image-3c22.png
  1. From your Checkout Page dashboard, click on the checkout you want to link to
  2. Then click on Share & embed in the top right corner and copy the Payment link
image-833e3f.png
  1. Return to Swipe Pages and click on your button
  2. In the Click Action section, choose Go to URL as the Action and paste the link from Checkout Page below

image-5c9c.png
  1. Switch on Open in new tab if you’d like your checkout to open in a new tab
  2. Adjust the button text above if you wish to change it
  3. Save and publish your page to preview; you might need to use your browser’s incognito mode to view the most recent changes

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: You cannot add a pop-up to any button in the header as this doesn’t allow you to add the “cp-button” class.

Here’s how to add it:

  1. Open the page builder on Swipe Pages
  2. From the top-left menu, go to Settings and choose Custom Javascript

image-3803.png
  1. Go to your Checkout Page dashboard, click on your checkout and then Share & embed
image-50d6a0.png
  1. Select the Pop up section and copy the Script code under Custom website
image-24cb62.png
  1. Paste this script code into the Header box on Swipe Pages and close

image-2d56.png
  1. Click on any button on your page if you’re using a template or drag and drop Button from the top-left Modules menu
  2. Select the button and go to Advanced to type cp-button under CSS Classes

image-0bad.png
  1. Go to Content tab on the button menu and choose Go to URL as the Action

image-a6be.png
  1. Return to Checkout Page to copy the Payment link and paste it in the field under Action on Swipe Pages
  2. Adjust the button text above if you wish to change it
  3. Save and publish your page to preview; you might need to use your browser’s incognito mode to view the most recent changes

Embed your checkout

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

Let us guide you through it:

  1. Open the page builder on Swipe Pages
  2. From the top-left Modules menu, drag and drop HTML code onto your site

image-de05.png
  1. Go to your Checkout Page dashboard, click on your checkout and then Share & embed
image-4e2411.png
  1. Select the Embed section and copy the Embed code under Custom website
image-e84e8f.png
  1. Paste this embed code into the HTML box on Swipe Pages

image-718e.png

6. Save and publish your page to preview; you might need to use your browser’s incognito mode to view the most recent changes

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