Quick-buy buttons are the add-to-cart buttons sometimes present on collection pages. They allow a shopper to purchase without visiting the product page. PreProduct can convert these buttons for pre-order whenever there’s an eligible pre-order listing.

Setting up quick pre-order buttons #

Just like with the product page, adding the below data-attributes will give PreProduct all of the information it needs to determine if a button should be converted for pre-order or not.

Start by finding your regular add-to-cart <button> code and add data-native-pre-order-btn within the tag, followed by the data-starting-variant attribute like in the below example.

(Quick pre-order buttons do not need PreProduct’s snippet or app block to be present to run).

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

Whenever a product has an active listing, PreProduct will now hijack the button and use it for pre-orders. PreProduct will constantly watch the page to see if any new buttons get added, this is useful for pages with dynamic filtering and searching.

Changing the quick pre-order button wording #

By default, PreProduct will change the button’s wording to read ‘pre-order’. However, you can specify wording by adding a value to the above data attribute. For example:

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