Integrate Purple Dot with your Storefront

If you are using our Shopify App, please seeInstalling our Shopify App instead. See Purple Dot Overview for the comparison of our Shopify App vs. Platform integrations.

Overview

You can add Purple Dot's platform integration to your Shopify storefront in 2 different ways

• Integrate into Shopify Themes built with Liquid

• Integrate into Shopify Headless Storefronts

Before you continue

Having a product with some variant(s) on pre-order will make it easier to test each step from the integration guides above. You may re-use an exisiting product, or create a new one specifically for testing the Purple Dot integration:

1. Create a test product

• Go to your Shopify Admin page and go to the Products list page.

• Click Add Product

• Set the name of the product to Z - Purple Dot Test Product and make sure it is not added to any collections or tags to make it difficult for real shoppers to find

• Set the sales channels to Online Store only

• Give the product 3 Size options/variants

  • Small should be out of stock

  • Medium should have 1 unit of stock

  • Large should be out of stock

• Set the price of these variants to free just in case anybody does find it

2. Set up its Waitlist

• Go to your Purple Dot Merchant Portal, navigate to Waitlists and click New Waitlist
• Select the Z - Purple Dot Test Product you created earlier

• Pick any future ship dates

• Set up incoming pre-order stock

  • Small should be out of pre-order stock

  • Medium should have 1 unit of pre-order stock

  • Large should have 1 unit of pre-order stock

• Save the Waitlist

Testing the Platform Integration

To check that everything is working correctly, look for the following

On the PDP

Referencing the test product setup outlined earlier

• When the Small variant is selected, the product appears as out of stock and no pre-order messaging is shown.

• When the Medium variant is selected, the product appears as in stock and no pre-order messaging is shown. When added to cart, the standard Shopify checkout is used.

• The Large variant is selected, the CTA changes to "Pre-order" and the Waitlist ship dates are displayed underneath. When added to cart, the Purple Dot checkout is used (Combined, Separate or Express) and the expected ship dates are shown.

If using Express Checkout:

• The express checkout opens when the Pre-order button is clicked.

If using Separate Cart:

• The product is added to a dedicated pre-order cart and the pre-order cart button is now showing throughout the store.

If using Combined Cart:

• The Purple Dot checkout is used whenever you try to check out, from the /cart page and from any quick checkout links.

On the PLP

If you have any quick view components or modals, any Add to Cart functionality in those should work the same as on a PDP.

Extra testing if using Combined Cart

To enable this checkout type, Purple Dot ticks "Continue selling when out of stock" for every product variant that is on pre-order. Our system ensures that no oversell can occur beyond the defined pre-order stock level but only if our Pre-order button shows in every instance where the shopper can add products to their cart. Please check that:

• In your Shopify store every product with a Live Waitlist has only the Online Store sales channel turned on

• Purple Dot's Pre-order button shows for size Large everywhere it is possible to add products to the cart

• Products on pre-order are excluded from any functionality that can automatically add products to the cart thereby bypassing Purple Dot (e.g. buy one get one free)

• If you have other apps in your Shopify store that also use 3rd party checkout you must disable these once the shopper's cart contains a line item on pre-order with Purple Dot. You can check for this by inspecting if any of the line items in the Shopify cart contains a __releaseId property.