> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/megamog-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/megamog-theme/cross-sells/product-bundles.md).

# Product bundles

The **Product bundles** feature lets you create pre-defined bundles, or give shoppers an option for a bundle builder on every page.

{% embed url="<https://www.youtube.com/watch?v=kvil9HBz1Ro>" %}

This helps sell more items by suggesting to customers an attractive combo **on every page**.

{% tabs %}
{% tab title="Layout 1" %}

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

💡: *Suitable for displaying in the Product information section, alongside the product media.*
{% endtab %}

{% tab title="Layout 2" %}

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

í ½&#xDCA1;**:** *Suitable for displaying in the Product information section, alongside the product media.*
{% endtab %}

{% tab title="Layout 3" %}

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

💡: *Suitable for displaying in the section with a wide container.*
{% endtab %}

{% tab title="Layout 4" %}

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

💡: *Suitable for displaying in the section with a wide container.*
{% endtab %}

{% tab title="Layout 5" %}

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

💡: *Suitable for displaying in the section with a wide container.*
{% endtab %}
{% endtabs %}

{% hint style="success" %}
**Steps:**

1. Go to **FoxKit** > **FoxKit power** > Choose **Product Bundles.**
2. Click **Create bundle** to start.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## Settings

### Title and Status

Check the **Active** box if you want to use the bundle or uncheck it to save them for the next time.&#x20;

Give the bundle a **Title** so you can easily manage it in the app settings.

<figure><img src="/files/0qudMOaPR3LOdox14D6x" alt=""><figcaption></figcaption></figure>

### Add products to the bundle

Browse to add products to your bundle.

{% hint style="info" %}
The **Show all product variants** option gives you control over how product variants are displayed in a product bundle. This feature allows merchants to either display all variants at once or selectively display specific variants within the bundle.
{% endhint %}

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

* When **Show all product variants** is **Turned ON:** All product variants are displayed within the bundle, regardless of availability.

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

* When **Show all product variants** is **Turned OFF:**
  * The merchant can manually select which specific variants of a product to display within the bundle.
  * Only the selected variants will appear for customers.

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

* You can also set a pre-defined **quantity** you want for each item in the bundle.

<figure><img src="/files/0uIPutWQteItWMpq1saB" alt=""><figcaption></figcaption></figure>

The bundles can show on all selected products or only a targeted product.

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

{% hint style="warning" %}
Draft products and out-of-stock products won't be displayed on the bundle on your storefront.
{% endhint %}

### Offer discount

Choose to **Activate discount** to promote a discount offer.

Select the **Discount type** and enter the **Discount value**. The discount value will be applied to each item.

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

{% hint style="info" %}
**Customers don't need to buy all the offered products to get a discount**.&#x20;

Instead, they can choose the products they need and check out.

The discount is applied when 2 or more products in the bundle are added to the cart.
{% endhint %}

### Layout

* Choose a design template for your bundle.

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

{% hint style="warning" %}
Some layouts will only be available on plan **Growth** and **Enterprise**.

See [FoxKit pricing plans](/megamog-theme/account-and-billing/foxkit-pricing-plans.md).
{% endhint %}

* Set an **Image ratio** for the product image:
  * Adapt to product image;
  * Square;
  * Portrait;
  * Landscape.
* **Selected by default**: Enable pre-select the recommended products or let customers build the bundle themselves by selecting the products from your list.
* **Show quantity selector**: Allow customers to change the quantity of each product on the bundle.&#x20;

If you want to **require customers to purchase a certain quantity of products**, you can uncheck the option to hide the quantity selector. In that case, the quantity of the item in the bundle that customers add depends on the [pre-selected quantity you set above](#add-products-to-the-bundle).

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

### Content

* Insert your **Bundle heading** that will appear above your bundle and the **Add to cart button label**.

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

{% hint style="success" %}
Once you have set up your bundle, go to your theme editor and add the corresponding app widget.

See [How to set up FoxKit features](/megamog-theme/how-to-set-up-foxkit-features.md)
{% endhint %}

{% hint style="info" %}
FoxKit will display the first in-stock variant by default.

However, FoxKit shows a built-in variant selector to let your visitors change the variant before adding the bundle to their shopping cart.
{% endhint %}

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

{% hint style="info" %}
Note: You can change the order of the default variants in your Shopify admin&#x20;

\> go to the specific product you would like to modify&#x20;

\> locate the 'Variants' section&#x20;

\> re-organize the product variants as you like.
{% endhint %}

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

<figure><img src="/files/FWbzBePW6CWTNRAQqEf2" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_foxkit_product_bundles&#x26;utm_campaign=anchor-text&#x26;utm_term=install_xflow_back_in_stock_automation_free">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>