Embedding PreProduct Shopify Orders to Smart Builder

PreProduct is a Shopify app that helps you take pre-orders for future items that lets your customers make pre-orders on upcoming products. 

Connecting the PreProduct Unbounce App with your email address allows you to create pre-order buttons specific to your PreProduct products. 

This article explains how to add a PreProduct button to your page, an extension as part of Unbounce Apps.

Installing the PreProduct Button App

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

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 PreProduct Checkout Button to Your Smart Builder page

To add the PreProduct checkout button to Smart Builder, you'll need to replace any element on your page with this PreProduct button instead. These steps will explain how.

1. Single-click an element on the page & click the Change Element icon. 
2. Within the drop-down menu, locate the E-Commerce tab. Select PreProduct from the list:
   
3. The PreProduct button placeholder will appear on your page:
   

To set up the pre-order button,

1. Click the Set up A Pre-order button in the placeholder. 
2. The PreProduct Settings window will appear. 
   
3. Type in your email address associated with your PreProduct account. 
4. Once you confirm your email address, a drop-down menu will appear with your products/items:
   
   
   • Toggle the Conversion Tracking button to track button clicks for the PreProduct button as conversions. 
5. Select a product from the list, and click Apply.
6. The PreProduct button in Smart Builder will update: 
   
7. Edit/redesign the button as you like by clicking the Design Settings icon.

Save and publish your page, and you're all set!

To test the button, navigate to the live version of the landing page.

Click on the PreProduct button from the live page, and a window with steps to completing a pre-order will appear:

Changing or Updating Products for the Button

Follow these steps to replace, update, or change which products customers can pre-order. 

1. Single-click the PreProduct button in Smart Builder. 
2. Click the gear icon to launch the PreProduct Settings again.
3. Select a new product from the drop-down, or click the Refresh List button to see a list of updated products from your account:
   
4. Click Apply and save the changes.

Be sure to save and publish your page.