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. Once you find the 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, style this element #bread-checkout-btn directly. For all other Button styling properties, including font, color, background-color, border, hover transitions, and more, please use 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 Lowest Available APR? (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>