This article will walk you through creating a bundle selection for a single product where the customers can choose a how many items they want to purchase, and select different variants for each item in the bundle.
Create/Configure Base Product
The first step is to create the base product for the bundle you are offering. Inside the base product, add your variant options to Variant1; and then be sure to enable the Bundle Variants option.
Create Offers within the Campaign
Next, go into your campaign and create separate offers for each quantity that you will be offering. Be sure to use the Qty Per Order value within the offer set up. Keep note of the campaignProductIds for each option as you will need these later.
Add Variant Bundle Element to Funnel Page
With the product and offers all configured, we are now ready to create the bundle selection on the funnel page.
Edit the page you want to add the product selection to and drag either the “Variant Bundle 1” or “Variant Bundle 2” elements onto the page.
Variant Bundle 1 will populate all of the variants with a number selector for the customer to choose how many of each variant.
Variant Bundle 2 will display dropdown selectors corresponding to the quantity selected, and the customer will make their variant selection within each dropdown.
Add and Configure a Select element in the Variant Bundle element
By default, the Variant Bundle elements do not contain a dropdown element. Add a Select element to the Variant Bundle element:
Next, open the Style Manager for the Select element and set the element’s “Name” to “Product”.
With Product applied as the name, you can now list the bundle options within the “Options” section within the Style Manager. To build this list, add the campaignProductId and the title of that selection; with 2 colons in-between. You can list as many selections here as you need - just be sure the proper campaignProductIds are set for each option.
campaignProductId:: Title of Selection 1 campaignProductId:: Title of Selection 2 campaignProductId:: Title of Selection 3 campaignProductId:: Title of Selection 4 ...
You can style the Element Container for the variants and that styling will apply to all of the options that dynamically display.
Save, Publish, and Test
Once all previous steps are complete you can now save the page, publish the funnel, and place a test.
The display will allow customers to select more variants than the quantity they selected. If an order is submitted with more variants than the quantity selected then the order will be rejected and the customer will be prompted to adjust their variant selection.