Adding pre-orders to the Shopify Turbo theme

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.

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.