Add Bread to Cart Summary Page

Add Bread to Cart Template

To add a Bread button to the cart summary page, you must first include a Bread HTML element in your cart 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 cart HTML template consists of several smaller snippets/templates. Find the panel or snippet where it makes sense to include the Bread element, for instance, CartContent.html. Once you find the right 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.

Note: ALL products are REQUIRED to have product images and SKUs for the Bread button to load successfully on your cart page.

Add Bread to Cart Template (Stencil)

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

Add the Bread button HTML element

  1. Open templates/pages/cart.html in your theme editor
  2. Place the element <div id="bread-checkout-btn"></div> in this template where it makes sense — typically near the checkout button

Add 2 additional HTML attributes that help the Bread identify cart item names, prices, and SKUs

  1. Open templates/components/cart/content.html in your theme editor
  2. On or near line 83, add a class name "cart-item-price" to <span class="cart-item-value">
  3. Your span element should now have at least two classes: <span class="cart-item-value cart-item-price" ...>
  4. On or near line 102, add a data attribute "data-quantity-control-input" to <input class="form-input form-input--incrementTotal">
  5. This <input> element has several other data attributes, but it should now look similar to this:
    <input class="form-input form-input--incrementTotal"
        data-quantity-min-error="{{lang 'products.quantity_min' quantity=min_purchase_quantity}}"
        data-quantity-max-error="{{lang 'products.quantity_max' quantity=max_purchase_quantity}}"

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 Cart Page section. Make sure Display Bread Button? is enabled. You should now see additional options:

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 cart page template. For example, if you added this element to your cart template,

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

your Button Identifier should be “bread-checkout-btn”.

Custom CSS

Use this field to specify css to apply on the Bread button located on your Cart page ONLY. Refer to our Style the Bread Button documentation for best practices on Custom CSS.