---
title: "Pre-order data-attributes"
slug: "data-attribute-configs"
date: "2022-10-31T19:28:44+00:00"
modified: "2026-02-02T02:04:50+00:00"
author: "admin"
canonical: "https://preproduct.io/docs/data-attribute-configs/"
---

> While most customizations are handled through the PreProduct app, you can add special pre-order data-attributes to your PreProduct [tagged buttons](https://preproduct.io/docs/installing-preproduct-on-bigcommerce/) or [snippet](https://preproduct.io/docs/installing-the-preproduct-snippet/) for custom functionality.

```markup
data-native-pre-order-btn
```

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

```markup
data-headless="true"
```

```markup
data-starting-variant="123"
```

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

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

```markup
data-quick-pre-order
```

```markup
data-domain="mystore.myshopify.com"
```

```markup
data-primary-native-pre-order-btn
```

```markup
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

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

```javascript
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

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

```javascript
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.