# 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 <a href="#create-configure-base-product" id="create-configure-base-product"></a>

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

<figure><img src="/files/kF7Spn4zd78vHI4V1Vez" alt=""><figcaption><p>Screenshot of an appropriately configured base product</p></figcaption></figure>

&#x20;

### Create Offers within the Campaign <a href="#create-offers-within-the-campaign" id="create-offers-within-the-campaign"></a>

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.

<figure><img src="/files/lQwR6MrS8Kj6xBDdWUhk" alt=""><figcaption><p>Example of an offer setup for a bundle of up to 3 items</p></figcaption></figure>

&#x20;

### Add Variant Bundle element to page - Static Product <a href="#add-variant-bundle-element-to-funnel-page" id="add-variant-bundle-element-to-funnel-page"></a>

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 6 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 2 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**.

Type 5 displays a dropdown selector for each variant option.  There is one set of selectors per bundle quantity.  The customer will make their variant selection within each dropdown.  The product section will contain class **fk-variant-bundle5**.

Type 6 is identical to Type 5 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-bundle6**.

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

<figure><img src="/files/lybZ1vInjGiCuJS8IXOT" alt="" width="170"><figcaption></figcaption></figure>

<figure><img src="/files/734E59YT3gFUOHpTCipQ" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
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.
{% endhint %}

{% hint style="info" %}
It is acceptable to add class **fk-variant-bundle1, fk-variant-bundle2, fk-variant-bundle3, fk-variant-bundle4, fk-variant-bundle5,** and **fk-variant-bundle6** 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** or **fk-variant-bundle5** to allow variant selection inside the Product Tile.  Add **fk-variant-bundle3** or **fk-variant-bundle4** or **fk-variant-bundle6** to allow dynamic variant selection outside the Product Tile.
{% endhint %}

### Add Variant Bundle element to page - Dynamic Product <a href="#add-variant-bundle-element-to-funnel-page" id="add-variant-bundle-element-to-funnel-page"></a>

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.

<figure><img src="/files/bCyEZPIT9gql9c5dSS9d" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="/files/7jkIOiIIVB5oBTatvkhl" alt="" width="563"><figcaption></figcaption></figure>

### Save, Publish, and Test <a href="#save-publish-and-test" id="save-publish-and-test"></a>

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

{% hint style="info" %}
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.
{% endhint %}

<figure><img src="/files/U63D9HoArv3R74cgjUhy" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/page-building-tips/variant-selection/customized-variant-bundles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.