PreProduct can generate ‘headless’ code for any of your pre-order listings. This means your brand can accept pre-orders for a product from a website other than your store. For example, a WordPress blog, affiliate site or headless e-commerce store.
The ‘headless’ code can be pasted into any of these sites and run as it would on your Shopify store. This allows your brand to capture pre-orders from many different sources across the internet. 

The pre-orders will still be collected in PreProduct’s dashboard and still travel through your Shopify checkout like normal. If you run a headless e-commerce store, then you’ll need to follow the dynamic product/variant ID instructions.

Adding the PreProduct snippet to your site (static product/variant id) #

• Navigate to the PreProduct Dashboard and select the product listing you would like to generate headless code for.
• Then click the button ‘generate headless code’ on the left hand side.

• PreProduct will then generate a snippet of code, for this specific product listing, which can be copy and pasted on to any webpage. This snippet of code will allow you to load PreProduct on the front-end of the webpage and collect pre-orders.

• Ensure you test this thoroughly on your live site. Also please note this code snippet is not to be used on your actual Shopify store, only outside of your Shopify store.

Adding the PreProduct snippet to your e-commerce storefront (dynamic product/variant id) #

1. To integrate PreProduct into a headless store, add the below <div> wherever you would like the pre-order button to appear.
2. You’ll just need to dynamically populate the data-id with the relevant Shopify product id.

<div id='preproduct-pledge' data-id='Shopify product ID here' data-starting-variant='Starting Shopify variant ID here' data-headless='true' style='text-align: left; padding: 10px 0px;'></div>

• Amongst many other things, you can control whether a product/variant will be on pre-order from the PreProduct app.
• If your front-end doesn’t subscribe to Shopify’s ScriptTag API, then the below script tag is needed as well.

<script type='text/javascript' async src='https://api.preproduct.io/preproduct-embed.js'></script>

• If you notice that PreProduct mistakenly hides a <button> or <input> tag that is not your buy button, adding the fake CSS class of pp-no-hide will remedy the situation. For example:

<button class="subscribe-to-newsletter another-class pp-no-hide"> </button>

• If you don’t want to use PreProduct’s default pre-order button, we have a doc here on nominating buttons for pre-order (PreProduct will only hijack them when the selected variant is on pre-order).

<button id="add-to-cart" data-native-pre-order-btn="Pre-order Now"> Buy Now </button>

Activating ‘headless mode’ in PreProduct #

For PreProduct to take pre-orders from outside a standard Shopify storefront, you’ll need to do two things; Add a storefront token and change the front-end redirect to ‘checkout’. We have a doc on how to do those two things here.

We also recommend you activate the ‘Headless Shopify’ integration in PreProduct’s ‘Integrations’ screen, so PreProduct can display helpful information throughout the app.

If you don’t want to force redirects to checkout for pre-orders, then you’ll need to hook into PreProduct’s Javascript events (namely ppConvertingButtonClicked), mark the event.detail.handled as true, then submit the event.detail.items to your own cart endpoint.

Single-page apps/stores #

For headless stores set up as single page application using Javascript frameworks like React, a further step will be required. Please read our doc on that here.

Adding to cart instead of redirecting to checkout #

By default a headless store will only work once a Storefront Token has been added in PreProduct and the redirect has been set to “checkout”. This is because PreProduct doesn’t know your cart URL endpoint. However, we have a doc here on how to set up a headless ‘add to cart’ instead, with the option to choose what you do next e.g. redirect, update the page.