Using your native store button for pre-orders

PreProduct comes with a special pre-order button, along with accompanying wording for explaining your pre-order.
In some cases, you may prefer to use your own native store button instead and just rely on the pre-order cart to communicate your pre-order terms. You can set this up by doing the following:

Setting up your native store button #

Find your regular buy-now button (although this will work with any button) and add data-native-pre-order-btn within the tag. For example:

<button class=“something-great” id=“the-best-button” data-native-pre-order-btn > buy now </button

Whenever a product has an active listing, PreProduct will now hijack your buy-now button and use it to launch the pre-order cart.

By default, PreProduct will change the button’s wording to read ‘pre-order’. However, you can specify wording by adding a value to the above data attribute. For example:

<button class=“something-great” id=“the-best-button” data-native-pre-order-btn=“pre-order today" > buy now </button

Using a Native Button with PageFly #

For PageFly, you should be able to add a “attribute” from the bottom right of the page editor. Then give it a key of data-native-pre-order-btn and a value of what ever you’d like the button to say, e.g. Pre-order today!