Xboost

How to change the font of a bundle offer

Overview

Offers from XB: Bundles Quantity Breaks use your theme's font, so they match the rest of your store. The app has no font setting. To use another font, add custom CSS to the offer.

Steps

  1. Open Offers and click the offer name.
  2. Click Appearance at the top of the editor.
  3. In Custom CSS, add a rule with the widget's main class from the table below, and replace Georgia, serif with the font you want. For a Quantity Discounts offer:
.xb_quantity_breaks,
.xb_quantity_breaks * {
  font-family: Georgia, serif;
}
  1. Click Save in the bar at the top of the page.
Offer typeMain class
Bundle Builder.xb_bb
Quantity Discounts.xb_quantity_breaks
Fixed bundle.xb_fixed_bundle
AI Frequently Bought Together.xb_bundle
Mix & match.xb_volume_breaks
Product Add-Ons.xb_checkbox_upsell
Buy X Get Y (BOGO).xb_buy_x_get_y

To change only part of the widget, for example the title, use a more specific class. Type a dot (.) in the CSS editor to see the class names, or click Show list under the editor.

Use a font that is already available on your store, for example one of your theme fonts. Custom CSS is saved with each offer. To change the font of every offer, add the CSS to each offer.

To change the text size instead, use Text size on the Appearance step. You do not need CSS for that.