Product Fruits can be loaded with a few different options, passed as part of the init action. The use of these will determine how Product Fruits behaves. Please refer to the methods below for more information.
An example of initializing with one of these options in the NPM package can be seen here and an example for the React NPM package can be seen here.
disableLocationChangeDetection
Set to true to turn off the automatic URL change detection. You will then need to update Product Fruits manually whenever the URL changes, as described here.
disableBannersAutoMargin
When a banner is displayed, we move the layout to make space for the banner. If this option is set to true, this doesn't happen and it is up to you to make the space for the banner using our JS API.
hideInAppCenterLauncher
Set to true to hide the built-in Life Ring Button launcher. You can then use your custom launcher or use the JS API to show the button when it is needed. This is described here.
customNavigation
Enables and handles custom routing. It has the following properties:
customNavigation: {
use: true, // Set to true to enable this feature
// this function will be called by Product Fruits when it needs to navigate somewhere
navigate: (url) => yourCustomRouter.navigate(url),
// this callback is called when Product Fruits needs to read the current URL
onGet() {
// Must always start with https://
return 'https://example.com/route'
},Custom routing is described here.