1. Documentation
  2. Unbounce Apps
  3. Purchase & E-Commerce Apps

Adding a Checkout Page to Smart Builder

Follow
Avatar
Tas Kurtu
Last Updated

Do you have a Checkout Page account? Create and embed tailor-made checkouts onto your Smart Builder landing page so that you can convert visitors into customers.

Your visitors can complete purchases on your landing page with these customizable checkouts. You can perfectly fit your checkout into your landing page design. Add your logo, and match your fonts and colors. 

This article explains how to add a Checkout Page to Smart Builder, thanks to Unbounce Apps.

Installing the Checkout Page App

  1. Navigate to the Apps tab on the left-hand side of Smart Builder.
  2. Search and locate the Checkout Page App.
  3. Click the plus button next to Checkout Page to install the app.
  4. You may see a dialog box explaining that you can swap an element on your page with this app:
    A pop-up on top of Smart Builder explaining that this App is swappable.

To learn more about swapping elements, see our documentation: Changing Elements on your Smart Builder Page.

Once you've installed the app, you can apply it to the landing page.

Adding the Checkout Page to Smart Builder

To add a Checkout Page to Smart Builder, you'll need to replace any element on your page with this App instead. These steps will explain how.

  1. Single-click an element on the page & click the Change Element icon. A dialog box will appear.
  2. Within the drop-down menu, locate the E-commerce tab. Select Checkout Page from the list:
    Change element to Checkout Page button.
  3. The Checkout Page placeholder will appear in Smart Builder:
    Checkout Page button in Smart Builder.
  4. Click the blue Add a Checkout button; the Checkout Settings dialog box will appear. 
  5. Paste in your Checkout Link in the field:
    Paste checkout link in Smart Builder.
  6. In the Checkout element drop-down, select either Checkout embed or Checkout button:
    Drop-down menu option to select an embed or button feature.

See the following for the steps:

Checkout embed

This option embeds the whole checkout flow on the landing page.

  1. Select Checkout embed and click Apply.
  2. The Checkout will appear on the landing page:
    A gif demo of a user adding an embedded Checkout Page into Smart Builder.

Checkout button

This option adds a Checkout Page button to your page; you can redirect your visitors to a new page, or launch the checkout within a pop-up. 

  1. Select Checkout button from the Checkout element drop-down menu.
  2. Type in the Button's Text.
  3. Choose the Button Action; options are to Open in new tab or Open in popup:
    Updating the button's text and changing the button action to 'open in a new tab'.
  4. Click Apply. 
  5. The button will appear in Smart Builder:
    Checkout Page button in Smart Builder.

To test, Preview your page and click the button. 

 

And that's it! Remember to Save and Republish your page to finalize these changes. 

Enable Conversion Tracking with your Checkout 

You can enable conversion tracking for purchases made using the Checkout Page app. 

  1. Single-click on the Checkout Page embed or button. 
  2. Click the gear icon to launch the Checkout Settings.
  3. Toggle the radio button with the Conversion Tracking label:
    Radio button to toggle conversion tracking for Checkout Page app.

See Setting Conversion Goals in Smart Builder to learn more about conversion tracking in Smart Builder. 

Related articles