# Customize styles

# Customize your Bundleb2b feature style using Bundleb2b style config JS API

We have all our BundleB2B related pages with notations below, all the keys below are available for customization, please find the key you want to modify in the pictures and overwrite or extend on demand.

# usage

window.b3themeConfig.useStyles = {}

# global

create shoppingList model

  'global.shoppingListModal.header': {},
  'global.shoppingListModal.header.title': {},
  'global.shoppingListModal.header.close': {},
  'global.shoppingListModal.body': {},
  'global.shoppingListModal.actions.container': {},
  'global.shoppingListModal.button.cancel': {},
  'global.shoppingListModal.button.save': {},
  'global.shoppingListModal.form.container': {},
  'global.shoppingListModal.form.item': {},
  'global.shoppingListModal.form.item.label': {},
  'global.shoppingListModal.form.item.input': {},
  'global.shoppingListModal.form.item.textarea': {},
  'global.shoppingListModal.form.item.required': {},

# trade professional application

  'tpa.mobile.entryButton': {},
  'tpa.entryButton': {},

# address book

  'addressBook.panel.container': {},
  'addressBook.panel.title': {},
  'addressBook.panel.info.container': {},
  'addressBook.panel.info': {},
  'addressBook.panel.phone.label': {},
  'addressBook.panel.phone': {},
  'addressBook.actions.container': {},
  'addressBook.search.input': {},
  'addressBook.search.icon': {},
  'addressBook.filter.button': {},
  'addressBook.filter.button.icon': {},
  'addressBook.actions.addNew.button': {},
  'addressBook.filter.container': {},
  'addressBook.filter.item.container': {},
  'addressBook.filter.item.input': {},
  'addressBook.filter.item.label': {},
  'addressBook.filter.item.select': {},
  'addressBook.filter.item.checkbox.container': {},
  'addressBook.filter.item.checkbox': {},
  'addressBook.filter.item.checkbox.label': {},
  'addressBook.filter.cancel.button': {},
  'addressBook.filter.apply.button': {},
  'addressBook.table.container': {},
  'addressBook.table.thead.th': {},
  'addressBook.td.shipping.icon': {},
  'addressBook.td.billing.icon': {},
  'addressBook.td.action.icon': {},
  'addressBook.td.action.container': {},
  'addressBook.td.action.item': {},

  'addressBook.modal.header': {},
  'addressBook.modal.header.title': {},
  'addressBook.modal.header.close': {},
  'addressBook.modal.body': {},
  'addressBook.modal.form.checkbox': {},
  'addressBook.modal.form.checkbox.checked': {},
  'addressBook.modal.form.checkbox.label': {},
  'addressBook.modal.form.item.container': {},
  'addressBook.modal.form.item.input': {},
  'addressBook.modal.form.item.label': {},
  'addressBook.modal.form.item.select': {},
  'addressBook.modal.form.item.required': {},
  'addressBook.modal.form.button.container': {},
  'addressBook.modal.form.button.save': {},
  'addressBook.modal.form.button.cancel': {},

# buy again

  'buyAgain.actions.container': {},
  'buyAgain.search.container': {},
  'buyAgain.search.input': {},
  'buyAgain.dateFilter.container': {},
  'buyAgain.dateFilter.from.input': {},
  'buyAgain.dateFilter.from.icon': {},
  'buyAgain.dateFilter.to.input': {},
  'buyAgain.dateFilter.to.icon': {},
  'buyAgain.table': {},
  'buyAgain.thead.th': {},
  'buyAgain.tbody.td': {},
  'buyAgain.td.qty.container': {},
  'buyAgain.td.qty.decrease': {},
  'buyAgain.td.qty.increase': {},
  'buyAgain.td.qty.input': {},
  'buyAgain.td.actions.container': {},
  'buyAgain.td.actions.button.addToCart': {},
  'buyAgain.td.actions.button.addAllToCart': {},
  'buyAgain.td.actions.button.addToShoppingList': {},
  'buyAgain.unit.container': {},
  'buyAgain.unit.num': {},

  'buyAgain.shoppingListModal.header': {},
  'buyAgain.shoppingListModal.header.title': {},
  'buyAgain.shoppingListModal.header.close': {},
  'buyAgain.shoppingListModal.body': {},
  'buyAgain.shoppingListModal.list.container': {},
  'buyAgain.shoppingListModal.list.item': {},
  'buyAgain.shoppingListModal.list.item.active': {},
  'buyAgain.shoppingListModal.list.item.hover': {},
  'buyAgain.shoppingListModal.pagination.container': {},
  'buyAgain.shoppingListModal.actions.container': {},
  'buyAgain.shoppingListModal.button.addToNew': {},
  'buyAgain.shoppingListModal.button.add': {},
  'buyAgain.shoppingListModal.button.cancel': {},

# quotes(v3.0)

  'quotes.container': {},
  'quotes.head.container': {},
  'quotes.head.title': {},
  'quotes.table': {},
  'quotes.thead.th': {},
  'quotes.tbody.td': {},
  'quotes.filter.icon': {},
  'quotes.search.container': {},
  'quotes.filter.container': {},
  'quotes.search.filters.button.clear': {},
  'quotes.search.filters.button.apply': {},
  'quotes.td.action.icon': {},
  'quotes.td.action.panel.container': {},
  'quotes.td.action.panel.item': {},

# dashboard

  'dashboard.head.container': {},
  'dashboard.head.info.container': {},
  'dashboard.head.info.left': {},
  'dashboard.head.info.right': {},
  'dashboard.panel.container': {},
  'dashboard.userInfo.container': {},
  'dashboard.userInfo.name.container': {},
  'dashboard.userInfo.name.label': {},
  'dashboard.userInfo.name.value': {},
  'dashboard.userInfo.email.container': {},
  'dashboard.userInfo.email.label': {},
  'dashboard.userInfo.email.value': {},
  'dashboard.companyInfo.container': {},
  'dashboard.companyInfo.title': {},
  'dashboard.companyInfo.num': {},
  'dashboard.actions.container': {},
  'dashboard.search.container': {},
  'dashboard.search.input': {},
  'dashboard.pagination.container': {},
  'dashboard.table': {},
  'dashboard.thead.th': {},
  'dashboard.tbody.tr': {},
  'dashboard.td': {},
  'dashboard.td.button.begin': {},
  'dashboard.td.button.selected': {},
  'dashboard.td.button.end.container': {},
  'dashboard.td.button.end': {},

# order detail

  'order.container': {},
  'order.content.container': {},
  'order.aside.container': {},
  'order.content.title': {},
  'order.content.list.container': {},
  'order.content.list.item.container': {},
  'order.content.list.item.product.container': {},
  'order.content.list.item.product.price': {},
  'order.content.list.item.product.title': {},
  'order.content.list.item.checkbox': {},
  'order.content.list.item.checkbox.checked': {},
  'order.checkInfo.container': {},
  'order.checkInfo.dd': {},
  'order.checkInfo.dt': {},
  'order.aside.item.container': {},
  'order.aside.item.title': {},
  'order.aside.item.orderInfo.container': {},
  'order.aside.item.orderInfo.item.label': {},
  'order.aside.item.orderInfo.item.value': {},
  'order.aside.address.list.container': {},
  'order.aside.address.list.item': {},
  'order.aside.actions.container': {},
  'order.aside.button.print': {},
  'order.aside.button.reorder': {},
  'order.aside.button.addToNewShoppingList': {},

# order list

  'orders.statusActions.container': {},
  'orders.button.showMy': {},
  'orders.button.showAll': {},
  'orders.search.container': {},
  'orders.search.input': {},
  'orders.search.button': {},
  'orders.search.button.icon': {},
  'orders.search.filters.button': {},
  'orders.search.filters.button.icon': {},
  'orders.dateFilter.container': {},
  'orders.dateFilter.from.input': {},
  'orders.dateFilter.to.input': {},
  'orders.dateFilter.from.icon': {},
  'orders.dateFilter.to.icon': {},
  'orders.search.filters.container': {},
  'orders.search.filters.items.container': {},
  'orders.search.filters.item.container': {},
  'orders.search.filters.item.input': {},
  'orders.search.filters.item.label': {},
  'orders.search.filters.actions.container': {},
  'orders.search.filters.button.clear': {},
  'orders.search.filters.button.apply': {},
  'orders.table': {},
  'orders.thead.th': {},
  'orders.tbody.td': {},
  'orders.td.status': {},
  'orders.td.action.container': {},
  'orders.td.action.button.reorder': {},
  'orders.td.action.button.addToShoppingList': {},

# quick order pad

  'qop.mobile.entryButton': {},
  'qop.entryButton': {},
  'qop.container': {},
  'qop.left.panel.container': {},
  'qop.left.panel': {},
  'qop.left.panel.title': {},
  'qop.left.panel.subtitle': {},
  'qop.left.panel.upload.container': {},
  'qop.left.panel.upload.label': {},
  'qop.left.panel.button.addToCart': {},
  'qop.right.panel.container': {},
  'qop.right.panel': {},
  'qop.right.panel.title': {},
  'qop.right.panel.subtitle': {},
  'qop.right.panel.remove': {},
  'qop.right.panel.sku.input': {},
  'qop.right.panel.qty.input': {},
  'qop.right.panel.button.container': {},
  'qop.right.panel.button.addRow': {},
  'qop.right.panel.button.addToCart': {},

# shopping lists

  'shoppinglists.head.container': {},
  'shoppinglists.head.title': {},
  'shoppinglists.head.button.container': {},
  'shoppinglists.head.button.create': {},
  'shoppinglists.actions.container': {},
  'shoppinglists.actions.button': {},
  'shoppinglists.table': {},
  'shoppinglists.thead.th': {},
  'shoppinglists.tbody.tr': {},
  'shoppinglists.tbody.td': {},
  'shoppinglists.td.action': {},
  'shoppinglists.td.action.panel.container': {},
  'shoppinglists.td.action.panel.item': {},
  'shoppinglists.td.button.view': {},
  'shoppinglists.td.button.delete': {},
  'shoppinglist.button.reject': {},
  'shoppinglists.unit.container': {},
  'shoppinglists.unit.num': {},

# shopping list

  'shoppinglist.head.container': {},
  'shoppinglist.head.title': {},
  'shoppinglist.button.editInfo': {},
  'shoppinglist.info.container': {},
  'shoppinglist.info.label': {},
  'shoppinglist.button.update': {},
  'shoppinglist.products.container': {},
  'shoppinglist.left.wraper': {},
  'shoppinglist.left.container': {},
  'shoppinglist.left.title': {},
  'shoppinglist.left.form.container': {},
  'shoppinglist.left.form.item.container': {},
  'shoppinglist.left.form.item.label': {},
  'shoppinglist.left.form.item.input': {},
  'shoppinglist.left.button.singleSku': {},
  'shoppinglist.left.button.singleSku.icon': {},
  'shoppinglist.left.button.multipleSku': {},
  'shoppinglist.left.button.multipleSku.icon': {},
  'shoppinglist.left.button.choose': {},
  'shoppinglist.left.button.addToList': {},
  'shoppinglist.right.wraper': {},
  'shoppinglist.right.unit.container': {},
  'shoppinglist.right.unit.num': {},
  'shoppinglist.right.table': {},
  'shoppinglist.right.thead.th': {},
  'shoppinglist.right.checkbox': {},
  'shoppinglist.right.tbody.tr': {},
  'shoppinglist.right.tbody.td': {},
  'shoppinglist.right.td.img': {},
  'shoppinglist.right.td.qty.input': {},
  'shoppinglist.right.button.deleteSelected': {},
  'shoppinglist.right.button.updateQty': {},
  'shoppinglist.right.button.editOption': {},
  'shoppinglist.right.button.editOption.icon': {},
  'shoppinglist.right.button.delete': {},
  'shoppinglist.right.button.delete.icon': {},
  'shoppinglist.right.item.grand.total': {},
  'shoppinglist.bottom.cart.wraper': {},
  'shoppinglist.bottom.cart.container': {},
  'shoppinglist.bottom.cart.content.container': {},
  'shoppinglist.bottom.cart.button.toggle': {},
  'shoppinglist.bottom.cart.button.addToCart': {},
  'shoppinglist.bottom.cart.button.goToCheckout': {},

  'shoppinglist.editModal.header.container': {},
  'shoppinglist.editModal.header.title': {},
  'shoppinglist.editModal.header.close': {},
  'shoppinglist.editModal.body': {},
  'shoppinglist.editModal.form.container': {},
  'shoppinglist.editModal.form.item.container': {},
  'shoppinglist.editModal.form.item.label': {},
  'shoppinglist.editModal.form.item.input': {},
  'shoppinglist.editModal.form.item.textarea': {},
  'shoppinglist.editModal.form.item.required': {},
  'shoppinglist.editModal.button.container': {},
  'shoppinglist.editModal.button.save': {},
  'shoppinglist.editModal.button.cancel': {},

# user management

  'userManagement.title.container': {},
  'userManagement.title.text': {},
  'userManagement.search.container': {},
  'userManagement.search.input': {},
  'userManagement.search.icon': {},
  'userManagement.table': {},
  'userManagement.thead.th': {},
  'userManagement.tbody.tr': {},
  'userManagement.tbody.td': {},
  'userManagement.td.actions.container': {},
  'userManagement.td.button.edit': {},
  'userManagement.td.button.delete': {},
  'userManagement.unit.container': {},
  'userManagement.unit.num': {},
  'userManagement.button.container': {},
  'userManagement.button.addNew': {},

  'userManagement.modal.header.container': {},
  'userManagement.modal.header.title': {},
  'userManagement.modal.header.close': {},
  'userManagement.modal.body': {},
  'userManagement.modal.form.container': {},
  'userManagement.modal.form.item.container': {},
  'userManagement.modal.form.item.input': {},
  'userManagement.modal.form.item.select': {},
  'userManagement.modal.form.item.label': {},
  'userManagement.modal.form.item.required': {},
  'userManagement.modal.form.button.container': {},
  'userManagement.modal.form.button.save': {},
  'userManagement.modal.form.button.cancel': {},

# Invoice Detail

'invoiceDetail.headerWrap': {},
'invoiceDetail.header': {},
'invoiceDetail.header.button.print': {},
'invoiceDetail.info': {},
'invoiceDetail.amount': {},
'invoiceDetail.info.table': {},
'invoiceDetail.address': {},
'invoiceDetail.status.detail': {},

# Invoice Receipt

'invoiceReceipt.title': {},
'invoiceReceipt.payment.overview': {},
'invoiceReceipt.lines.title': {},
'invoiceReceipt.lines.des': {},
'invoiceReceipt.payment.detail': {},
'invoiceReceipt.lines': {},

# invoice list page

  'invoices.container': {},
  'invoices.head.container': {},
  'invoices.head.title': {},
  'invoices.table': {},
  'invoices.thead.th': {},
  'invoices.tbody.td': {},
  'invoices.td.action.icon': {},
  'invoices.td.action.panel.container': {},
  'invoices.td.action.panel.item': {},
  'invoices.search.container': {},
  'invoices.filter.container': {},
  'invoices.sort.icon': {},
  'invoices.search.filters.button.clear': {},
  'invoices.search.filters.button.apply': {},

# invoice payment page

  'invoices.payment.header': {},
  'invoices.payment.pending': {},
  'invoices.payment.table': {},
  'invoices.payment.select': {},

# request for quote

  'rfq.entryButton': {},
  'rfq.mobile.entryButton': {},
  'rfq.form.container': {},
  'rfq.addressBook.container': {},
  'rfq.button.container': {},
  'rfq.header.container': {},
  'rfq.header.icon.left': {},
  'rfq.header.icon.wrap': {},
  'rfq.company.info': {},
  'rfq.person.info': {},
  'rfq.quote.info': {},
  'rfq.items.info': {},
  'rfq.total': {},
  'rfq.trackingHistory.container': {},
  rfqFormWrapper: {},
  rfqProductWrapper: {},

← Multi-language Javascript overwrite or injection →