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.

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

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 and data-quick-pre-order Like the below.
(sometimes the data-id will be like this, depending on how your theme’s product variable is available data-id="{{product.id}}")

<button

   id="add-to-cart"

   data-native-pre-order-btn

   data-id="{{id}}" 

   data-quick-pre-order

>

  Add to cart

</button>

You can imagine a 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 like, leaving out data-quick-pre-order will stop the above button code being eligible.

(note this isn’t needed for Shopify, as we have access to variant data from the theme files)

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>