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