PreProduct automatically detects and tags existing add-to-cart buttons on most Shopify themes. First enable the Pre-order support app embed, then use Check my theme from the Button tagging card on PreProduct’s Setup screen. Use the manual instructions below only if that check cannot detect your button.

Manual fallback instructions #

Tagging your Add-to-cart Buttons #

Locate your regular add-to-cart button and add the following attributes within the button tag. If you would like help, email hello@preproduct.io.

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

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

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

The Pre-order support app embed works with PageFly. If Check my theme cannot detect the PageFly button, use this fallback:

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.