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, we have an article on why you should take pre-orders on Shopify here.

ref: Shopify

Adding Pre-orders Manually

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

Word of warning

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. (you should 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 admin 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.
• You can then made a code change like the below to what text is outputted in your add-to-cart button. You’ll be looking for something similar to the first block of code below; which you’ll want to change to the block below.

Before:

{%- if product.selected_or_first_available_variant.available -%}
  {{ 'products.product.add_to_cart' | t }}
{%- else -%}
  {{ 'products.product.sold_out' | t }}
{%- endif -%}

After:

{%- 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 -%}

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

Problems with the manual approach

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 storefront 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 mentioned above, 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 App Store, 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.