Legacy Shopify Themes

When using a Legacy Shopify Theme or if it is your preference, you can add Bread buttons directly into your liquid files.

📘

Using a Shopify 2.0 Theme?

If you are using a 2.0 Theme, bread buttons can be added via a customizable theme block. Instructions found here.

If you prefer to add the bread buttons directly into your liquid even with a 2.0 theme, you must enable this option through the Bread Pay Messaging App settings. Select the option to "Add Bread Scripts on 2.0 Themes".

Add Bread In Theme Files

Placing the Bread button on product and cart pages requires making changes to your liquid templates in Shopify. To get started, open your Shopify Admin and click Online Store, choose your theme, and then select Edit code from the Action drop down menu.

Identifying the liquid files in which to add Bread will be completely dependent on how your Shopify store theme is organized. Each theme is different which means the right liquid file could be found anywhere including within Templates, Sections, or Snippets.

Bread Button on Product Details

1. To find the right liquid template to add Bread to your product page, start by looking for the product template containing an “Add to Cart” button. Start with product.liquid and work backwards by looking into the included sections and snippets. Keep looking in sub-files until you find the “Add to Cart” button.

Note: that this is general guidance. If your Shopify theme follows a non-standard pattern, you may have to expand your search to other templates.

2. Once you have located the right product template, insert the following element under your “Add to Cart” button.

{% if product.available %}
<div id="bread-checkout-btn-product" style="width:250px; height:50px; margin:20px 0px;"></div>
{% endif %}

Note: We recommend including Shopify’s product available logic to hide the Bread button when the item is out of stock. Additionally, the height, width, and margin of #bread-checkout-btn-product will determine the size and spacing of the Bread button. Modify the example height, width, and margin to fit your product page layout.

3. Bread should now appear as a button on your Product page. The next section will provide an overview on further styling of the Bread button on your page.

Bread Button on Cart Page

1. To add the Bread button to the Cart page, locate the cart template containing a “Checkout” button.
   Note: Start with cart.liquid – if you can’t find the “Checkout” button there, then work backwards by inspecting the included sections and snippets.

2. Once you have found the right template, insert the following element under your “Checkout” button.

{% if cart.item_count > 0 %}
    <div id="bread-checkout-btn" style="height:50px; margin:20px 0px;"></div>
{% endif %}

Bread should now appear as a button on your Cart Page. The next section will provide an overview on further styling of the Bread button on your page

Note: For a better user experience, we recommend styling the above product and cart elements to appear as buttons. By configuring a fallback element, your customers will still see a complete and coherent page while the Bread button loads, or if it is unavailable.

// Bread button for product pages with fallback element
<div id="bread-checkout-btn-product" style="width:250px; height:50px; background-color:#000; color:#FFF; text-align:center; line-height:50px;">
  Pay Over Time
</div>

Note: Every Shopify theme handles browser width and device (desktop vs mobile) size differently. Open one of your product pages in a desktop browser and shrink/expand the browser horizontally. Similarly, try opening a product page on a mobile phone. Pay attention to how your “Add to Cart” buttons adapt to different widths and devices and make sure your Bread button responds similarly. You may have to use CSS media queries to ensure a consistent style between your Add to Cart and Bread buttons.