PreProduct can run ‘headless’ outside of a regular Shopify storefront. This means your brand can accept pre-orders from a website other than your storefront. For example, a WordPress blog, affiliate site or headless e-commerce store.

Pre-orders will still be collected in PreProduct’s dashboard and travel through your Shopify checkout like normal. If you run a headless e-commerce store with lots of different products on pre-order, then you’ll need to follow the dynamic product instructions. If you’re just listing one product, say for a landing page, PreProduct can generate the full static/single product instructions code for you.

Adding the PreProduct snippet #

Landing page (static – specified product) #

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

• PreProduct will then generate a snippet of code for this specific product, which can then 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. Please note this code snippet is designed for non-Shopify sites. The standard PreProduct snippet is the preferred method for regular Shopify stores.

Headless e-commerce store (dynamic – any product) #

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 attributes with the relevant Shopify IDs.

<div 
  id='preproduct-pledge' 
  data-id='Shopify product ID here' 
  data-starting-variant='Starting Shopify variant ID here' 
  data-headless='true' 
  data-domain='preproduct-test.myshopify.com'
  style='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 a 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"
> 
  Not a buy button 
</button>

• If you want to use your own buttons, 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
  data-starting-variant='Shopify variant ID here'
> 
  Add to cart
</button>

Activating ‘headless mode’ in PreProduct #

For PreProduct to take pre-orders from outside of a standard Shopify storefront, you’ll need to do two things:

1. Add a storefront token.
2. Change PreProduct’s pre-order redirect to either Redirect to checkout (isolate pre-orders) or Redirect to cart (isolate pre-orders).

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 redirect for pre-orders, then you’ll need to hook into PreProduct’s Javascript events (namely ppConvertingButtonClicked), mark the event.detail.handled as true.

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.