---
title: "Using native store buttons for pre-orders"
slug: "using-your-native-store-button-for-pre-orders"
date: "2022-03-28T19:20:13+00:00"
modified: "2026-05-05T04:46:53+00:00"
author: "admin"
canonical: "https://preproduct.io/docs/using-your-native-store-button-for-pre-orders/"
---

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

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

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

![Setting native button pre-order support for PageFly](https://preproduct.wpengine.com/wp-content/uploads/2022/03/Screenshot-2023-04-17-at-09.13.16-1024x740.png)