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.

Quick pre-order buttons on Shopify #

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.

A quick pre-order flow from collection page, through to checkout.

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.

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

Quick pre-order buttons on BigCommerce #

With Shopify, we can use the native templating language to get the ID of the variant that is about to load. However, with BigCommerce we don’t have access to variants in that way, just products.

For that reason we need to populate the data-id attribute with the product id, as well as add in a data-quick-pre-order attribute to buy-buttons when we want them to be eligible. Please note this isn’t necessary for product pages (i.e. a page owned by a specific product).

Add these three attributes within your quick-buy button tags data-id="{{id}}" data-native-pre-order-btn data-quick-pre-order. The data-id value should be the BigCommerce product ID. Depending on how your theme is structured, the code may look like data-id="{{product.id}}" or data-id="{{id}}"

<button

   id="add-to-cart"

   data-native-pre-order-btn

   data-id="{{id}}" 

   data-quick-pre-order

>

  Add to cart

</button>

Consider the scenario where a product has some variants on pre-order and some not. You may only want it’s quick-buy button to have pre-order functionality in certain situations. If you leave out the data-quick-pre-order attribute, the above button code will not work outside of a product page.

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 data-native-pre-order-btn 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>