Xboost

How to make a bundle offer shorter

Overview

If an offer from XB: Bundles Quantity Breaks takes too much space on your product page, reduce its spacing, photo size and text size on the Appearance step.

Steps

  1. Open Offers and click the offer name.
  2. Click Appearance at the top of the editor.
  3. Under Design, lower Space percentage. On offers with photos, lower the photo size (Photo size, or Tier photo size and Variant photo size on Quantity Discounts). On Mix & match, also lower Item space.
  4. Under Text size, lower the title, item and price sizes.
  5. Under Content, clear the options you do not need, for example Show compare price.
  6. Click Save in the bar at the top of the page.

The preview on the right updates as you change the settings.

Reduce the space above and below the widget

If you added the widget as an app block in the theme editor, the block's Margin Horizontal setting sets the space above and below it (default 16 px). Lower it and click Save in the theme editor.

Change the padding with CSS

For finer control, add CSS in Custom CSS on the Appearance step. New Quantity Discounts offers start with this example, which you can change:

.xb_quantity_breaks{padding: 4px;}

For the main class of each offer type, see How to change the font of a bundle offer.