Unbounce pre-orders
1. Unbounce pre-orders with Shopify & PreProduct
Unbounce offers a super powerful and intuitive way to create and manage landing pages for new product launches.
However, what if you wanted to start taking pre-orders from one of your landing pages?
For selling physical products, Shopify has been establishing itself as a market leader for quite some time now.
PreProduct is a pre-order app that plugs into Shopify and enables you to launch new products via different kinds of pre-sale.
In the below guide, I’ll show you a quick and easy way to set up Unbounce pre-orders.
Although ordinarily confined to the Shopify store itself, in this guide I’ll show you how to run PreProduct in a ‘headless’ way from your Unbounce page. Enabling easy communication and capture of Shopify / Unbounce pre-orders.
Essentially you’ll be adding a ‘custom HTML block’ to your Unbounce landing page and populating it with a couple of lines of code that PreProduct will automatically generate for you.
Each of the below steps is fairly straightforward, but feel free to get in touch if you run into any issues.
I’ve also recorded a quick video here in case that’s your preferred tutorial format.
Requirements:
- An Unbounce account.
- A Shopify account
- PreProduct installed on Shopify.
2. Step-by-step guide
2.1
- For this tutorial we’ll be using Unbounce’s classic builder. If you don’t have an existing page set up, click the ‘create new’ button in the top right corner of Unbounce.
2.2
- Now click on the triple-dot symbol to the far right of your page’s card area. Then click ‘Edit champion variant’.
2.3
- You’ll now be taken to your page’s editor. Click and drag the ‘custom HTML’ block from the left-side menu onto the page. You should be greeted by a text input modal.
2.4
- Now we just need to generate a snippet in PreProduct to paste into the modal. Start by opening up PreProduct.
2.5
- If you haven’t already created a pre-order listing in PreProduct, create one now by clicking the ‘New listing’ menu item. Then select it from the main dashboard.
2.6
- Now click the ‘Generate headless code’ button on the left-hand side of the dashboard. A modal should pop up with your snippet in a grey text area. Highlight and copy the snippet.
2.7
- Now, back in Unbounce; paste the snippet into the ‘custom HTML code’ modal and click ‘save code’. You can now position the block where you’d like on the page. We generally recommend making the block no smaller than 40% of the desktop page width. Then on mobile, it should be used at around 100% width.
2.8
- The pre-order front-end won’t show properly until you click ‘preview’. Let’s do that now. You should see the pre-order button appear, along with an on-page pre-order cart when clicked. Listing details and styling are controlled from within PreProduct’s dashboard.
4. Summary
Congratulations, you’ve just enabled Unbounce pre-orders from your landing page. Through PreProduct, you’ll now be able to take advantage of Unbounce’s optimisation and design, alongside Shopify’s powerful e-commerce engine.
Pre-orders will flow from your Unbounce page into PreProduct and then at some point, Shopify. Depending on the kind of pre-order listing: ‘pay later’, ‘deposit-based’, or ‘pay now’.
For example; pay later’ pre-orders will just be in PreProduct until you send out payment link emails. Where as ‘pay now’ pre-orders will redirect to your Shopify checkout straight away and flow directly into the Shopify order system.
What kind of pre-order listing to choose is a whole other article in itself. However, ‘time until ship’ is a good point to benchmark against. Is your new product going to be in customer’s hands next month? Well ‘pay now’ pre-orders is probably a good fit.
Or is it more like 6 months with potential delays? Then pay later or deposit-based pre-orders will give you more flexibility and customer goodwill.
Feel free to reach out with any questions or to let us know how your pre-order campaign is going.
We’re always happy to talk ‘pre-orders’ and ‘new product launches’.
