Customize the Bread Experience

We understand the importance of maintaining the look and feel of your overall branding and reducing friction during the purchasing journey. Bread offers several features to meet this goal.

Style the Bread Button

Bread buttons can be styled using CSS to match the color scheme and user experience of your site. Rather than adding this CSS to your Shopify theme, your Bread button CSS must be entered in the Bread app settings.

Get started with your custom CSS:

  1. Review Style the Bread Button for guidance on writing CSS for your Bread button.
  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.

Note: Using custom CSS will completely override the default Bread button CSS, rather than simply augmenting it. We recommend copying one of the custom CSS examples found in Style the Bread Button as a starting point and modifying it from there.

When you’re ready to try your custom CSS:

  1. Navigate to your Shopify Admin and select Apps from the menu on the left.
  2. Scroll through Installed apps and click Bread.
  3. Scroll down to Custom CSS for Product and Cart Buttons and Custom CSS for Cart Button under Settings and enter your CSS.
  4. Click Save in the upper right corner to save your changes.

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.

While most of the settings are self-explanatory, one setting worth noting is that we recommend disabling Use Bread Illustrations.

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

 

Customize the Bread Order Confirmation Page

When orders are completed with the Bread payment gateway, the customer is shown your standard order confirmation page from Shopify.

However, when orders are completed with the Bread app – that is, directly from product detail pages or shopping cart pages – the customer is redirected to a custom order confirmation page which is rendered by a .liquid template served through the Bread app.

While this page is clear and structured by default, you may also customize this page in your store’s CSS to more closely match the look and feel of your store’s experience.

You may add style definitions for all classes prefixed by bread-success.

  1. From your Shopify admin, access your shop’s theme template by clicking Online Store > Themes > Edit Code (in dropdown). Your store’s CSS file will be accessible from the presented list.
  2. The position and styling of the following CSS classes can be defined in your shop’s theme templates (normally theme.liquid):
    • bread-success-container
    • bread-success-header
    • bread-success-order-info-container
    • bread-success-table
    • bread-success-table-row
    • bread-success-address-container
    • bread-success-sub-header
    • bread-success-paragraph
    • bread-success-itemization-container

Default confirmation page:

image08

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 drive an increase in overall conversions using Bread, you must market your financing offer early in the customer’s shopping journey!

 

Customize Bread on the Checkout Page (Shopify Plus Only)

By default, the Bread payment option on the Shopify checkout page includes the title “Pay over time” along with the Bread logo. Due to Shopify’s control over the checkout experience, we’re not able to provide out-of-the-box white labeling options here.

However, merchants using Shopify Plus can work around this limitation by including custom JavaScript in the checkout.liquid template. By leveraging JavaScript, you can replace the Bread logo with your own image.

Example Logo Swap

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('img[alt="Bread"]').setAttribute('src', 'enter image URL here');
  });
</script>

This snippet should be included in your checkout.liquid template. Make sure to modify the example with your custom logo URL.