Once you’ve installed PreProduct from the BigCommerce Apps & Integrations site, PreProduct will attempt to ‘auto-install’. While we continuously improve our auto-install process, you can also add a line of code directly to your product page to ensure PreProduct knows which button to use for pre-orders.

We also have a YouTube video on the process here.

We’re more than happy to request temporary access and do the below for you (just email us). There are currently two ways to install PreProduct, depending on if you’d like PreProduct to use your native buttons or create it’s own.

Install by tagging buttons #

(Uses your existing add-to-cart buttons for pre-orders)

By tagging your existing add-to-cart buttons, PreProduct can convert them to pre-order buttons whenever the related product is on pre-order. This is great for keeping your storefront on brand, as well as supporting more complicated flows like quick-buy, bundles etc.

The add-to-cart button code can be found in the default Stencil theme file in this file: templates/components/products/add-to-cart.html. Once you’ve found the button’s code, paste data-native-pre-order-btn data-id="{{product.id}}" within your  <button ... >  tag like the below example. Just be sure to leave an empty space before and after it, and of course feel free to email us and we’ll request temporary store access and add it for you instead.

<button id="add-to-cart" type="submit" 
  data-native-pre-order-btn data-id="{{product.id}}" 
>
    Add to Cart
<button/>

In the default Cornerstone theme, the add-to-cart button uses an <input> tag instead of a <button> tag. Below in a recording of what tagging the add-to-cart button looks like.

Install by adding snippet #

(Uses PreProduct’s button for pre-orders)

To manually install PreProduct onto your storefront, you will need to copy and paste our snippet (below) into your product page theme file, ideally above the {{product.description}}. The product description can sometimes be found in this Stencil theme file: templates/components/products/description.html

<div id="preproduct-pledge" data-id="{{product.id}}" style="text-align:left !important;"></div>

Uninstalling #

Uninstalling the PreProduct app will remove our script. If you manually added any of our code snippets to your theme, you can remove them – though leaving them in won’t cause any issues.

data-native-pre-order-btn data-id="{{product.id}}"

or

<div id="preproduct-pledge" data-id="{{product.id}}" style="text-align:left!important;"></div>