Getting started with Presales

Getting things rolling with Submarine on your Shopify Plus store.

1. Theme quick-start

Submarine has a comprehensive API that allows theme developers to integrate it seamlessly into any Shopify theme. Some use cases include:

• supporting regular and campaign purchases on the product page;
• exposing detailed campaign options on cart pages; and
• building out beautiful portals for customers to manage their purchases.

However, if you just want to get up and running quickly, with the minimal effort, Submarine provides a simple theme extension so that customers can opt in to delayed payment for presale and crowdfund campaigns.

1.1. Configuring the Submarine theme extension

1. Navigate to your published theme and click the “Customise” button.
2. Using the drop-down box at the top of the screen, pick the product page that you want to add the theme extension to.
3. In the “Product information” section, click “Add block” and select the Submarine “Selling plan selector” — it’s at the bottom, in the “Apps” collection.

4. Since this extension also provides a variant selector, it makes sense to remove the default one that comes with Dawn.
5. Move the selector to somewhere that makes sense for your customer flow (under the price is decent start).

6. Click “Save”.
7. Confirm that the changes are working in your store, by previewing the theme. Note that, if this is a fresh Submarine install, then the only purchase option available will be “One-time purchase”.

2. Creating your first presale campaign

With the theme ready, you are now in a position to create your first presale campaign.

1. Navigate to the Submarine homepage and click the green “Add presale” button in the top right-hand corner.
2. Before filling in the campaign form, you'll be asked to choose how inventory will be tracked for the campaign: either using your Shopify inventory settings (Track with Shopify) or using custom Submarine limits applied at the product or variant level (Track with Submarine). This choice is made once, at creation, and can't be changed afterwards.

3. You’ll be presented with a screen similar to this one:

1. Completing the Campaign creation form

We have a detailed breakdown of how Submarine works in 🗂️Presale key concepts, so for now we’ll just go over the basics.

Targeting - A presale campaign targets either products or variants — not a mix. Product campaigns automatically include any variants added later; variant campaigns stay scoped to exactly what you selected. Targeting can't be changed after creation — to switch, delete the campaign and start again.

Campaign settings

Setting	What it does
Reference	Internal label for finding the campaign in the Submarine UI. Defaults to the first product/variant name; editable.
Launch date	When customers can start purchasing.
End date	When purchasing closes.
Fulfilment date (optional)	Delays fulfilment until this date even if inventory is ready. Leave blank to fulfil as soon as inventory is applied.
Deposit	0–100% of the price, taken at checkout. 100% deposits unlock more payment methods.
Grace period	How long customers have to fix a failed payment. Set to None for a single attempt before the order is cancelled.

All dates use the shop's timezone.

What customers see (selling plan name & description)

Submarine creates a Shopify selling plan for each campaign, and the plan's name and description are shown to customers in the theme. You can configure both on this screen — defaults follow Shopify's recommended best practice, but override them with anything that suits your store.

Both fields support placeholders, wrapped in double curly braces (e.g. {{due_at}}), which are filled in when the selling plan is created or updated on Shopify:

Placeholder	Value
{{launch_at}}	The campaign's launch date.
{{end_at}}	The campaign's end date.
{{fulfil_at}}	The campaign's fulfilment date.
{{due_at}}	Whichever of end_at or fulfil_at applies — the date the customer's payment is due.

2. When all is said and done, you should have a form similar to this:

3. Clicking “Save” creates the campaign in Submarine and bumps you back to the presale list.

4. As well as the changes in the Submarine UI, there are also a few noticeable updates in the Shopify UI.
1. The Shopify product page exposes the newly created purchase option. From here, you can manage the presale campaign without navigating to the Submarine UI.

Note that the selling-plan name, configured in the Submarine UI when the campaign was created, has been properly parsed.



More details about Submarine’s integration with Shopify’s Admin UI can be found at No access.

2. The variant page exposes the same purchase option (with the same management features).

3. Submarine created some metafields on the product and the variants. These are maintained throughout the lifetime of the campaign, and support sophisticated theme customisations.



More details on these metafields can be found in the Front end integration documentation.

3. Launching your presale campaign

Submarine will automatically launch the campaign according to the configuration that you provided when the presale was created. If you’re impatient though, you can force an immediate launch.

1. First off, let’s navigate to the detail view of the campaign in the Submarine UI. Go to the Submarine homepage and click on the one-and-only presale shown in the list.
2. You’ll be presented with a page that looks similar to this:


There’s a fair bit going on here, most of which we’ll touch on below, but for the time being we can see that the campaign has been given an ID of #1000, is in a pending state and inventory has not yet been allocated.

3. Note that, since there have been no purchases made against the campaign, we’re able to cancel and delete it.

4. However, we don’t want to do that right now. Instead, we want to force the launch of the campaign, so that our impatient customers can start purchasing it. We do that by clicking the green “Launch” button in the top-right corner.

5. There are two immediate effects as a result of this action.
1. First, the new status of the presale is reflected in the Submarine UI.


Note also that the “Launch” button has disappeared and has been replaced with a (disabled) “End” button. The button in this location will always indicate what is the next step in the campaign’s lifecycle, and will usually provide the option to manually override it. Here, we are unable to end the campaign because we haven’t received any orders for it.

2. More importantly though, the selling plan is now exposed to customers in the theme, which means that they can purchase our new presale campaign.


Note that both the name and description of the selling plan (as configured when we created the presale campaign) is displayed in the selling plan selector.

4. Purchasing your presale campaign

As a merchant, it makes sense to familiarise yourself with the subtle differences that a customer experiences at checkout when purchasing a presale campaign.

1. From the product page, in the selling-plan selector, make sure you select the “Presale” radio button. If you’ve only created one campaign for this variant, then the drop-down box should only have one option, and should be displaying the selling-plan name that you configured when you created the presale.
2. Add the item to your cart and review your cart contents. Submarine fully supports mixed carts, but we’ll be keeping it simple here and will stick to just one presale item.


Note the additional checkbox just above the “Pay now” button. The customer cannot complete checkout until they acknowledge the deferred payment for the presale item.

Also note the cart summary on the right-hand side — it indicates that nothing is due to be paid now, and informs the customer when the balance will be captured. Submarine will soon allow you to configure deposits on presale campaigns, both as a percentage and a fixed value.

3. Complete the checkout as usual. The experience should be identical to that of a regular order.
4. If we navigate to the newly created order in the Shopify Admin UI, we can see some obvious differences.

1. The fulfilment for the campaign item is “On hold”, with the hold reason given as “Unknown delivery date”.
2. The fulfilment for the campaign item displays the selling-plan name, as configured in the Submarine UI when you created the presale campaign.
3. Payment is flagged as pending, with a due date of 13 March 2023. This aligns with the end date of the presale campaign.
4. In the timeline, you can see that Submarine updated the payment terms for the order soon after it was created. This is to handle the case when an order contains multiple campaign items. Since Shopify does not yet support partial payments against a purchase option, and instead only permits a single payment for the entire balance owing, we push the expected due date for that payment from the date at which the first presale is due (the default) to the date at which the last presale is due. This behaviour better meets the requirements of most of our merchants, but Submarine can be configured to revert to Shopify’s default behaviour. See ⚙️Configuring Submarine Presales.
5. If we navigate to the presale campaign in the Submarine UI, we can see some differences there too.

1. The most obvious change is that we now have a campaign order in the list at the bottom of the page. It details the campaign item, the customer and the Shopify order, and we can easily see the three statuses: the campaign order is in a pending state, the payment is pending and the fulfilment is on hold.
2. We can also see how that single order has affected the campaign’s progress. In the top-right corner, in the campaign summary card, the progress bar has been updated to reflect the fact that 1 out of our 50 limit has been reserved (representing 2%).
6. Clicking the new campaign order, we get a more-detailed view.

1. We can see the fulfilment status from Shopify mirrored here, with the fulfilment flagged as being placed on hold on 6th February.
2. We can also see a breakdown of the payments — both the split between campaign order and Shopify order, an analysis of any deposits captured at checkout, and a list of any charges, refunds and adjustments that have been processed against the campaign order.
3. From here, the merchant is also able to cancel the campaign order.

5. Ending your presale campaign

We’re nearing the end of a campaign’s lifecycle now. As with launch, we could wait until the campaign end date rolls around and have Submarine transition the presale to the ended state automatically. Alternatively, we can accelerate that process and end the campaign manually.

1. Navigate to the presale campaign page in the Submarine UI.


A few more campaign orders have been placed since last time we saw it, but all we need is a single active one in order to end it prematurely.

2. Click the “End” button in the top-right corder, and confirm the request.
3. Confirm that the presale is no longer available in the theme.

6. Applying inventory to your presale campaign

Picking up from Getting started with Presales - 5. Ending your presale campaign above, we can progress to the last stage of the presale lifecycle.

1. With the presale campaign in an ended state, we are now able to apply inventory to the campaign items. Hover over each one, and you’ll be presented with an “Apply inventory” button.

2. Clicking it opens up the “Apply inventory” modal.


We can apply any amount of inventory to the items, but clicking “Meet reserved counts” applies just enough to cover the reserved count.

3. Clicking “Apply” kicks off the allocation process.


It runs in the background, so the presale moves into short-lived “Fulfilling” and “Allocation queued” states.

At this point, customers will also have their order payments processed - unless a particular fulfilment date was selected during campaign configuration, in which case customers will be charged once the fulfilment date has passed and after inventory has been allocated.

For more details on capturing payments, see the page linked below.

💰Capturing payment for campaign orders
4. After a few minutes, the process has completed.

1. The presale statuses have transitioned to “Completed” and “Allocated”.
2. The active campaign orders have all transitioned to “Completed”, “Payment received” and “Fulfilment open” states.
3. The presale campaign is ready to be archived.
5. Lastly, picking one of the Shopify orders as an example, we can see the effect the presale completion has had.

1. The hold on the fulfilment has been released.
2. The order has been paid in full.