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:

*Each of the above apps have fully functional free trials that you can take advantage of.

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.
  • stage 1

2.2

  • Now click on the triple-dot symbol to the far right of your page’s card area. Then click ‘Edit champion variant’.
  • stage 2

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.
  • stage 3

2.4

  • Now we just need to generate a snippet in PreProduct to paste into the modal. Start by opening up PreProduct.
  • stage 4

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.
  • stage 5

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.
  • stage 6

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.
  • stage 7 stage 7.5

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.
  • stage 8

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’.


 

Offering Shopify deposit payments


1. Why should you offer deposits

1.1 What are deposit-based pre-orders

Offering Shopify deposit payments allow the store to charge a portion of the sale up-front, basically customers are required to pay a portion of the cost of the goods/services to secure the pre-order.

1.2 Benefits of deposit based pre-orders

  • Increases the window of time that you can acquire orders.
  • Start receiving cash-flow before the product is available.
  • Customers have a stronger commitment to the pre-order as they have paid a deposit.

1.3 Deposits in the real world

An example of Shopify deposit payments from the real world is the Holochain Foundation. They harnessed the power of deposits in their rollout of a new decentralised Web 3 platform. Charging an upfront amount for the HoloPort hardware from their audience ahead of the final shipping date. This meant they were in complete control of when to charge the final amount and ship out the HoloPorts. Flexibility like this can come in extra handy with more ambitious product launches like this one.

holoport
ref: www.holo.host

2. Adding deposits manually

2.1 Intro

It is possible to start collecting pre-orders without installing any apps or paying a developer to modify your theme, through a very bare-bones approach. This would not be our recommended approach due to a few reasons, but the steps are listed below if you want to go in this direction:

2.2 Pros and Cons of manual Deposits

Pros:
  • Free of charge.
  • Stays within Shopify’s admin.
Cons:
  • Bad customer experience due to lack of communication touch points.
  • Bad customer experience due to email instructions at payment step as opposed to one click link.
  • A lot of manual work in Shopify, meaning staff expense and possible room for error.
  • Can only safely support purchases of 1 with a deposit (due to discount code).
  • No dedicated analytics on who’s paid a deposit and who’s paid in full.
  • No tagging or deposit specific segmenting in Shopify.

2.3 Steps for setting up a manual deposit listing

  • Create a new Shopify product that will be your ‘deposit’. For example, call it ‘A test product – deposit’ (in the description explain your deposit process and terms).
  • Make sure the product isn’t marked as a ‘physical product’ in Shopify’s product admin. This is so shipping isn’t charged by default.
  • Collect payments and orders of this deposit product.
  • Now list your main product in Shopify with its full price.
  • When you’re ready to charge customers the outstanding amount. Create a Shopify deposit code for the price of your deposit product, it’s important to make it only applicable to the main product that you’ll be charging for. Also, look at limiting the usage to 1 use per product per customer, so it’s not abused.
  • Now go into the ‘orders’ section of Shopify and filter by the deposit product. You can now click on each of these orders, copy the customer’s name and email into a third-party email provider, along with the discount code from step 5 and a link to your main product.
holoport
ref: https://unsplash.com/

3. Adding deposits via PreProduct

3.1 Intro

PreProduct has an automated deposit system which works through your existing Shopify checkout.

3.2 Pros and Cons of running deposits through PreProduct

Pros:
  • Ensure customers are committed to their pre-orders.
  • Receive some money paid upfront, to assist with cash flow.
  • Email campaigns to keep customers in the loop and engaged throughout the pre-order process.
  • Great customer experience with email communication and deferred charges or one click payment links.
  • More automated process so less manual work and room for error.
  • Products on pre-order will automatically gain the Shopify tag ‘pre-order’ and deposit products will gain the tag ‘deposit’ to help with filtering in your Shopify admin.
  • A user interface to choose which of your products/variants will be on pre-order and when.
  • A designated dashboard for your pre-orders, without regular orders being mixed in and analytics to show number of orders received, and number who have paid.
  • Third-party customer support, both technical and strategic.
Cons:
  • PreProduct is a paid app.
  • Has to work within the e-commerce platforms constraints.

3.3 Steps for setting up a PreProduct deposit listing

We have a dedicated doc for deposit listings here.

Dashboard (PreProduct app interface):
  • Navigate to the ‘New Listing’ screen in PreProduct and select/search-for the Shopify product you would like to list.
  • On the next screeen, scroll to the bottom of the screen and click ‘Advanced’, then check the ‘require a deposit’ box.
  • Now enter the amount which customers will have to pay upfront per item and click ‘create listing’. The amount entered defaults to your store’s primary currency.
Front-end:
  • The PreProduct pre-order front-end will explain that a deposit is required, how much it is and then a incentive phrase afterwards.
  • The wording can all be edited via the ‘customise wording’ screen in PreProduct. Just make sure to select ‘deposit based pre-order’ before editing.
Campaign:
  • Pre-orders will populate in the PreProduct dashboards, allowing you to view and interact with them. This includes sending out update emails, as well as eventually triggering deferred charges or sending out payment link emails. (links will automatically have a discount code applied to compensate for the deposit paid)
holoport
A deposit-based pre-order using PreProduct

4. Summary

Offering Shopify deposit payments gives many benefits to Shopify businesses when selling upcoming or out of stock products. Whether it’s increasing cash flow and gross sales or improving forecasting ablility. Using PreProduct to offer deposit based pre-orders can help super-charge the above and improve the customer experience, all whilst saving you time in the process.

Try PreProduct today

Adding pre-orders to Shopify Dawn

The Dawn Shopify Theme

Dawn is Shopify’s exciting new theme. As of the end of August 2021, new stores will be set-up with Dawn as default and have access to a bundle of new features which Shopify are calling ‘Store 2.0’. Among these new features is the long rumoured ‘sections anywhere’ ability, speed increases, support for 3d models out of the box and much more. However, the topic of this article is how to add pre-orders to Shopify Dawn. There are many compelling reasons to offer pre-orders, including their positive effects on cash flow, the flexibility they afford your product launches, and the risks they can offset. If you would like to read more about the benefits and strategies of pre-orders, I wrote an article for the Shopify blog here.

Dawn theme
ref: Shopify

Adding Pre-orders Manually

It’s possible to start collecting pre-orders without installing any apps or paying a developer to modify Dawn through a very bare-bones approach, although I don’t recommend doing this for several reasons that will be soon become apparent. Here are the steps:

Backup your theme
Always backup theme files before you change code, so you have a safe version to revert to if something goes wrong.
    • Shopify has a checkbox in the Shopify product section under ‘inventory’ called ‘continue selling when out of stock’. When checked, your store will accept orders for that product, even when the stock level is 0.
  1.  
      • This next step is the one I particularly don’t recommend, making a change to your store theme. Your store theme’s codebase can be found by clicking ‘Online Store’ from the left hand side of the Shopify admin and then ‘Actions’ -> ‘Edit code’
    • To signal to customers that the product in question is not ‘buy now’ and is a ‘pre-order’. You can change lines 266 – 270 of your ‘main-product.liquid’ file (found in ‘Sections’) from:
{%- if product.selected_or_first_available_variant.available -%}   {{ 'products.product.add_to_cart' | t }} {%- else -%}   {{ 'products.product.sold_out' | t }} {%- endif -%}
    1. to:
{%- if product.variants.first.inventory_policy == "continue" and product.variants.first.inventory_quantity == 0 -%}   pre-order {%- elsif product.selected_or_first_available_variant.available -%}   {{ 'products.product.add_to_cart' | t }} {%- else -%}   {{ 'products.product.sold_out' | t }} {%- endif -%}
*where ‘pre-order’ is the name for pre-order in your store’s primary language. This will mean any 0 stock product with the ‘continue selling…’ box will display ‘pre-order’ as the buy button text.
  • Finally, navigate back to the ‘online store’ screen in Shopify and click ‘Customize’, click through the store preview until you’re looking at your product page. Then click ‘Buy buttons’ from the list of ‘product information’ blocks and uncheck the ‘Show dynamic checkout buttons’ option so that only your main buy button shows up.
On top of the fact that this option hardcodes a change into your store’s theme and doesn’t localize to the user’s language, it also will mean:
  • Muddled up ‘pre-orders’ and ‘buy-now’ orders in your Shopify order section, leading to mistakes and laborious admin.
  • No efficient control of what’s a pre-order and what’s a ‘buy now’ listing in your store.
  • Your store front-end won’t tell customers when they should hope to receive their pre-order.
  • You have no way of communicating with customers during the pre-order process. e.g. ‘Your Red Sneakers are two weeks away from shipping’.
  • Pre-order payment has to be upfront.
  • No way to place limits or any advanced pre-order features on your listing.

All of these drawbacks can very quickly add up to a bad customer experience with a lot of work on your end to stay afloat and in control. Luckily Shopify’s app ecosystem has apps listed by companies who spend their whole time solving these issues and figuring out the best way to increase your pre-orders. The best bit is… thanks to ‘Store 2.0’s new features, you won’t need to write a line of code to integrate one.

Adding a pre-order app

Like I just mentioned, Shopify’s Appstore is home to many pre-order apps that will help you find success with your pre-sales.
PreProduct offers the below benefits, as well as a customisable pre-order cart. However, there are many other good options on the Shopify AppStore. After selecting a pre-order app from the AppStore, simply click ‘install app’ from the top of the page and Shopify will take you through a quick install process.
Pre-order app features can include:

  • A user interface to choose which of your product/variants will be on pre-order and when.
  • A designated dashboard for your pre-orders, without regular orders being mixed in.
  • Customisation of the visual design/messaging of the pre-order button and front-end, including real-time variables like shipping time.
  • Email campaigns to keep customers in the loop and engaged throughout the pre-order process.
  • Different pre-order payment options like; ‘pay later’, ‘deposit’ and ‘pay now’ meaning you can list pre-orders earlier and with more flexibility (and in some countries, conform to necessary legal requirements).
  • Analytics and dashboard for reporting/interacting with the individual pre-orders.

Pre ‘Store 2.0’, permanent code had to be added to your store theme to add a pre-order app, resulting in increased setup time while a developer made the integration, as well as the potential for your theme to acquire more and more third-party code as you installed/uninstalled various kinds of apps.
Now Shopify gives store owners the ability to add something called an ‘app block’. Instead of having a developer add permanent code to your theme, you can simply drag and drop a block into your product page. Meaning you’re in complete control of where the pre-order section goes in your storefront, as well as when to take it out.

How to add a pre-order app block to your product page with Dawn

Once you have a pre-order app installed from the Shopify app store, as long as it supports ‘Store 2.0’, you’ll be able to drag it’s block into your product page exactly where you want it. Here’s how:

    • Navigate to the ‘Online store’ section of your Shopify dashboard.
    • Click ‘Customize’
    • You will now be greeted with Shopify’s drag-and-drop editor. It will currently be set to your home page. Click ‘catalogue’ to go to a collection page and then click on any product to select your product page.
    • Notice the different areas of your product page in the left-hand side bar, signified by the tag icon and name in bold. We want to add to your ‘Product Information’ section, so click the blue ‘Add block’ link at the bottom of that list.
    • A pop-up should appear with a list of blocks under the ‘APPS’ heading. Click the pre-order app’s block.
    • The app’s block has now been added to the ‘Product information’ section. To choose it’s position, click the little back arrow to the left of the apps name so you can see all of the product page blocks again. Then hover over the app’s name in the ‘Product information’ section and drag it up or down until you’re happy with its position.
  • That’s it, you should be all good to go. Don’t forget to save! (Top right corner of the page).
Now that you have pre-orders set up on your store, you can start listing new products straight away and promoting them. Whilst there are specific pre-order marketing tactics, we generally find the usual suspects work well. For example, conversion and abandonment optimisation through an app like Tada, organic/paid social media, influencer partnerships, email marketing etc.

Summary

Once you have finished adding pre-order functionality to Shopify Dawn, you can start taking pre-sales straight away for your future and out of stock products. Now that Shopify’s clever ‘sections everywhere’ app blocks have been released, integrating exciting new features into your store has never been easier.

DTC brand, Brooklinen was birthed from the frustration that a husband and wife had with the high prices of luxury-grade linen. Six years later and they run a highly successful online brand with passionate customers and have raised sixty million dollars in venture funding. After a while, customers were looking to Brooklinen for advice and curation not only for sheets, but for the rest of the bedroom as well. A privileged position to be in, but with a core competency in fabrics and a high standard for the products they put out; going too wide with their product offering didn’t seem wise. Instead, they did something unexpected… Spaces by Brooklinen launched nearly a year ago and is a user-friendly marketplace concept offering a highly curated assortment of home goods from like-minded partner brands, as well as independent designers and artisans. Selling partner products isn’t typical for a DTC brand, but the high calibre products chosen are completely on-brand for Brooklinen. Plus, they can now sell more to customers who are asking for products outside of their portfolio.

 

Opening a partner marketplace is obviously very ambitious and probably requires a large customer base. However, maybe you could partner with a handful of companies instead? Are there brands with a similar ethos, selling in your industry, but with non-competing products? This could increase your average order value and also introduce you to your partner’s following.

Ref1, Ref2

Brooklinen

Image Credit: Brooklinen

Direct-to-consumer cookware brand Great Jones, sells great looking chef-grade products at affordable prices. Co-founder, Sierra Tishgart, explains their cookware innovation strategy; “My pots and pans are highly visible design pieces in my home”, this insight of bringing great design to a fairly drab category, combined with lower pricing for professional quality has helped catapult Great Jones into the industry. Their range centres around Enameled cast-iron Dutch ovens and chef-grade skillets, using the same materials as high-end brands to ensure even distribution of heat during cooking. Instead of basing their market research on consumers, they focused their efforts on chefs. This approach helped them release a serious quality product and not just appear to be one.

 

Making an unattainable product affordable, whilst driving credibility through design is a strategy put to great effect by D2C brands such as Brooklinen and Away. Are their products in your industry usually reserved for professionals that you can now be sold at an accessible price point? With the ability to sell directly to consumers through your online store and avoid retailer margins, some of these traditionally higher-priced products may now be commercially viable at lower price points.

Ref1, Ref2

Great Jones

Image Credit: Grace Jones