Customization of the Widget Placeholder
WARNING: The installation requires technical knowledge and prior experience with Liquid code. If you are not comfortable with this, please request an installation
ATTENTION: Make sure to create a backup of the .liquid file before editing it
In the 'Widget' settings you can enable the widget placeholder
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_19gzziq.png)
It is displayed while the widget is loading
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_ucul9u.png)
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_4e34py.png)
The default style of the placeholder can be changed
To do this, you need to:
Add a root element for a specific type of bundle to your product template
For the Bundle page it is:
For the Bundled product's page it is:
For the Quantity Breaks it is:
Next you need to add a class mbc-bundle-placeholder to any of the div's listed above
Now you can include your placeholder layout into these elements
Quantity Breaks bundle:
'Combo' and 'By Product' bundles - grid template
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_10mpfx.png)
'Bundles with its own product page' and 'Cross-sell widget' bundles - listOnlyText template
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_8vghkj.png)
'Combo' and 'By Product' bundles - listOnlyImage template
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_1d4gf4u.png)
ATTENTION: Make sure to create a backup of the .liquid file before editing it
In the 'Widget' settings you can enable the widget placeholder
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_19gzziq.png)
It is displayed while the widget is loading
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_ucul9u.png)
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_4e34py.png)
The default style of the placeholder can be changed
To do this, you need to:
Add a root element for a specific type of bundle to your product template
For the Bundle page it is:
<div id="mbcBundleItems"></div>
For the Bundled product's page it is:
<div id="mbcBundleItemsWidget"></div>
For the Quantity Breaks it is:
<div id="mbcBundleVolumeDiscount"></div>
Next you need to add a class mbc-bundle-placeholder to any of the div's listed above
<div id="mbcBundleItems" class="mbc-bundle-placeholder"></div>
<div id="mbcBundleItemsWidget" class="mbc-bundle-placeholder"></div>
<div id="mbcBundleVolumeDiscount" class="mbc-bundle-placeholder"></div>
Now you can include your placeholder layout into these elements
Examples of default placeholders
Quantity Breaks bundle:
<div id="mbcBundleVolumeDiscount" class="mbc-bundle-placeholder"></div>
'Combo' and 'By Product' bundles - grid template
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_10mpfx.png)
<div id="mbcBundleItems" class="mbc-bundle-placeholder">
<div style="display: flex; flex-direction: column; border: 1px solid #eee; padding: 10px; max-width: 530px; margin: 20px 0;">
<div style="background: #eee; height: 25px; margin: 10px auto; width: 100%; max-width: 70%"></div>
<div style="display: flex;">
<div style="flex: 1;">
<div style="background: #eee; height: 150px; margin: 10px;"></div>
<div style="background: #eee; height: 12px; margin: 10px;"></div>
<div style="background: #eee; height: 30px; margin: 10px;"></div>
</div>
<div style="flex: 1;">
<div style="background: #eee; height: 150px; margin: 10px;"></div>
<div style="background: #eee; height: 12px; margin: 10px;"></div>
<div style="background: #eee; height: 30px; margin: 10px;"></div>
</div>
</div>
<div style="background: #eee; height: 1px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div id="mbcBundleItemsWidget" class="mbc-bundle-placeholder">
<div style="display: flex; flex-direction: column; border: 1px solid #eee; padding: 10px; max-width: 530px; margin: 20px 0;">
<div style="background: #eee; height: 25px; margin: 10px auto; width: 100%; max-width: 70%"></div>
<div style="display: flex;">
<div style="flex: 1;">
<div style="background: #eee; height: 150px; margin: 10px;"></div>
<div style="background: #eee; height: 12px; margin: 10px;"></div>
<div style="background: #eee; height: 30px; margin: 10px;"></div>
</div>
<div style="flex: 1;">
<div style="background: #eee; height: 150px; margin: 10px;"></div>
<div style="background: #eee; height: 12px; margin: 10px;"></div>
<div style="background: #eee; height: 30px; margin: 10px;"></div>
</div>
</div>
<div style="background: #eee; height: 1px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
'Bundles with its own product page' and 'Cross-sell widget' bundles - listOnlyText template
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_8vghkj.png)
<div id="mbcBundleItemsWidget" class="mbc-bundle-placeholder">
<div style="display: flex; flex-direction: column; border: 1px solid #eee; padding: 10px; max-width: 530px; margin: 20px 0;">
<div style="background: #eee; height: 25px; margin: 10px auto; width: 100%; max-width: 70%"></div>
<div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
<div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
<div style="background: #eee; height: 1px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div id="mbcBundleWidgetMixAndMath" class="mbc-bundle-placeholder">
<div style="display: flex; flex-direction: column; border: 1px solid #eee; padding: 10px; max-width: 530px; margin: 20px 0;">
<div style="background: #eee; height: 25px; margin: 10px auto; width: 100%; max-width: 70%"></div>
<div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
<div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 60%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
<div style="background: #eee; height: 1px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
'Combo' and 'By Product' bundles - listOnlyImage template
![](https://storage.crisp.chat/users/helpdesk/website/cc90d47b30689000/screenshot-mbc-bundles-demomys_1d4gf4u.png)
<div id="mbcBundleItems" class="mbc-bundle-placeholder">
<div style="display: flex; flex-direction: column; border: 1px solid #eee; padding: 10px; max-width: 530px; margin: 20px 0;">
<div style="background: #eee; height: 25px; margin: 10px auto; width: 100%; max-width: 70%"></div>
<div style="display: flex;">
<div style="background: #eee; width: 30%; height: 120px; margin: 10px;"></div>
<div style="width: 70%;">
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div style="display: flex;">
<div style="background: #eee; width: 30%; height: 120px; margin: 10px;"></div>
<div style="width: 70%;">
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div style="background: #eee; height: 1px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div id="mbcBundleItemsWidget" class="mbc-bundle-placeholder">
<div style="display: flex; flex-direction: column; border: 1px solid #eee; padding: 10px; max-width: 530px; margin: 20px 0;">
<div style="background: #eee; height: 25px; margin: 10px auto; width: 100%; max-width: 70%"></div>
<div style="display: flex;">
<div style="background: #eee; width: 30%; height: 120px; margin: 10px;"></div>
<div style="width: 70%;">
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div style="display: flex;">
<div style="background: #eee; width: 30%; height: 120px; margin: 10px;"></div>
<div style="width: 70%;">
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 70%; height: 12px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
<div style="background: #eee; height: 1px; margin: 10px;"></div>
<div style="background: #eee; width: 40%; height: 30px; margin: 10px;"></div>
</div>
</div>
Updated on: 07/08/2023
Thank you!