Shopify Quickstart

Your integration steps

This flow: a Shopify test store, an unpublished copy of its theme, Managed Checkout, and Bolt Payments sandbox.

Before you begin

Have these ready before the estimated integration time begins. Account provisioning, app approval and distribution setup are separate; the estimate has not been measured in a live walkthrough.

Platform support

This guide is for Shopify. Supporting guides for this platform: Managed Checkout theme installation for Buy Now buttons, dynamic carts, analytics and production, and the connection reference for app credentials and checkout links. Other platforms and custom web apps have their own quickstarts.

1. Create app

1. In your Shopify admin, open Apps > Develop apps > Build apps in Dev Dashboard.
2. Select Create app, name it Bolt sandbox, and select Create.
3. Open Versions > Access. Grant the Admin API scopes that Bolt's Connect Shopify form requires: write_orders, read_orders, write_draft_orders, read_draft_orders, read_discounts, and read_products. Grant unauthenticated Storefront API access to product listings and their subsections. Keep access limited to the scopes required by this integration.
4. Select Release. On the app's Home tab, select Install app, choose your test store, and confirm Install.
5. Open the app's Settings and copy its Client ID and Client Secret. Keep the secret private; it belongs in Bolt's connection form, never your theme.
6. Install or open Shopify Headless and create the Storefront API configuration. Record the Storefront API token in your approved secure location, and confirm its token type before sharing it with your Bolt implementation contact.

Validate app

Confirm the app is installed on the intended test store with the required access, and the Storefront API token is stored securely. If Shopify requires approval or distribution changes before installation, finish that setup before continuing. The connection reference covers Partner distribution.

2. Connect store

1. Open Bolt sandbox Integrations and select Shopify.
2. Enter your test store URL and the app's Client ID and Client Secret.
3. Select Connect Shopify and wait for the product catalog to import.
4. Open sandbox Payments. Select Bolt Payments and configure Immediate Capture for the test product's currency.
5. Open Business Information. Save your test store's support email and phone number under Support Contact Information.
6. Open Checkout settings, add your store logo, and publish the change.
7. Open Administration > API and copy the Publishable Key. Only the publishable key belongs in your theme.

Validate connection

The catalog count increases and your test product appears. Confirm the store URL and product variant match your test store. Reopen Payments and confirm Immediate Capture is saved for the test currency. If the catalog stays empty, check the app installation and access scopes before editing your theme.

3. Install scripts

1. In your Shopify admin, go to Online Store > Themes. Duplicate the published theme and name the copy Bolt Managed Checkout Staging. Do all work in this step and the next on the copy.
2. On the copy, open the three dots menu and select Edit code. Back up layout/theme.liquid and your cart snippet before editing them.
3. Open layout/theme.liquid and paste these three scripts before the closing </head> tag, in this order:

<script
  defer="defer"
  id="bolt-connect"
  type="text/javascript"
  src="https://connect-sandbox.boltapp.com/connect.js"
  data-publishable-key="PUBLISHABLE_KEY">
</script>

<script
  defer="defer"
  id="managed-checkout"
  type="text/javascript"
  data-dynamic-elements-selector="DYNAMIC_ELEMENT_SELECTOR"
  src="https://c-sandbox.boltapp.com/shopify/managed-checkout.js?v={{ 'now' | date: '%s' }}">
</script>

<script
  defer="defer"
  type="text/javascript"
  src="{{ 'bolt-connect-shopify.js' | asset_url }}">
</script>

4. Replace PUBLISHABLE_KEY with the sandbox publishable key from step 2. Replace DYNAMIC_ELEMENT_SELECTOR with a stable parent element that stays on the page when your cart re-renders, such as #shopify-section-cart-drawer in Shopify's Dawn theme. Configure dynamic cart behavior explains how to choose it for other themes.
5. Under Assets, select Add a new asset, create bolt-connect-shopify.js, and paste the generic Shopify Managed Checkout script from Bolt.
6. In the configuration block near the top of the asset, set DYNAMIC_ELEMENTS_SELECTOR to the same selector, set each analytics destination your store does not use to false, and leave debug set to false.

Validate scripts

Preview the duplicate theme and open your browser's developer tools. Confirm connect.js, managed-checkout.js, and bolt-connect-shopify.js each load once, and the console shows no Content Security Policy or JavaScript errors.

4. Add button

1. In the code editor, open the cart drawer, cart footer, or cart page snippet your theme uses.
2. Remove or comment out the native Shopify checkout control, including the element with id CartDrawer-Checkout when present.
3. Insert the Bolt checkout button in the same location, replacing PUBLISHABLE_KEY with your sandbox publishable key:

<div data-tid="instant-bolt-checkout-button" class="px-4">
  <object
    aria-label="Bolt checkout button"
    data="https://connect-sandbox.boltapp.com/v1/checkout_button?publishable_key=PUBLISHABLE_KEY">
  </object>
</div>

4. Save the snippet.

Validate button

Preview the duplicate theme and add your test product to the cart. One Bolt checkout button appears where the native button was, and no second native checkout button remains. Change the quantity and confirm the button survives the cart update. Selecting it opens Bolt checkout with the correct product, variant, quantity, price and currency.

5. Verify order

1. From the preview, open Bolt checkout and enter your test shopper details and supported shipping address.
2. Compare shipping, tax and final total with the test store's settings.
3. Use the Bolt Payments approved test card: 4111 1111 1111 1111, expiration 03/30, CVV 737. Submit one payment and save its confirmation details.
4. Open sandbox Transactions and find the completed payment. Record its order number, amount and currency.
5. Open Orders in Shopify. Find the matching order and compare shopper, product, variant, quantity and total.

Validate purchase

You are done when the Bolt payment and one matching Shopify order agree, and the storefront cart is cleared once. A browser confirmation alone is not proof. If the payment exists but the store order is missing, investigate that transaction before attempting another purchase.

Test before sharing

Run the Shopify test plan. It tests this cart flow; product page Buy Now buttons, analytics and production lifecycle operations have separate launch checks.

Keep the duplicate theme unpublished. Before publishing it, complete the rest of theme installation, including Test your website and Move to production, and complete production readiness. Test results here do not establish live fulfillment or refund readiness.