PreProduct comes with a default pre-order button, along with accompanying wording for explaining your pre-order.
However, you may prefer to use your own native store button instead and just rely on the on-page pre-order cart to communicate the terms of your pre-order. You can set this up by following the below steps.

Setting up native pre-order buttons #

Find your regular add-to-cart button (although this will work with any button) and add data-native-pre-order-btn within the tag.
It’s also a good idea to add the data-starting-variant attribute like in the below example (this allows for ‘quick pre-order’ buttons and taking pre-orders for multiple products from a single page).

<button 
  id="add-to-cart" 
  data-native-pre-order-btn 
  data-starting-variant='{{ product.selected_or_first_available_variant.id }}'
> 
  Add to cart
</button>

Whenever a product has an active listing, PreProduct will now hijack the button and use it for pre-orders.

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 
  id="add-to-cart" 
  data-native-pre-order-btn='Pre-order now!'
  data-starting-variant='{{ product.selected_or_first_available_variant.id }}'
> 
  Add to cart
</button>

Using native pre-order buttons with PageFly #

For PageFly, you should be able to add an “attribute” to a button 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!