Once our app is complete, a merchant should be able to edit a category in their control panel and simply select the bulk order form template.First, let’s import React, ReactDOM, and the BulkOrderForm component itself:At the bottom of the file we’ll write our function:Using the CLI will enable running the theme locally, helping us iterate over our changes and viewing them in real time.A bulk order form can help your customers check out faster. Instead of simply logging the result of the cart API request, we’ll take the results and determine whether to invoke either function. It takes just one API call to create a parent product with all variants and data. As you’ll see when you deploy your own BigCommerce storefront on Netlify, the starter plugin comes with a few of the most critical pieces of functionality necessary to run an online storefront: View all products (i.e. Here’s what that looks like executed with vanilla JavaScript in custom.js: Create a storefront API token for customer impersonation Creating Customer Impersonation Tokens It’s possible to generate tokens for use in server-to-server interactions with a trusted consumer by POSTing to the API Token Customer Impersonation Endpoint with … Leave us a comment or reach out by tweeting us @BigCommerceDevs!We’ve got all our products appearing and the quantities are adjustable. It’s implemented by setting … Otherwise you can expand the array returned to see the cart details, including the cart ID.Now we have a working form to enable shoppers to add items to their cart in bulk! It also introduces the concept for future iterations where completely customized product pages could be displayed in a way that makes sense for their respective placeholder product.After the function is declared, we select that specified ID to add an event listener which runs the loaded “addMultiToCart” function with an array of Product IDs and any available cart ID once the button is clicked.In the multi-button.html file, you’ll find Handlebars used to determine if our custom button should appear for the current product using the “is_bundle” custom field. The button is assigned a different ID (#multiButton) to ensure this script doesn’t impact typical add-to-cart buttons, as well as a custom value (Combo to Cart) for display purposes.Now that we’ve seen how the products are being added to a cart, let’s go back to the top of multi-view.html. Instead of logging the error message to the console, we can pass it as a message.You can see the state update if you include a console.log in the render method.On either theme version, you will also need to add the following to the resolve object: Next month in Part 2 of this tutorial, I’ll cover how to create a bulk order form for product pages to add multiple variants to the cart at the same time.Now you should see an add to cart button, with 3 column headers for product, price, and quantity.That looks a bit better! There’s also a condition to make sure the quantity can’t be decremented below 0, since we don’t want users to be able to set a negative quantity value.Let us know what you think. To make the custom PDP extensible I created a new product component, which could be added on to other implementations.BigCommerce’s Storefront APIs offer developers functionality not available in the Stencil framework to further personalize a customer’s experience.