Shopify Plus Features

Additional Features

Embedded Checkout (Shopify Plus Only)

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.

Note: Access to the checkout.liquid file in your Shopify store may require submitting a request to your Shopify Plus representative.

To install embedded checkout:

Enable the feature in the Bread Pay App Settings.
a. Log into your Shopify Admin Portal
b. Navigate to Settings > Payments
c. Locate Bread Pay in your Payment Methods. Click Manage > Manage.
d. Check the Box to "Enable Shopify Plus embedded checkout". then click save in the top Right.
e. Take note of and copy your Shop ID that is displayed on this settings page.
Add Bread liquid template to your theme
a. Log into your Shopify admin and select Online Store
b. 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
c. Select Edit code on your new theme
d. Select the Snippets folder and Add a new snippet
e. Enter a name for the new snippet – for example “bread-checkout-options” – and select Create snippet
f. Open the newly created snippet file
g. Copy and paste the contents of bread-checkout-options.liquid
h. Click Save
Add Bread scripts to checkout.liquid
a. While still in your development theme, open the Layout folder and select checkout.liquid
b. Within checkout.liquid, add the following line inside the head tag:
{% include 'bread-checkout-options' %}
c. If you used a different file name for your snippet in Step 2, replace “bread-checkout-options” with the name of your snippet
d. Directly under the previous step, add the following:

<script src="https://callback.pp-prod-ads.ue2.breadgateway.net/api/shopify-plugin-backend/payment-app/checkout/embedded/YOUR-SHOP-ID" type="application/javascript"></script>

Replace YOUR-SHOP-ID with the Shop ID found on the App Settings Page, described in step 1-e.

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 src="https://callback.pp-prod-ads.ue2.breadgateway.net/api/shopify-plugin-backend/payment-app/checkout/embedded/3e517f429-650c-4c54b-85ca-4c542ec76e421" type="application/javascript"></script>
</head>

Confirm the Embedded Checkout functionality
a. Preview your development theme
b. Add an item to cart and proceed to checkout
c. Enter a US shipping address, select a shipping method, and proceed to the final step of the Shopify checkout flow
d. Select the Bread “Pay over time” option and confirm the Bread checkout form displays properly

Note: 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 [email protected] for help.