Headless pre-orders

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 then 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.

Step-by-step #

• 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.

Headless E-commerce Store #

• To integrate PreProduct into a headless store add the below <div> wherever you would like the pre-order button to appear.
• 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 dashboard.
• 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://preproduct.onrender.com/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>