What are Mix & Match Bundles?

There are few terms that are used industry wide for these kind of bundles:

Mix & Match
Build your own Bundle
Infinite Variants

This enables the Shoppers to pick products of their choice from a range of products.

How does FoxSell Bundles Plus implements Mix & Match Bundles?

FoxSell Bundles Plus uses a combination of following things to enable Mix & Match on a Shopify Store

Theme App Extension (App Block): Widget on the Product page
Metafields & Metaobjects: Stores the config of the Bundle within Product metafields
Shopify Functions (Cart Transform): Bundling Logic on Cart and Checkout

How can a custom design be used with FoxSell Bundles Plus?

Since the Widget is added via Theme App Extension, each and every piece of technology is independent of each other.

You can use Metafields and Metaobjects to access bundle config on Product page and configure the design accordingly.

The Shopify Function with Bundle the products as it is once they are added to the cart.

Schema for Metafields and Metaobjects

Once the bundle is created on FoxSell Bundles Plus. We create a new product and attach the Bundle details in the Product Metafield on the newly created product.

These metafields can not be written by anything other than FoxSell Bundles Plus but they can be accessed on Storefront by anyone

Metaobject Defintions

We use 2 Metaobject to store bundle information.

Bundle Details

All the bundle information is stored in this metaobject

{
    "access": {
        "admin": "MERCHANT_READ",
        "storefront": "PUBLIC_READ"
    },
    "definitions": [
        {
            "key": "categories",
            "name": "Categories",
            "required": true,
            "type": "list.metaobject_reference",
            "validations": [
                {
                    "name": "metaobject_definition_id",
                    "value": "{bundle_category_metaobject_def_id}"
                }
            ]
        },
        {
            "key": "options",
            "name": "Options",
            "required": false,
            "type": "json"
        },
        {
            "key": "widget_settings",
            "name": "Widget Settings",
            "required": true,
            "type": "json"
        },
        {
            "key": "discount",
            "name": "Discount",
            "required": true,
            "type": "json"
        },
        {
            "key": "bundle_id",
            "name": "Bundle ID",
            "required": true,
            "type": "single_line_text_field"
        }
    ],
    "publishable": false,
    "name": "FoxSell Dynamic Bundle",
    "type": "$app:dynamic_bundle"
}

Bundle Categories

All the Category Information is stored in this Metaobject

{
    "access": {
        "admin": "MERCHANT_READ",
        "storefront": "PUBLIC_READ"
    },
    "definitions": [
        {
            "key": "title",
            "name": "Title",
            "required": true,
            "type": "single_line_text_field"
        },
        {
            "key": "quantity",
            "name": "Quantity",
            "required": true,
            "type": "number_integer"
        },
        {
            "key": "products",
            "name": "Products",
            "required": true,
            "type": "list.product_reference"
        },
        {
            "key": "product_properties",
            "name": "Product Properties",
            "required": true,
            "type": "json"
        }
    ],
    "publishable": false,
    "name": "FoxSell Dynamic Bundle Category",
    "type": "$app:dynamic_bundle_category"
}

Metafield Definition

The bundle settings are stored within product metafields under app reserved namespace.

This is how to access the bundle settings within storefront liquid

product.metafields['app--67872686081'].dynamic_bundle.value

Definition

{
    "access": {
        "admin": "MERCHANT_READ",
        "storefront": "PUBLIC_READ"
    },
    "name": "FoxSell Dynamic Bundle Config",
    "key": "dynamic_bundle",
    "type": "metaobject_reference",
    "owner_type": "PRODUCT",
    "validations": [
        {
            "name": "metaobject_definition_id",
            "value": ""
        }
    ]
}

JSON Definitions

There are few JSON keys in the metaobjects. These are the JSON definitions of those keys

Options

If you have enabled quantity as an option in the app. You will have those settings here.

[
    {
        "name": "Box of 4",
        "quantity": 4,
        "discount": {
            "strategy": "percentage",
            "value": 10
        }
    },
    {
        "name": "Box of 6",
        "quantity": 6,
        "discount": {
            "strategy": "percentage",
            "value": 15
        }
    }
]

Widget Settings

These settings denote if the merchant want to see compare at price and discount percentage in the widget. You can either choose to use or ignore it depending upon the requirements

{
    "option_title": "Pick your Pack",
    "show_discount_percentage": true,
    "show_compare_at_price": true,
    "pricing_strategy": "fixed_pricing"
}

Discount

If the quantity as on options are is not enabled, you have a set discount for the whole bundle. You get the discount information in this key

{
    "strategy": "percentage",
    "value": 15
}

Product Properties

This is a JSON with key being the product.id and value is a JSON containing the selected variant ids for the product.

{
    "gid://shopify/Product/7191229137007": {
        "variant_ids": [
            "gid://shopify/ProductVariant/41252822188143"
        ]
    },
    "gid://shopify/Product/7191229399151": {
        "variant_ids": [
            "gid://shopify/ProductVariant/41252822515823"
        ]
    }
}

How to use Shopify Function Bundling Logic?

For using FoxSell Bundles Plus Shopify Function you just have to add the following line item properties based on the selected Pricing Strategy

Dynamic Pricing

With every line item that is being added to the cart, these properties needs to be added

dateNow = Date.now()
for product in products:
    add product to cart with property
    {
        "__foxsell:dynamic_bundle_id": "<bundle_id>_${dateNow}",
        "__foxsell:dynamic_bundle_category": "<bundle_category>"
    }

Fixed Pricing

Only the selected variant would be added to the cart with the following properties

selectedItems = selectedProducts.map(product => {
    return {
               "variantId": product.variantId,
               "quantity": product.quantity,
               "category": product.category,
    }
})


// Add Selected Variant to the cart with properties
{
    "__foxsell:dynamic_bundle_id": "<bundle_id>_${dateNow}",
    "__foxsell:dynamic_bundle_selected_items": JSON.stringify(selectedItems)
}

Function will automatically pick these line items and apply the bundling logic based on the configured settings.

If you have any questions, feel free to send an email to [email protected]

Why am I not eligible to use FoxSell Bundles Plus?

Can bundles be sold with subscriptions?

How to add Mix and Match (Build your own Bundle) to your store?