While PreProduct provides a default pre-order button and accompanying text, you can use your store’s existing buttons for a more seamless experience. This approach lets you maintain your store’s design while using PreProduct’s functionality to handle pre-order terms.

Setup Instructions #

Tagging your Add-to-cart Buttons #

Locate your regular add-to-cart button Add the following attributes within your add-to-cart button.

• data-native-pre-order-btn
• data-starting-variant

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

When a product has an active pre-order listing, PreProduct will automatically take over the button’s functionality. If you don’t have access to a variant ID, you can swap the data-starting-variant for a data-id populated with your product ID instead.

Custom Button Text #

By default, PreProduct changes the button text to “pre-order”. You can customize this by adding a value to the data-native-pre-order-btn attribute:

An add-to-cart button that in pre-order mode will display: Pre-order now! 
<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 #

To set up a native pre-order button in PageFly:

1. Open your page in the PageFly editor
2. Select your add-to-cart button
3. In the bottom right of the page editor, locate the “attribute” option
4. Add a new attribute with:
   • Key: data-native-pre-order-btn
   • Value: Your desired button text (e.g. “Pre-order today!”)

This will enable PreProduct to take over the button when the product has an active pre-order listing.