Customized Variant Bundles

This article walks through creating a bundle selection for a single product where the customers can choose how many items they want to purchase, and select different variants for each item in the bundle.

---

Create/Configure Base Product

Create the base product for the bundle offer. Inside the base product, enable the Bundle Variants option and then add your variant options to Variant1. This functionality works only for products with a single variant (for example, the flavors of a dozen donuts).

Screenshot of an appropriately configured base product

Create Offers within the Campaign

Next, go into your campaign and create separate offers for each quantity that you will be offering. Set Qty Per Order on each campaign product.

Example of an offer setup for a bundle of up to 3 items

Add Variant Bundle element to page - Static Product

With the product and offers configured, create the bundle selection on the funnel page.

Edit the page and drag a Variant Bundle product element to the page. Go to the product section Settings and choose the Product. This product must be a bundle of variants. Then choose between the 4 Types.

Type 1 populates all of the variants with a number selector for the customer to choose how many of each variant. The customer is limited to selecting only the total bundle quantity across all selectors. The product section will contain class fk-variant-bundle1.

Type 2 displays dropdown selectors corresponding to the quantity selected, and the customer will make their variant selection within each dropdown. The product section will contain class fk-variant-bundle2.

Type 3 populates all of the variants with a number selector for the customer to choose how many of each variant. The customer is limited to selecting only the total bundle quantity across all selectors. This is identical to Type 1 except the <div> containing the variants is removed from the product section. This allows the variant selection location to be customized on the page. This <div> must contain class cc-bundle-variants. The product section will contain class fk-variant-bundle3.

Type 4 displays dropdown selectors corresponding to the quantity selected, and the customer will make their variant selection within each dropdown. This is identical to Type 3 except the <div> containing the variants is removed from the product section. This allows the variant selection location to be customized on the page. This <div> must contain class cc-bundle-variants. The product section will contain class fk-variant-bundle4.

The product variants display in the page builder. Any additions or subtractions to variants or bundle quantity is reflected dynamically on the live page.

The variant selection container and contents may be styled as needed. That styling applies to all of the options that dynamically display on the live page.

It is acceptable to add class fk-variant-bundle1, fk-variant-bundle2, fk-variant-bundle3, and fk-variant-bundle4 to product sections manually. Add only 1 of these classes to each product section. This could be particularly useful on a Product Tile element. Add fk-variant-bundle1 or fk-variant-bundle2 to allow variant selection inside the Product Tile. Add fk-variant-bundle3 or fk-variant-bundle4 to allow dynamic variant selection outside the Product Tile.

Add Variant Bundle element to page - Dynamic Product

The previous section provided instructions for a product section with a fixed product. It is also possible to let the shopper choose the variant bundle product. The classes required on the product section element are the same. However do not assign a Product to the section. Instead drag a Select element inside the product section.

Open the Settings Manager for the Select element and set “Name” to “Product”. Style the Select element as needed.

With Product applied as the name, you can now list the bundle options within the “Options” section within the Style Manager. Add the desired name of each product and the corresponding campaignProductId. You can list as many product selections as needed - just be sure the proper campaignProductId is set for each option.

display name of Product 1 - campaignProductId 1 display name of Product 2 - campaignProductId 2 display name of Product 3 - campaignProductId 3 display name of Product 4 - campaignProductId 4 [and so on...]

Save, Publish, and Test

Once all previous steps are complete you can now save the page, publish the funnel, and place a test.

Type 1 and Type 3 allow customers to select more variants than the quantity set on the bundle. 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 to match the product bundle setup.