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



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

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

Updated on: 07/08/2023