Skip to main content

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

SettingTypeDefaultDescription
displayModeString"frequently-bought-together"Bundle display mode
maxBundleSizeNumber3Maximum products in a bundle
showSavingsBooleantrueShow savings amount to customer
showTotalPriceBooleantrueDisplay total bundle price
allowCustomizationBooleantrueAllow customers to modify bundle
bundleLayoutString"horizontal"Layout direction (horizontal / vertical)
showProductOptionsBooleantrueShow product option selectors

Layout-Specific Settings (bundle / bundleComponent)

Both layouts share the same structure with independent values:

Product Card — Image

SettingTypeDefaultDescription
widthNumber110Image width in pixels
heightNumber133Image height in pixels
objectFitString"cover"CSS object-fit value
aspectRatioString"3:4"Image aspect ratio

Product Card — Title

SettingTypeDefaultDescription
sizeString"16px"Font size
weightNumber500Font weight
fontString"Futura"Font family
colorString"#000000"Text color
multipleLinesBooleantrueAllow title to wrap to multiple lines

Product Card — Price

SettingTypeDefaultDescription
weightNumber500Font weight
sizeString"14px"Font size
colorString"#666666"Price text color
fontString"Futura"Font family

Add to Cart Button

SettingTypeDefaultDescription
backgroundColorString"#000000"Button background color
text.colorString"#FFFFFF"Button text color
text.sizeString"12px"Button text size
text.weightNumber500Button text weight
text.fontString"Futura"Button text font

Pricing

SettingTypeDefaultDescription
showIndividualPricesBooleantrueShow price per product
showBundlePriceBooleantrueShow combined bundle price
showSavingsAmountBooleantrueShow savings in currency
showSavingsPercentageBooleantrueShow savings as percentage
priceCalculationString"sum"How to calculate bundle price
discountTypeString"percentage"Discount type (percentage / fixed)
discountValueNumber10Discount value

Appearance

SettingTypeDefaultDescription
layoutString"card"Product card layout style
showPlusIconsBooleantrueShow ”+” icons between products
showEqualIconBooleantrueShow ”=” icon before total
highlightSavingsBooleantrueVisually highlight savings
stickyAddToCartBooleanfalseMake ATC button sticky on scroll

Behavior

SettingTypeDefaultDescription
autoSelectAllBooleantrueAuto-select all products on load
updatePriceOnSelectionBooleantrueRecalculate price on selection change
showOutOfStockBooleanfalseShow out-of-stock products
replaceOutOfStockBooleantrueReplace OOS products with alternatives
minimumItemsNumber2Minimum items required for bundle
trackingEnabledBooleantrueEnable analytics tracking

Mobile

SettingTypeDefaultDescription
layoutString"vertical"Mobile layout direction
showImagesBooleantrueShow product images on mobile
compactModeBooleantrueUse compact mobile layout