Customize the Bread Experience

Bread Placement

Bread is intended to be highly customizable to fit your overall brand and experience. As such, you will have to make some decisions about how you want to customize the Bread experience for your customers.

  • Where should Bread appear in my customer’s journey?
  • Where on a page should Bread appear?
  • How do I want the Bread button and modal to appear?

Integrate Bread Across your Customer’s Journey

For most stores, Bread checkout buttons should be enabled on product detail pages, the cart overview page, and at the checkout page. From the product detail page, the Bread checkout button will contain the specific product information. Customers interacting with these Bread buttons will be able to pre-qualify for financing and optionally complete their purchase directly from the product detail page.

The Bread checkout button on the cart overview page will contain information for the full cart of items and allows customers to pre-qualify for financing and complete their purchase directly from the cart overview page.

We also recommend taking advantage of Bread “Get My Rate” buttons which are easy to integrate anywhere on your store and allows customers to pre-qualify for financing and check their rates. Common “Get My Rate” button implementations include banner ads, placements on the homepage, and dedicated financing pages. Learn more about “Get My Rate” buttons at Bread Apply or see the guide on building a dedicated financing page.

Cutomize Your Bread Button

Button Positioning and Size

Positioning of the Bread button is controlled by the placement of the Bread page block in Magento.

Note: You can’t make these positioning adjustments through the Admin Dashboard, you’ll have to edit your Magento files directly

Product detail page

The identifier of the Bread block on the product detail page is breadcheckout.prod.view. By default, it is placed in reference to the product.info.extrahint block. You may use your page templates to place it elsewhere on the page to match your design.

Cart overview page

The identifier of the Bread block on the cart overview page is breadcheckout.checkout.view. By default, it is placed in reference to the checkout.cart.methods block. You may use your page templates to place it elsewhere on the page to match your design.

Both breadcheckout.prod.view and breadcheckout.checkout.view blocks will place two <div> elements on the page with id attributes of bread-btn-cntnr and bread-checkout-btn.

<div id="bread-btn-cntnr">
    <div id="bread-checkout-btn" title="Bread Checkout" class="button"></div>
</div>

Use your site’s CSS to fine-tune the positioning and size of the Bread button. Note: If you wish to control the Bread button size with CSS, you must change the setting Use default button size in the Bread extension settings to No.

Additionally, for configurable products and products with custom options, the Bread block contains an overlay and tooltip to prevent customers from clicking on Bread if the product is not in a valid configuration state. You can style the overlay and tooltip in your site’s CSS. The overlay has the class name button-prevent and the tooltip has the class names buy_error_tip and override_tip.

Button Styling

The Bread button can be customized to appear and behave however you want by using CSS. This includes fonts, colors, rounded vs squared edges, hover effects, and more. However, unlike a regular HTML element, the Bread button CSS must be supplied through the Bread extension settings page in the Bread Button Design field.

To get started with your custom CSS:

  1. Review Style the Bread Button for an explanation of the Bread button HTML structure and different button states.
  2. All CSS values contained in quotes should use double quotes. For example:
    #bread-button { font-family: "Times New Roman"; }
  3. Compress your CSS into a single-line string using a service such as CSS Minifier.

Forming your Bread CSS is often an iterative process. When you’re ready to try out your custom CSS, make sure to minify it first and then paste it into Bread Button Design in the Bread extension settings.

Customize the Bread Modal

Customizing the look and feel of the Bread modal is simple and can be completed through our merchant portal. To get started:

  1. Log into your merchant portal at merchants-sandbox.getbread.com.
  2. Find Checkout Settings on the left-hand menu.

Checkout Settings presents the opportunity to customize colors, font, and text within the Bread checkout flow. On this page, you also have the option to create a custom introduction pop-up which would appear prior to the pre-qualification flow. If you are concerned about your audience understanding the Bread financing option, this is a great way to educate your customers before they experience the pre-qualification flow.

When you are ready to go live, copy your checkout settings from merchants-sandbox.getbread.com to the live Merchant portal at merchants.getbread.com

You are now ready to market your Bread program. Learn more about how to educate your potential customers early in their experience on your site.

To actually increase conversions through your Bread program, you must market your financing offer