Shopify Plus Features

Avalara AvaTax Service (Important)

If your Shopify Plus store uses Avalara’s AvaTax service to handle tax calculations and you wish to enable checkout directly from product and cart page Bread buttons, you will need to enable Use Shopify draft orders to calculate tax within the Bread app. Without this setting enabled, Bread will fail to produce tax calculations that are in line with the AvaTax service.

Find the Bread app settings from within your Shopify Admin, under Apps Bread.

Alternatively, if you don’t want to let Bread use Shopify draft orders to calculate tax, you can disable checkout from product and cart page Bread buttons to sidestep this issue.

Embedded Checkout on Shopify Plus

Shopify Plus offers expanded capabilities for merchants including the ability to customize the look and feel of the checkout experience through a new checkout.liquid template. For Shopify Plus accounts, Bread offers an embedded checkout option.

Install Embedded Checkout

The Bread gateway is required for embedded checkout. Please install and configure the Bread gateway before proceeding with embedded checkout.

Step 1: Check gateway account settings

  1. Log into your gateway account at https://shopify.getbread.com
  2. Uncheck the box next to Enable Production Mode for Shopify Plus Embedded Checkout
  3. Check the box next to Enable Shopify Plus Embedded Checkout
  4. Click Submit to save your account settings

Step 2: Add Bread liquid template to your Shopify theme

  1. Log into your Shopify admin and select Online Store
  2. Under Themes, make a copy of your live theme and rename it to something descriptive — this theme is where you will perform the integration work
  3. Select Edit code on your new theme
  4. Select the Snippets folder and Add a new snippet
  5. Enter a name for the new snippet – for example “bread-checkout-options” – and select Create snippet
  6. Open the newly created snippet file
  7. Copy and paste the contents of bread-checkout-options.liquid
  8. Click Save

Step 3: Add Bread scripts to checkout.liquid template

  1. While still in your development theme, open the Layout folder and select checkout.liquid
  2. Within checkout.liquid, add the following line inside the <head> tag:
    {% include 'bread-checkout-options' %}
  3. If you used a different file name for your snippet in Step 2, replace “bread-checkout-options” with the name of your snippet
  4. Directly under the previous step, add the following <script> tag:
    <script src="https://shopify.getbread.com/static/your-gateway-key/checkout.js" type="application/javascript"></script>
  5. Replace your-gateway-key with the Gateway key found in your Bread Shopify portal
  6. Your checkout.liquid template should now look similar to this:
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">
        <meta name="referrer" content="origin">
    
        <title>{{ page_title }}</title>
    
        {{ content_for_header }}
    
        {{ checkout_stylesheets }}
        {{ 'checkout.scss.css' | asset_url | stylesheet_tag }}
        {{ checkout_scripts }}
        {% include 'bread-checkout-options' %}
        <script type="text/javascript" src="https://shopify.getbread.com/static/5293135a-6db8-4422-af4a-7052c016c15b/checkout.js"></script>
    </head>
  7. Click Save in the upper right corner to save your changes

Step 4: Confirm the Embedded Checkout functionality

  1. Preview your development theme
  2. Add an item to cart and proceed to checkout
  3. Enter a US shipping address, select a shipping method, and proceed to the final step of the Shopify checkout flow
  4. Select the Bread “Pay over time” option and confirm the Bread checkout form displays properly

Troubleshooting

Due to the fact that the Bread checkout form has a “Checkout” submission button, we have to hide the Shopify “Place order” button when Bread is selected in order to avoid customer confusion. If customers select a non-Bread payment option, we programmatically show the Shopify “Place order” button again. With certain customizations made to `checkout.liquid`, it’s possible that our script won’t pick up the Shopify place order button correctly. If you notice Bread is not properly showing/hiding the Shopify Place order button, then you can define a custom query selector in `{% include ‘bread-checkout-options’ %}`. If you need help with this step, please reach out to your Success point of contact or integrations@breadfinance.com for help.

White-Label Bread “Pay over time” Logo

By default, the Bread payment option on the Shopify checkout page includes the title “Pay over time” along with the Bread logo.

Shopify Plus merchants can work around this limitation by including custom JavaScript in the checkout.liquid template. By leveraging JavaScript, you can replace the Bread logo with your own image.

Example Logo Swap

<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('img[alt="Bread"]').setAttribute('src', 'enter image URL here');
  });
</script>

This snippet should be included in your checkout.liquid template. Make sure to modify the example with your custom logo URL.