Style the Bread Button

There are various button styling and checkout flow decisions that can be customized to fit your brand and customer flow. Using the customCSS property, you can override default Bread styling and CSS.

Button Structure

#bread-button[.bread-btn, .bread-label][.bread-logged-out, .bread-as-low-as, .bread-no-terms, .bread-show-terms]
 .bread-embed-inner
   .bread-center
     .bread-center-inner
       .bread-text[.bread-pot, .bread-as-low-as, .bread-for]
         [span.bread-amt
         span.bread-dur]
 .bread-embed-icon

Note: We do not recommend using the external generated DOM structure outside of the button iframe for styling or manipulating the button in your own CSS. This external structure is subject to change without notice.

Button States:

The main button element has an id attribute of #bread-button. The button can have the following states, represented by classes on the element:

  • If the button has the actAsLabel option set to false, it is assigned the bread-btn class. Otherwise, it is assigned the bread-label class
  • Depending on the current state of the user checking out, an additional class is added:
    • bread-logged-out if the user is not logged in
    • bread-as-low-as if the user is not logged in and the asLowAs option is set to true
    • bread-no-terms if the button cannot provide an exact monthly payment amount for the logged in user
    • bread-show-terms if the button can provide a monthly payment amount for the logged in user

Inside #bread-button, the .bread-text has an additional class state:

  • bread-pot is the default state, displaying “Pay Over Time” in the default CSS
  • bread-as-low-as if the user is not logged in and the asLowAs option is set to true
  • bread-for when the user is logged in and the button can provide a monthly payment amount

Best Practices

  • Use a service like CSS Compressor or CSS Minifier to compress your CSS into a single string.
  • Leave height and width out of your customCSS. Those dimensions should be handled by a containing element and normal CSS.
  • Use @import to include custom fonts.
  • Use the content property on pseudo elements (:before and :after) to add your own custom words and phrases to the button.
  • Ensure the selectors and properties you leverage are available to the browsers your site supports. You may need to use browser pre-fixed properties to get the best support.
  • Consider the responsiveness of your site: Does that need to translate to your button styling?

Custom CSS Examples

The following is a good starting point for styling the button with customCSS, creating a basic gray button with hover:

Example Button

Example CSS (Button):

/* Include custom fonts with @import */
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");
html, body, #bread-button {
  height: 100%;
  margin: 0;
  width: 100%;
}
body {
  display: table;
}
#bread-button {
  /* Base button styles */
  background: #197797;
  color: #FFF;
  border-radius: 6px;
  display: table-cell;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  text-align: center;
  vertical-align: middle;
  /* Modify or remove transition here */
  transition: all 0.3s ease;
}
.bread-btn {
  cursor: pointer;
}
#bread-button.bread-btn:hover {
  /* Button hover state */
  background: #209cc5;
}
.bread-embed-inner, .bread-label .bread-embed-icon {
  display: inline-block;
}
.bread-label .bread-embed-icon:after {
  /* Icon that shows the bread tooltip on hover */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  color: #333;
  content: "i";
  cursor: pointer;
  display: inline-block;
  line-height: 1;
  margin-left: 8px;
  padding: 4px 9px;
}
.bread-pot:before {
  /* Content for the default state. */
  content: "Pay Over Time";
}
.bread-btn .bread-as-low-as:before,
.bread-label .bread-as-low-as:before {
  /* Prefix for buttons with asLowAs set to true */
  content: "As low as ";
}
.bread-for:before {
  /* Prefix for logged in users */
  content: "For ";
}

Example CSS (Button) in Compressed Form

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);#bread-button,body,html{height:100%;margin:0;width:100%}body{display:table}#bread-button{background:#197797;color:#FFF;border-radius:6px;display:table-cell;font-family:Roboto,sans-serif;font-size:16px;text-align:center;vertical-align:middle;transition:all .3s ease}.bread-btn{cursor:pointer}#bread-button.bread-btn:hover{background:#209cc5}.bread-embed-inner,.bread-label .bread-embed-icon{display:inline-block}.bread-label .bread-embed-icon:after{background:rgba(255,255,255,.5);border-radius:50px;color:#333;content:"i";cursor:pointer;display:inline-block;line-height:1;margin-left:8px;padding:4px 9px}.bread-pot:before{content:"Pay Over Time"}.bread-btn .bread-as-low-as:before,.bread-label .bread-as-low-as:before{content:"As low as "}.bread-for:before{content:"For "}

Example Link

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600');
#bread-button,body,html {
    height:100%;
    margin:0;
    width:100%;
}
body {
    display:table;
}
#bread-button {
    background:#EEE;
    color:#181818;
    display:table-cell;
    font-family:"Open Sans",sans-serif;
    font-size:16px;
    text-align:center;
    vertical-align:middle;
}
.bread-text {
    cursor:pointer;
    text-decoration:underline;
    transition: all 0.2s ease;
}
.bread-text:hover {
    color:#197797;
}
.bread-dur {
    text-transform:lowercase;
    word-spacing:-3px;
    margin-left:-3px
}
.bread-embed-inner,.bread-label .bread-embed-icon {
    display:inline-block;
}
.bread-btn .bread-as-low-as:before,.bread-label .bread-as-low-as:before {
    content:"As low as ";
}
.bread-btn .bread-for:before {
    content:"For ";
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);#bread-button,body,html{height:100%;margin:0;width:100%}body{display:table}#bread-button{background:#EEE;color:#181818;display:table-cell;font-family:"Open Sans",sans-serif;font-size:16px;text-align:center;vertical-align:middle}.bread-text{cursor:pointer;text-decoration:underline;transition:all .2s ease}.bread-text:hover{color:#197797}.bread-dur{text-transform:lowercase;word-spacing:-3px;margin-left:-3px}.bread-embed-inner,.bread-label .bread-embed-icon{display:inline-block}.bread-btn .bread-as-low-as:before,.bread-label .bread-as-low-as:before{content:"As low as "}.bread-btn .bread-for:before{content:"For "}

Button Settings

Alternatively, we offer a tool for configuring the appearance of your Bread button directly in the merchant portal called Button Settings. With Button Settings, you can customize the style of your buttons and apply it directly to your integration without writing any CSS!

Using Button Settings

To get started, log into merchants-sandbox.getbread.com (or merchants.getbread.com for the live merchant portal) and find “Button Settings” in the navigation menu on the left. If this is your first time, you will be asked to create a new button configuration.

Under Button Settings you will find several options for customizing the appearance and behavior of your Bread button. As you make changes to your configuration you should see the button preview and generated custom CSS update in real time. Please see the reference below for details on each option.

Once you are happy with your button, you have two options for applying your button styles:

Option 1: The first and easiest option is to turn on “Enable Button Configuration” and hit save. This will tell Bread to use these styles for all of your currently integrated Bread Checkout buttons! Note that choosing this option will not override Bread buttons that already have customCSS applied.

Option 2: Copy and paste the generated custom CSS code and manually apply it within your plugin settings or through your custom integration.

Turning on Enable Button Configuration will tell Bread to use your Button Settings styles for all of your Bread checkout buttons with two exceptions: these styles will not affect Bread Apply buttons or Bread Checkout buttons that already have defined customCSS.

Once you have deployed your Button Setting styles you may notice that additional changes aren’t reflected immediately in your live buttons. This is a side effect of how Bread caches assets. Try opening your button in an incognito window or clear your site cookies to see the new changes right away!

Button Settings Reference

  • Default Button Text: Switch between “Default”, “As low as”, and “Logged in” states to configure the button text for each button state.
  • Enable Button Configuration: Select this option to deploy your button style to all of your live Bread Checkout buttons.
  • Background Color: Set the main color of the button.
  • Hover Background Color: Set the main color of the button when hovered.
  • Border Color: Set the color of the button outline. Note this only applies if the Border Width is greater than 0px.
  • Border Radius (in px): Set the roundness of the corners of the button. 0px will give the button a square look. A higher border radius will round out the corners.
  • Border Width: Set the width of the button outline. Note you will only be able to see the outline if your Border Color is different than your Background Color.
  • Add Custom Font: Set an import URL for your custom font. See Google Fonts for free font options.
  • Font Family: Set the font used for the button text. You can supply comma separated fallback options (i.e. Helvetica, Arial, sans-serif).
  • Font Color: Set the color of the button text.
  • Font Size: Set the font size of the button text.
  • Font Weight: Set the font weight of the button text. 100-300: Light. 400-500: Normal. 600+: Bold.