Default Bundle Settings
The settings JSON controls all configurable aspects of the bundle template — display mode, product card styling, pricing behavior, colors, spacing, and mobile layout. Settings are split into two layout-specific sections (bundle and bundleComponent) plus shared global settings.
{
"displayMode": "frequently-bought-together",
"maxBundleSize": 3,
"showSavings": true,
"showTotalPrice": true,
"allowCustomization": true,
"bundleLayout": "horizontal",
"bundle": {
"backgroundColor": "#F9F9FA",
"productCard": {
"image": {
"width": 110,
"height": 133,
"objectFit": "cover",
"aspectRatio": "3:4"
},
"title": {
"size": "16px",
"weight": 500,
"font": "Futura",
"color": "#000000",
"multipleLines": true
},
"price": {
"weight": 500,
"size": "14px",
"color": "#666666",
"font": "Futura"
}
},
"atcBtn": {
"backgroundColor": "#000000",
"text": {
"color": "#FFFFFF",
"size": "12px",
"weight": 500,
"font": "Futura"
}
}
},
"bundleComponent": {
"backgroundColor": "#F9F9FA",
"productCard": {
"image": {
"width": 110,
"height": 133,
"objectFit": "cover",
"aspectRatio": "3:4"
},
"title": {
"size": "16px",
"weight": 500,
"font": "Futura",
"color": "#000000",
"multipleLines": true
},
"price": {
"weight": 500,
"size": "14px",
"color": "#666666",
"font": "Futura"
}
},
"atcBtn": {
"backgroundColor": "#000000",
"text": {
"color": "#FFFFFF",
"size": "12px",
"weight": 500,
"font": "Futura"
}
}
},
"showProductOptions": true,
"pricing": {
"showIndividualPrices": true,
"showBundlePrice": true,
"showSavingsAmount": true,
"showSavingsPercentage": true,
"priceCalculation": "sum",
"discountType": "percentage",
"discountValue": 10
},
"appearance": {
"layout": "card",
"showPlusIcons": true,
"showEqualIcon": true,
"highlightSavings": true,
"stickyAddToCart": false
},
"colors": {
"background": "#f8f8f8",
"cardBackground": "#ffffff",
"text": "#333333",
"price": "#000000",
"originalPrice": "#999999",
"savingsText": "#00a650",
"savingsBackground": "#e6f4ea",
"button": "#000000",
"buttonText": "#ffffff",
"plusIcon": "#666666",
"border": "#e0e0e0"
},
"spacing": {
"containerPadding": "30px",
"itemGap": "20px",
"sectionMargin": "50px",
"cardPadding": "15px"
},
"behavior": {
"autoSelectAll": true,
"updatePriceOnSelection": true,
"showOutOfStock": false,
"replaceOutOfStock": true,
"minimumItems": 2,
"trackingEnabled": true
},
"mobile": {
"layout": "vertical",
"showImages": true,
"compactMode": true
}
}
Settings Reference
Global Settings
| Setting | Type | Default | Description |
|---|---|---|---|
displayMode | String | "frequently-bought-together" | Bundle display mode |
maxBundleSize | Number | 3 | Maximum products in a bundle |
showSavings | Boolean | true | Show savings amount to customer |
showTotalPrice | Boolean | true | Display total bundle price |
allowCustomization | Boolean | true | Allow customers to modify bundle |
bundleLayout | String | "horizontal" | Layout direction (horizontal / vertical) |
showProductOptions | Boolean | true | Show product option selectors |
Layout-Specific Settings (bundle / bundleComponent)
Both layouts share the same structure with independent values:
Product Card — Image
| Setting | Type | Default | Description |
|---|---|---|---|
width | Number | 110 | Image width in pixels |
height | Number | 133 | Image height in pixels |
objectFit | String | "cover" | CSS object-fit value |
aspectRatio | String | "3:4" | Image aspect ratio |
Product Card — Title
| Setting | Type | Default | Description |
|---|---|---|---|
size | String | "16px" | Font size |
weight | Number | 500 | Font weight |
font | String | "Futura" | Font family |
color | String | "#000000" | Text color |
multipleLines | Boolean | true | Allow title to wrap to multiple lines |
Product Card — Price
| Setting | Type | Default | Description |
|---|---|---|---|
weight | Number | 500 | Font weight |
size | String | "14px" | Font size |
color | String | "#666666" | Price text color |
font | String | "Futura" | Font family |
Add to Cart Button
| Setting | Type | Default | Description |
|---|---|---|---|
backgroundColor | String | "#000000" | Button background color |
text.color | String | "#FFFFFF" | Button text color |
text.size | String | "12px" | Button text size |
text.weight | Number | 500 | Button text weight |
text.font | String | "Futura" | Button text font |
Pricing
| Setting | Type | Default | Description |
|---|---|---|---|
showIndividualPrices | Boolean | true | Show price per product |
showBundlePrice | Boolean | true | Show combined bundle price |
showSavingsAmount | Boolean | true | Show savings in currency |
showSavingsPercentage | Boolean | true | Show savings as percentage |
priceCalculation | String | "sum" | How to calculate bundle price |
discountType | String | "percentage" | Discount type (percentage / fixed) |
discountValue | Number | 10 | Discount value |
Appearance
| Setting | Type | Default | Description |
|---|---|---|---|
layout | String | "card" | Product card layout style |
showPlusIcons | Boolean | true | Show ”+” icons between products |
showEqualIcon | Boolean | true | Show ”=” icon before total |
highlightSavings | Boolean | true | Visually highlight savings |
stickyAddToCart | Boolean | false | Make ATC button sticky on scroll |
Behavior
| Setting | Type | Default | Description |
|---|---|---|---|
autoSelectAll | Boolean | true | Auto-select all products on load |
updatePriceOnSelection | Boolean | true | Recalculate price on selection change |
showOutOfStock | Boolean | false | Show out-of-stock products |
replaceOutOfStock | Boolean | true | Replace OOS products with alternatives |
minimumItems | Number | 2 | Minimum items required for bundle |
trackingEnabled | Boolean | true | Enable analytics tracking |
Mobile
| Setting | Type | Default | Description |
|---|---|---|---|
layout | String | "vertical" | Mobile layout direction |
showImages | Boolean | true | Show product images on mobile |
compactMode | Boolean | true | Use compact mobile layout |