Submarine and the Shopify UI - The home of everything Submarine

How Submarine integrates with Shopify’s Admin UI.

1. Overview

Submarine exposes a dedicated UI embedded in the “Apps” section of Shopify’s own interface.

It uses Shopify’s own design language and closely follows Shopify’s design guidelines, so that it feels as close as possible to a Shopify native UI. However, there are limitations as to how tightly it can genuinely integrate with the core Shopify Admin UI. It’s very cool, and exposes all of Submarine’s functionality, but it will always sit slightly outside the Shopify ecosystem.

However, one of the benefits of leveraging Shopify’s purchase options for Submarine presales is that we are able to inject Submarine’s own UI components directly into the Shopify Admin product/variant pages. These integrations are significantly more lightweight than those found in Submarine’s dedicated UI, but provide a convenient shortcut for merchants to manage their Submarine campaigns and perform simple day-to-day tasks.

2. Submarine inside the Shopify UI

Submarine injects UI components into both the product and variant pages of the Shopify Admin UI. Both offer similar functionally, so we will just focus on one of them here.

2.1. View configured purchase options

All purchase options configured on a product are displayed in the product Admin UI.

Submarine presale campaigns displayed as purchase options in the Shopify Admin UI.

Here, all presale campaigns that are associated to the product are shown. Note that:

the first two are linked to individual variants, and not the actual product;

the selling-plan name is exposed for each one;

any type of purchase option can appear here, e.g. Submarine crowdfunding campaigns;

potentially purchase options from other integrations could appear in this list — Submarine’s are easily identified by our logo.

Only active presale campaigns are displayed here. When a Submarine campaign is cancelled or ends, we delete the associated selling plan, which will remove it from this list.

2.2. Manage existing purchase option

Clicking the “Manage” link against a purchase option opens up a form directly in the Shopify UI, which allows you to perform simple edit actions on the underlying presale campaign.

This replicates quite closely the native campaign-editing features exposed in the Submarine UI (while working within the constraints of the Shopify UI), with the obvious exception that you are unable to change the targets of the campaign (i.e. the products/variants).

Changing details here will immediately update both the Shopify purchase option and the Submarine campaign.

2.3. Remove existing purchase option

Clicking the “Remove” link against a purchase option brings up a confirmation modal.

Confirming the removal deletes the purchase option and updates the presale campaign’s targets.

Note that you are unable to remove a purchase option if it’s tied to the last item in the campaign:

Trying to remove a purchase option if it’s the last item in the associated campaign.

2.4. Add a new purchase option

The integration gives you two options to add a purchase option. The first is to create an entirely new campaign:

Adding a new purchase option to a product.

Much like

Submarine and the Shopify UI, this exposes a simplified version of the UI in Submarine to create a new presale campaign. The only significant difference is that there is no option to configure multiple items — the presale campaign is created with an association to the single product.

2.5. Add an existing option

The second option is to attach the product to an existing purchase option:

Adding an existing purchase option to a product.

Note that you can only select active campaigns (i.e. not ended) that target the same type of resource (e.g. products if you’re on a product page, variants if you’re on a variant page).