Add Bread to Product Pages

Bread buttons can be included on product detail pages to display a monthly payment option and allow customers to pre-qualify for financing.

Add Bread to Product Template

To create Bread buttons on each product detail page, you must first add a Bread HTML element to your product page template. Get started by finding your theme under Storefront > My Themes from the left-hand menu. Under your “Current Theme”, select Edit HTML/CSS.

Note: You should download a backup copy of your current theme before modifying.

The product HTML template likely consists of several smaller snippets/templates. Find the panel or snippet responsible for the add-to-cart button on product pages. Typically, this will either be a file named product-view.html or add-to-cart.html. Once you find the correct add-to-cart template, place this Bread HTML element where you want the button to display:

<div id="bread-checkout-btn"></div>

For height, width, and responsive properties, you may choose to style this bread-checkout-btn div element directly in your theme file. For example, you may choose to tweak the sizing of the container that holds the Bread button:

<div id="bread-checkout-btn" style="width:355px;height:50px"></div>

For all other Button styling properties, including font, color, background-color, border, hover transitions, and more, please use the Button Configuration from within the Bread App settings.

Add Bread to Product Template (Stencil)

There are additional steps for merchants using themes based on Stencil. Here are specific instructions for integrating Bread on Stencil theme product pages.

Add Bread button HTML element

  1. Open templates/components/products/product-view.html in your theme editor
  2. Place the element <div id="bread-checkout-btn"></div> in this template under the add-to-cart template — it should look similar to this:
    {{#if product.can_purchase}}
        {{> components/products/add-to-cart}}
        <div id="bread-checkout-btn"></div>
    {{/if}}

Add HTML attributes to help Bread identify product details

  1. Open templates/components/products/product-view.html
  2. Search for the element <div class="productView-options"> — it should contain the add to cart <form>
  3. Add a class name "page-product" to that <div> so it looks similar to this:
    <div class="productView-options page-product">
        {{#if product.release_date }}
            <p>{{product.release_date}}</p>
        {{/if}}
        <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
            data-cart-item-add>

Enable within Bread App

Once the element has been added to your product page template, navigate back to the Bread App settings and find the Product Details Page section. Make sure Display Bread Button? is enabled. You should now see additional options:

Display as Label Only? (Not Recommended)

Enable this option to display Bread button as a label after customers have pre-qualified for financing.

Display Monthly Price? (Recommended)

Enable this option to display “As low as” monthly price on the Bread button.

Button Identifier

Copy the id attribute of the Bread element inserted on your product page template. For example, if you added this element to your product pages your Button Identifier is “bread-checkout-btn”:

<div id="bread-checkout-btn"></div>

Style Your Bread Buttons

Once you have verified that Bread buttons are loading on your product pages, you can adjust the size and styling of these buttons via the Button Configuration settings in the Bread App. Please refer to our Style the Bread Button and Button Settings documentation on creating Custom CSS that will allow you to customize the look and feel of your Bread buttons.