Category: Shopify

How Merchants Can Leverage Shopify Deferred Payment and Vaulted Card Tech

Posted on by Eliza

Contents

What is a deferred payment order?

Understanding how you can leverage shopify deferred payment and vaulted card tech, can be very beneficial for business.

A deferred charge/payment method, allows a customer to place a pre-order, but instead of paying for the pre-order straight away, they accept a future charge and the associated payment terms. The card details are vaulted so it can be charged at a later stage.

Traditionally customers are charged for an order at the time of placing the order; whereas with deferred charge, the merchant can choose to either charge the full payment at a later time, or to take a deposit/partial payment at the time of the order, and then bill for the remaining amount later.

Using deferred payments can be really powerful when paired with pre-orders, especially when merchants are unsure how long manufacturing/freight may take.

Customers are less likely to be frustrated by delays as they have not yet paid for the item, this gives the merchant flexibility with which dates they choose to charge and fulfil the order.

Deferred payments are also convenient when customers have a change of mind, as no refund is needed.

How do deferred payments work on Shopify?

Shopify has the ability to set up a special ‘purchase option’ for selling products. When a product is purchased with this applied, the customer won’t be charged upfront. They’ll still go through checkout and enter their card details and review the order, but will accept a future deferred payment for the product, Shopify then vaults the card details with Stripe.

To use these special ‘purchase options’ and therefore offer deferred payments you will firstly need to install a Shopify app that offers and supports deferred payments.

Our app, PreProduct offers deferred payments and can be found here. The app will generate the purchase options (the technical name in Shopify’s APIs is ‘selling plan‘) on your behalf with any discounts/deposits/terms included, and communicate this to shoppers, with the approximate soonest due date shown. This can be edited as and when needed.

Then when you are ready to bill customers you have two options. You can either trigger the deferred charge in a one-by-one fashion from your Shopify admin in the orders section (like the screenshot below).

Or you can trigger the charges via the third party app you have installed. We recommend this option as it is a quicker and a simpler process, and can be done via the app without going into Shopify admin.

You can also keep customers updated on the payment schedule, and final payment due date via the fully customisable email campaign (as well as trigger dunning flows if cards fail)

Vaulted card VS card authorization periods VS invoice/draft-order

Vaulting card details is the process used by Shopify for deferred charges. The customers place a pre-order, and are taken to the store’s checkout. They will then enter their card details and accept a future charge. Then instead of being charged for the order, Shopify will vault and store the card details, so that they can be programatically run through checkout at a later date when the store is ready.

In comparison, the process of card ‘authorization’ is where the card issuer gives approval that the customer has sufficient funds available to meet the transaction and will accept the charge if it’s made in a certain window of time. Generally most authorisation periods will last for 5 -10 days and then expire, so the store will need to capture the charge in this time period or risk it expiring.

Vaulting is great as it’s not limited to the average 5-10 day window, as the details are recorded on file before triggering the payment.

Authorization is less flexible due to this limited window in which the payment can be charged, but does have the advantage that the credit card company will check that sufficient funds are available at checkout.

However, if the vaulted card has insufficient funds or is expired, supporting apps (like PreProduct) will show the reason for the error and let you deploy a dunning flow to try and rescue the order.

Another approach which is often used by wholesale stores is Shopify “draft orders”. These aren’t technically deferred charge as they work by sending out payment invoice emails. These invoice emails contain links which customers can use to check out.

Whilst it is technically a ‘pay later’ method (as the customer can lodge an order with you and then pay later) no future transaction is captured, it’s just a way of capturing the order intent, then starting the transaction later on.

Unless you have a specific use-case that requires draft orders, we recommend using the ‘vaulted card’ method as it allows you to send the customer through checkout once at the time of order, and then capture the payment in the future at your convenience.

When to offer deferred-charge as a customer’s payment method?

For pre-order campaigns

Deferred payments can be really helpful for pre-order campaigns, and can assist you to sell more products, as customers do not need to pay the full amount upfront, and instead pay at a later date. You can either choose to collect the full amount via deferred billing at a later date, or you can use deposits and bill a portion upfront (the deposit) and then the remaining at a later date.

pre-order
Made to order

When there is very high demand for a product, or the product requires extensive time to create/make, ‘made to order’ can be a great strategy; as it allows you to control the number of orders you accept and manage inventory. Deferred payments can be useful for this strategy, especially if customers may be waiting for an extended period to receive the product.

Try-before-you-buy

‘Try before you buy’ is a sales technique that lets customers try on or test a product before committing to purchasing. This is commonly used for larger price point products, as well as when the customer is deciding between multiple products, models or styles. Using deferred payments with this type of selling method would be be a great way to reduce risk and sell more. The customer accepts the future payment, but then is only billed if they choose to keep the item.

Which payment method is supported and what are the requirements?

Currently both Shopify payments and PayPal support deferred-charge for Shopify stores. Any type of credit card can be ‘vaulted’ as it is simply recording card details for when the payment’s due. If the card can go through checkout in a buy-now situation it should work for deferred payment (as long as you’re using Shopify payments/PayPal).

Payment methods

Shopify ‘pay later’ advantages

Shopify pay later offers many advantages for merchants as well as customers. For merchants the biggest advantage is that you can make the payment due request when it suits your business. You may have manufacturing delays, or shipping hold ups, and want to delay the payment due date.

Another advantage for merchants is that you are not limited to short 5/10/30 day periods like when using credit card authorization. As the card is instead vaulted with Shopify and the time period is not limited.

For consumers, there is a both a psychological and convenience factor, as they are able to commit to a purchase without having to give immediate payment.

Shopify ‘pay later’ disadvantages

The only real disadvantages of using Shopify ‘pay later’ is the potential for failed charges. This can happen because of expired cards or the customer not having sufficient funds in their account.

A supporting third party app (like PreProduct), should have the ability to send failed charge emails for failed deferred charge payments which will allow the buyer to rectify the payment or pay with another card.

Summary

Integrating Shopify’s Deferred Payment and Vaulted Card technology into your store offers a practical solution for managing pre-orders and cash flow, especially during uncertain manufacturing and shipping times.

By deferring payments, customers are more inclined to commit to a purchase, knowing they aren’t immediately out of pocket, particularly for items not instantly available. This method significantly reduces the administrative hassle of refunds should they change their mind. Offering a much more seamless experience than charge-upfront pre-orders.

Overall, Shopify deferred payment provides merchants increased flexibility in managing revenue streams while maintaining customer satisfaction and trust.

Shopify Deferred Payment Method FAQ

Yes if you use a 3rd party app (like PreProduct) with a payment provider (like PayPal or Shopify Payments) that supports deferred payments, you are able to delay charging until a later time.

Can you delay payment on Shopify?

To allow customers to pay later on Shopify, you can use deferred charge via a 3rd party app. The customer will place the pre-order, no money is exchanged immediately, and then when you are ready to charge, you will trigger the deferred charge.

How do I allow customers to pay later on Shopify?

Currently Shopify Payments and PayPal are supported on Shopify for deferred charge, so you could use PayPal instead.

What happens if I don’t use Shopify payments?

You trigger the deferred payment when you are ready to charge, Shopify will then use vaulted card details and charge the consumer for the remaining amount (if using a deposit) or the full amount (if 100% charge later).

How does pre-order payment work?

Yes. Subscriptions use periodically trigger deferred charges on the customers card; Typically right before the due item is set to be fulfilled.

Do subscriptions use deferred payments?

Some Shopify pre-orders apps (like PreProduct) generate a customer portal where shoppers can check the payment status of their pre-order’s deferred payments and when it is expected to ship.

How can customers check on their deferred payments?

Pre-sell With PreProduct

7 day free trial with all plans

shopify app store badge
BigCommerce app store badge
different platform badge

How to set up pre-orders on Shopify

Posted on by Eliza

Contents

1. Introduction

Pre-orders can be a great tool for your online store, with potential to increase hype around new releases whilst solving your cash flow problems. It’s beneficial to understand how to set up Shopify pre-orders.

What is a pre-order?

A pre-order is where customers can place orders for products or services before they become available for general sale. Essentially, customers are buying an item before it is physically in stock or released.

There are several benefits to setting up pre-orders:

Pre-orders can provide insight for Shopify stores about the demand for their products.

By seeing how many people are pre-ordering an item, stores can adjust their production and inventory management to meet demand. This can help them avoid overproduction, which can lead to excess inventory and financial losses. If you plan to use pre-orders for probing future demand, we recommend capture-only or charge-later pre-orders, that way customers aren’t being charged anything until you’re comfortable moving forwards.

Pre-orders can generate buzz and excitement for a product before its release.

By allowing customers to pre-order, store owners can boost hype and create a sense of exclusivity around new releases. It also gives you an opportunity to launch twice in a way, once for the pre-order release and once again when the product arrives and you start taking regular buy-now orders.

Pre-orders can boost your online store cashflow, as they can capture revenue upfront.

When customers pre-order products, they typically pay the full price or a deposit at the time of the order, which provides stores with a cash flow boost before the product is even released. This can be especially helpful for small businesses or startups that may not have access to significant capital or financing (although financing options for small e-comm brands is in improving!) .

2. Set up pre-orders on Shopify

Does my Shopify store support pre-orders?

All Shopify stores are capable of supporting pre-orders, however not all payment processors support deferred-charge pre-orders. Currently both Shopify Payments and PaPal are supported, however you will run into issues when using an unsupported third party payment gateway or even Shop Pay.

That said, Shopify will automatically hide any unsupported payment providers from your checkout. So, as long as you have Shopify Payments or PayPal enabled, you’re good to go and move forward to set up pre-orders on Shopify.

Installing a Pre-order App

To get started and set up pre-orders on Shopify, visit the Shopify App Store and search for “pre-order”, then select the app you wish to install.

Once you have located the app, click on it to access the app listing page, and then select the “Add app” option.

To grant the app access to your Shopify admin account, click “Install app” and authorize its use.

Integrating the App with Your Storefront

Shopify 1.0

If your Shopify theme is Shopify “store 1.0” and you’re not comfortable with customising the code of your product template, then I’d recommend contacting the app developer, as they’ll need to edit code to add their snippet to your online store.

Generally the process is to locate the Shopify theme file containing the “buy” button and insert the app’s customized code beneath the {% endform %} liquid tag. This will let the app’s script determine which product the pre-order button should apply for (if any) when running on that page.

Keep in mind that the file name may differ, but commonly it will be one of: product-template.liquid, product-form.liquid, or product-main.liquid, among others. (Typically in your ‘sections’ or ‘snippets’ folder)

*We also recommend saving your theme file locally first, incase of any mistakes. That way you have a backup if anything goes wrong, as well as being able to take advantage of powerful code editor ‘file find’ tools like ‘find in project’.

Shopify 2.0

With the introduction of Shopify 2.0, app blocks can now seamlessly integrate into the Shopify admin’s drag-and-drop theme customizer, making it much easier to set up pre-orders on Shopify. (‘app block’ is effectively the same as a ‘snippet’ in this context)

App blocks streamline the product pre-order template installation process, as well as automatically removing themselves if you uninstall the app.

Listing Pre-orders on Shopify

Once you’ve completed the above steps to integrate the app with your Shopify storefront, you can now start pre-selling!

Begin by listing a product in your selected pre-order app. Most if not all pre-order apps sit on top of your existing Shopify product listings. Once listed in the app, the pre-order product page’s cart button text should be replaced with a pre-order version, accompanied by any other front-end additional information, i.e. special pre-order messaging.

You will need to decide which type of pre-order to use, generally depending on the payment settings they use. The general pre-order types are:

  • Charge upfront pre-order – 100% charged upfront (Most apps will offer this).
  • Charge Later pre-orders – 100% charged later when you trigger the charge.
  • Deposit-based pre-orders – A percentage paid upfront, with the outstanding charged later.
  • Capture-only pre-orders – A payment link is sent once you’re ready to send customers through your payment gateway.

Different apps may support or not support any of the above, so it’s important to research this ahead of installing (for example, PreProduct’s list is here).

What kind of pre-order should you use?
pros, and, cons

The below is just a set of rough guidelines from what I’ve seen running a pre-order solution over the years.

Charge upfront pre-orders are useful if you need the cash flow upfront, and appropriate if you have a good idea of when the pre-order items will be ready for shipping. Charging upfront also comes with a higher commitment from customers, over something like capture-only or notify-me-when-in-stock.

Charge upfront may not be the best type of pre-order if you’re worried about manufacturing delays or freight issues. Customers could become frustrated if they’ve fully paid, but then have unexpected delays receiving the product.

Charge later pre-orders can be one of the better choices when you’re not sure how long manufacturing may take, or when there is some uncertainty around production and supply chain. As customers will be less inclined to be annoyed by delays when they haven’t parted with any money yet. It’s still important to keep customers informed of delays though.

Charge later is also convenient if customers have a change of mind, whilst waiting for the out of stock product to come in; because no refund is needed, the pre-order can just be cancelled (without any bank transaction started/cancellation needed).

Deposit-based pre-orders is a good alternative that sits between charge upfront pre-order and charge later pre-order. This type of pre-order shows commitment from customers, but also means customers do not need to pay for the full product upfront, which can help increase pre-order sales by lowering the price to buy for customers.

Capture-only pre-orders can be a great pre-order option when you need to gauge interest. They require the least amount of commitment from both the buyers and shop owners. Similar to a back-in-stock flow, customer’s only go through checkout once the product’s available and can be imminently shipped.

Deciding on a pre-order shipping statment

When creating a pre-order listing, you will also need to set a shipping statement. This could be in a period of days or fixed phrase (ie ‘Next Summer’). The balance here is that a pre-order listing with too vague a shipping statement can deter potential buyers, however an exact shipping statement with a much longer duration can also detract from the willingness to buy.

At PreProduct, generally we advise merchants to keep it specific when they can. With the caveat that you should go with what’s comfortable and if that’s not committing to an exact date, then that’s a completely sensible decision. You should also bear in mind that the communicated shipping statement can be changed at any point (well in a lot of apps at least).

Choosing an exact pre-order shipping statement
Using a less specific pre-order shipping statement

Shopify product settings

The product/variant section of the Shopify admin dashboard contains an option to enable the ‘continue selling when out of stock’ feature. This setting is crucial when utilising pre-orders and has two important purposes:

  1. If a product has zero stock and the box is unchecked, customers will not be able to purchase it. However, if the box is checked, the product can still pass through the checkout, whatever the inventory level. Some apps (eg PreProduct) automatically manage this box, when creating/finishing a pre-order listing.
  2. Furthermore, most Shopify themes display an ‘out of stock’ message when a product/variant has zero stock and the box is un-ticked. Ensuring the ‘continue selling when out of stock’ box is ticked will prevent this message from being displayed.

3. Offering Discounts on Pre-orders

Basic Discount Setup

If you’re not using a pre-order app, you can set up a discount in any theme by altering the ‘Price’ and ‘Compare at Price’ in the Shopify product admin. The ‘Compare at Price’ is the original price and the ‘Price’ is the discounted price. This means the Shopify will know that there is a discount and your theme will most likely reflect this on your front-end. 

Purchase Options Discounts

For pre-order listings that use purchase options (in PreProduct’s case, this is every kind apart from capture-only listings), rather than altering the price of the product directly on Shopify, the discount is applied at the pre-order listing and order level.

This means that the discount is fixed for any pre-orders already captured, but if you decide to change the discount for future pre-orders, they’ll have the updated subtraction applied. This is great, as you don’t need to worry about the price change; and furthermore, can even change the Shopify product price without impacting previous pre-orders.

With early bird discounts, you can enable customers to commit to a purchase early on and capture more sales, this is due to a created sense of exclusivity and urgency. Tapping into the classic psychology of ‘wanting more for less’ and FOMO.

Letting early adopters get in early can boost customer loyalty, and rewarding these customers with a discount can boost this dynamic even more so.

4. Setting up pre-orders on Shopify to use deposits

Creating Deposit-based pre-orders

When you set up pre-orders on Shopify and create a listing, there should be an option to choose whether to capture deposits/partial payments for pre-order listings in supporting deposit pre-order apps.

When creating a pre-order listing, you will just need to select the deposit type: fixed amount or percentage. This will be communicated on the product and cart pages, as well as next to the payment authorization section of the checkout.

How do deposit pre-orders work?

Pre-order listings that use deposits will communicate to customers the price and terms of the order before they click the pre-order cart button. They’ll then be directed through your usual checkout process, however there will be details of the deposit price, the outstanding price, as well as when the merchant plans to charge it. Then once you’re ready to trigger the outstanding payment, you can trigger the charge via your pre-order app. Usually this is is powered by vaulted credit card technology so no further action is needed from the customer.

Using deposits can be beneficial as they require customers to commit a portion of the pre-order payments upfront, demonstrating a genuine interest and commitment to purchasing the product.

Deposits provide an immediate influx of cash for the business, which can be crucial for covering production costs, marketing efforts, or other expenses related to fulfilling pre-orders. It’s completely up to you whether you implement a non-refundable deposit policy.

Charging Tax and Shipping Fees

When using deposit based pre-orders, both shipping and taxes will be charged in the final outstanding amount, not in the deposit amount. Your existing tax and shipping profiles will be respected.

5. Summary and Conclusion

In summary, to use and set up pre-orders on Shopify offers several powerful advantages for ecommerce stores.

  • They provide valuable insight into product demand for pre-order products, enabling stores to predict inventory amount and avoid overproduction.
  • Pre-orders generate anticipation for a product, improving hype for your future releases.
  • Lastly, pre-orders can generate upfront revenue, providing cash flow before product release, something that ecommerce companies of all sizes can get excited about.

If you are interested in giving pre-orders on Shopify a go and experiencing some of these benefits I mentioned above, we’d love you to start a free trial of PreProduct today.

Get the Shopify App

Eliza Wegener

Co-founder @PreProduct

Pre-sell With PreProduct

7 day free trial with all plans

shopify app store badge
BigCommerce app store badge
different platform badge

How to do pre orders on Shopify

Posted on by admin

Contents

1. Introduction

Pre orders are advance orders placed by consumers for a product or service that is scheduled for future release.

They are a marketing strategy used by e-commerce businesses to enable customers to purchase a product before it is officially released or available for purchase as well as for out of stock products.

Understanding how to do pre-orders on Shopify can be very valuable & useful for your business.

1.1 Pre-order benefits for both businesses and consumers

Customer Commitment: It allows businesses to gauge the level of interest in their product before production or release.

The number of pre-orders can indicate the potential success of the product, and will allow you to make sure you can meet customer demand.

Guaranteed Sales: Firms can secure a certain number of sales even before the product is officially available, helping with revenue generation/cash flow and to manage inventory, which can be very important for smaller or newer businesses.

Marketing and Hype: Pre-orders generate buzz and anticipation around a product, helping to build excitement and anticipation among consumers, as well gauging demand and ensuring there is sufficient interest in a new product before investing in production.

Incentives: Many companies offer incentives to encourage pre-orders, such as exclusive content, discounts, or limited-edition items, to reward early supporters, this also assist in nurturing customer loyalty.

2. How pre orders work

2.1 Announcement

Companies announce their upcoming product or service, providing details about its features, release date, and pricing.

2.2 Pre-Order Period

A specific pre-order period is set during which customers can place their orders. This period typically begins well before the official release date.

2.3 Reservation

Customers interested in the product can place an order, usually through various channels, including online platforms, physical stores, or official websites.

shopping, online, ecommerce

2.4 Payment:

In most cases, customers are required to pay for the product upfront, either in full or a partial payment as a deposit.

2.5 Confirmation:

Customers receive a confirmation of their pre-order, often in the form of an email or a receipt, with details of the purchase.

2.6 Release Date:

On the scheduled release date, the product is officially launched, and customers who pre-ordered it receive their orders. This can be delivered physically or digitally, depending on the nature of the product.

2.7 Additional Benefits

Some companies may offer additional perks to pre-order customers, such as early access, exclusive content, or priority shipping.

3.0 Types of pre orders on Shopify

There are 4 main types of pre orders you can offer on Shopify; Capture only pre orders, charge later pre orders, deposit pre orders, charge upfront pre orders.

3.1 Capture only pre orders

Capture only pre-order involves changing the buy now/add-to-cart button to a pre order button, and capturing the customers details/order in the pre-order system.

3.2 Charge later pre orders

This type of pre-order involves changing the buy now/add-to-cart button to a pre order button, the customer goes through the check-out at the time of placing the pre order and authorises a deferred charge. Shopify vaults the card details, and then the store triggers the deferred charge at a later stage.

3.3 Deposit pre orders

Deposit pre order allows you to utilise partial payments, charging the customer for a portion of the purchase price up-front, and then the remaining outstanding amount at a later stage via a deferred charge.

3.4 Charge upfront pre orders

For charge upfront pre order the payment is taken upfront.

4. Setting up Pre Orders on Shopify

4.1 Enabling pre orders in your Shopify online store

Shopify allows businesses to offer pre-orders via a pre-order app. You will need to download and install a pre order app from the Shopify app store.

There are many types of Shopify pre order apps to choose from, and pre order apps offer many different options so make sure you check which will suit your business best.

You will then need to integrate the app within your Shopify store. There are normally two different ways to do this depending on whether you have a Shopify 1.0 theme or a Shopify 2.0 theme. Both are outlined below:

  • Shopify 1.0 theme integration – you will need to find the Shopify theme file that has the buy button within it, and then adding the app’s snippet. Often this will be in the product template file.
  • Shopify 2.0 theme integration – you will need to drag and drop the app block, from the theme customizer in Shopify admin.

4.2 Setting up Pre Order products

Once you have added the snippet or app block to your store you will be ready to list pre-orders on your Shopify store.

You will need to list any products you wish to have on pre-order, in your chosen app. You will also be able to choose, what variants to list for pre-order, whether or not to offer an early bird discount along with pre-order limits and estimated delivery date.

Some apps like our app PreProduct, will allow for pre-ordering for specific variants on Shopify, instead of listing all variants for pre-order. This allows you to just list those variants that may be out of stock, or new variants for pre-order, whilst either still offering other variants for buy now or have them appear as sold out, depending on your business situation.

Early bird discounts, also known as early bird pricing or early bird specials, are promotional offers that businesses use to encourage customers to make purchases or bookings well in advance of a product’s release or an event’s date. These discounts are typically offered for a limited time and are designed to incentivise early action.

PreProduct also allows you to set pre-order limits. Meaning that if you will only able to acquire a certain stock level, or wish to have limited stock available (possibly to create a scarcity mindset) you can set this up.

It is important to set an accurate estimated delivery date, you should also be able to edit the date, if things change, to ensure you are meeting customer expectations.

5. Best Practices for Pre Orders on Shopify

5.1 Promoting pre orders effectively

There are several different e-commerce marketing options that can help to promote and assist in having a successful pre order campaign. These are listed below;

  • Social media content both organic and paid
  • Press coverage
  • SEO
  • Collaborations
  • Email campaigns

Alongside these marketing options, there are some other strategies that can work really well with pre orders.

  • Targeting early adopters for new releases, new products etc
  • Generate an urgency for purchase by offering an early bird discount that is only on offer for pre order
  • Only offering a certain number of items, this will create a sense of scarcity
urgent, business, document

5.2 Setting realistic pre order timelines and delivery dates

It is important to ensure pre order customers are aware of approximate shipping timelines and that there may be some delay. With pre orders, shipping times are never certain, due to potential manufacturing and freight delays, which is often out of your control.

Pre order apps should allow you to regularly communicate via email with your pre order customers, so you can ensure they are kept up to date with shipping timeframes.

5.3 Communicating with pre order customers

A multi pronged approach is the best way to communicate effectively with pre order customers.

This can include the following methods:

  • Front end wording; this communicates to the customers pre order details/shipping time frames etc on the store front/on page cart
  • Email campaign; this can be used to keep customers updated
  • Customer portals; allows customers to check on the progress of their order, and can communicate shipping updates etc.

5.4 Managing refunds and cancellations of pre orders

Pre orders can be cancelled in Shopify in the same manner normal orders can be cancelled. Some pre order apps that feature a customer portal, also allow customers to cancel their pre order via the portal.

Refunding customers is at your discretion and can done as per the usual process in Shopify.

cash register, drawer, cash

6. Conclusion

Pre orders, are a great tool that can be used by businesses to generate excitement for a new product, line, or sold-out products along with giving a business access to revenue sooner than may normally be possible.

There are a few different types of pre orders, and there will be one that best suits and aligns with your business model and goals. Alongside your chosen pre order type, there are many different techniques you can use to promote your pre order campaign and ensure it is successful.

This article was written by the team at PreProduct. PreProduct is a next generation Pre Order app, that specialises in helping stores run successful Pre Order campaigns.

If you would like to run a successful Pre Order campaign, then we recommend starting a free trial of PreProduct, to see if it is a good fit for your business.

Pre-sell With PreProduct

7 day free trial with all plans

shopify app store badge
BigCommerce app store badge
different platform badge

Adding pre-orders to the Shopify Turbo theme

Posted on by Eliza

Contents

The Turbo Shopify Theme

The Turbo Shopify theme is one of Out of the Sandbox’s flagship themes and a favourite of Kurt Elster. This article will go through adding pre-orders to the Shopify Turbo theme. Turbo is fully featured and performant, as well as being Shopify store 2.0 compatible. Meaning it’s pretty straight-forward to add third-party apps. However, we’ll also go through a more limited ‘free’ way of setting up pre-orders with Turbo.

There are many great reasons to offer pre-orders, including a positive influence on cash flow, the wiggle room it can afford your product launches, and the supply chain risks that can be offset. If you’d like to read more about the advantages of Shopify pre-orders, we talk about them extensively on our homepage.

Turbo theme

ref: Out of the sandbox

Adding Pre-orders Manually

We do not recommend this method at all, but realise that some people would prefer to see a free of charge version of offering pre-orders. Backup your themeAlways backup theme files before you change code. This way, you’ll always have a safe version to revert to if something goes wrong.

Word of warning

It’s possible to collect pre-orders without any apps and with minimum developer work, by using the following bare-bones approach. Although I don’t recommend doing this for several reasons that we’ll go into after the step-by-step:

  1. Shopify has a checkbox in the Shopify product section under ‘inventory’ called ‘continue selling when out of stock’. When ticked, Shopify will accept orders for that product, even when the stock level is empty or negative.
  2. It’s also possible to change your add-to-cart button’s text via the Shopify theme files so that it shows ‘pre-order’ when a product has 0 in stock and the above setting is enabled. Using something like the liquid code below within the button tag.
{%- if product.variants.first.inventory_policy == "continue" and product.variants.first.inventory_quantity == 0 -%} pre-order {%- endif -%}

As well as the overhead of hardcoding a change into your store’s theme that doesn’t localise to the user’s language, the above method will also mean:

  • ‘pre-orders’ and ‘buy-now’ orders are mixed together in your Shopify order section, leading to mistakes and laborious admin.
  • No efficient control of what product is on pre-order and what is on ‘buy now’.
  • Your store’s front-end won’t communicate to customers when they’ll receive their pre-order.
  • You have no way of communicating with customers during the pre-order process. e.g. A ‘Your natural deodorant is three weeks away from shipping’ email or customer portal.
  • Pre-order payment has to be upfront (no pay later or deposit option)
  • 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 negative customer experience with a lot of work on your end to manage and stay in control. Luckily Shopify’s app ecosystem has many apps who work on these problems and ways to increase your pre-orders. Thanks to Turbo’s Store 2.0 compatibility, you won’t need to write a line of code to integrate one either.

Using PreProduct for pre-orders

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. After selecting PreProduct from the AppStore, simply click ‘install app’ from the top of the page and Shopify will take you through a quick install process.

PreProduct’s feature set includes:

  • The ability to choose which specific product/variants will be on pre-order.
  • A designated dashboard for your pre-orders, without regular orders being mixed in.
  • Customisation of the design/messaging of the pre-order button and front-end, including dynamic variables like shipping time.
  • Email campaigns to keep customers in the loop and engaged throughout the pre-order campaign.
  • Different payment options like; ‘pay later’, ‘deposit’ and ‘pay now’. Meaning you can list pre-orders much earlier and with better flexibility (+ in some countries, conform to necessary legal requirements).
  • Analytics and dashboards for reporting/interacting/merging the individual pre-orders.

Using the Shopify store 2.0 ‘customize’ editor you won’t have to add permanent code to your theme. You can just 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 it gets taken out.

Adding a pre-order app block to your Shopify turbo theme

Once you have PreProduct installed, 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 customize editor. It will 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 PreProduct block.
  • The PreProduct block has now been added to the ‘Product information’ section. To choose it’s position, click the little back arrow to the left of its nam and drag it up or down until you’re happy with the position.
  • That’s it, you should be all good to go. Don’t forget to save! (Top right corner of the page).

Summary

You have now finished setting up pre-orders for the Shopify Turbo theme. You can now start listing products for pre-order and taking pre-sales for your future and out of stock products.

Pre-sell With PreProduct

7 day free trial with all plans

shopify app store badge
BigCommerce app store badge
different platform badge

Unbounce Pre-orders

Posted on by admin

Contents

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

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

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

Pre-sell With PreProduct

7 day free trial with all plans

shopify app store badge
BigCommerce app store badge
different platform badge