While most customizations are handled through the PreProduct app, you can add special pre-order data-attributes to your PreProduct tagged buttons or snippet for custom functionality.

data-native-pre-order-btn

data-native-pre-order-btn="Pre-order me :)"

data-headless="true"

data-starting-variant="123"

data-cart-redirect-url="/fancy-thank-you-page"

data-native-cart-pre-order-cta-container

data-quick-pre-order

data-domain="mystore.myshopify.com"

data-primary-native-pre-order-btn

data-pre-order-quant="2"

Custom Button Visibility Callbacks #

PreProduct allows you to override the default show/hide behavior for pre-order and buy-now buttons using custom JavaScript callbacks. Add these data attributes to your native pre-order button:

The data-pre-order-btn-vis callback is called for each pre-order button when button visibility is changed

data-pre-order-btn-vis="myPreOrderVisHandler" 

window.myPreOrderVisHandler = (button, show, context) => {
  // button: The DOM element being toggled
  // show: Boolean - true to show, false to hide
  // context: Object containing { preorderButton, formattedListing }
  button.style.display = (show) ? '' : 'none';
}; 

The data-buy-now-btn-vis callback is called for each buy-now button when button visibility is changed

data-buy-now-btn-vis="myBuyNowVisHandler"

window.myBuyNowVisHandler = (button, show, context) => {
  // button: The DOM element being toggled
  // show: Boolean - true to show, false to hide
  // context: Object containing { preorderButton, formattedListing }
  button.style.display = (show) ? '' : 'none';
}; 

If no custom callback is defined, PreProduct uses its default visibility logic.