Styling Bread

📘

The below guidance is for merchants on Bread's Classic platform.
For merchants on Bread's 2.0. platform, please refer to our 2.0. documentation HERE.

Bread’s white-labeling functionality allows you to style your Bread offering to mimic your site’s overall branding strategy. There are two key ways that we recommend quickly and easily taking advantage of this capability:

Customizing the Bread Modal

In your Bread merchant portal, navigate to Checkout Settings to begin customizing the Bread pop-up modal. You have the ability to adjust the colors, fonts, and text within the modal. You also have the option to add your logo into the top left-hand corner.

Customizing the Bread Button on Your Site

In your Bread merchant portal, navigate to Button Settings to configure the appearance of how the Bread button looks on your website. Here, you can customize the style of your buttons and apply it directly to your integration without writing any CSS!

You’ll see 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 realtime. Please see the reference below for details on each option.

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.

Enabling Button Settings
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.

📘

NOTE

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.

👍

PRO TIP

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!