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:

It is displayed while the widget is loading:

Changing the default style of placeholder

To change default style of the placeholder, follow these steps:

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>

2. 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>

3. 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

<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

<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:

<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>