Once you’ve added PreProduct via the BigCommerce Apps & Integrations site, a line of code should be added to your product page. If not, PreProduct will try and ‘auto-install’ itself. We continue to improve this process, but doing one of the below options is still recommended.

We’re more than happy to request temporary access and do this 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. To remove our code from your theme, you will need to do the exact opposite of the above. Either finding the button tag and deleting it.

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

…or the snippet.

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