📍 Bolt Help / Platforms / Shopify / Shopify - Checkout / Set Up Bolt for Shopify Set Up Bolt for Shopify Learn how to integrate Bolt for Shopify. Page Contents Click to expand. Bolt Merchant Dashboard Configuration Alternative Payment Method Configuration Log in at Bolt Merchant Dashboard and navigate to Settings -> Payments -> Link Account Set up the relevant APMs that you will be using in the Bolt checkout modal Insert the respective API keys from your processor Google Analytics / Facebook Pixel Configuration Go to Settings -> Checkout -> Scroll down to “Checkout Analytics and Tracking” Add your GA Tracking ID and Facebook Pixel ID if used Bolt Theme Configurations Log in to the Bolt Merchant Dashboard. Navigate to Administration > API. Copy the following: Publishable Key The publishable key is a long string of lower and upper case letters and numbers that consists of three sections. WARNING Important: Make sure to use your Publishable Key—not your API Secret Key—when configuring your storefront. The key you enter here will be publicly visible, and exposing your API Secret Key can compromise the security of your account. Log in to Shopify Admin, navigate to Online Store -> Themes Select Edit Code by opening context menu for Current Theme Install custom Bolt Assets by clicking Add a new asset under appropriate directory NOTE: Please select either JS or CSS when creating assets. Add Scripts & Styles Bolt relies on a few scripts to deliver its checkout. Make Sure the Scripts and Buttons are added to every page where the cart is displayed in your storefront. This requires a few theme updates. These updates happen to the following files Bolt Icon Edit Code > snippets > bolt-icon.liquid → Bolt Script Edit Code > snippets > bolt-button.js → Bolt Styles Edit Code > snippets > bolt-button.css → Add JS and CSS to main theme.liquid file within <head> tag so that our styles and scripts are included in the store Code Snippet <!--Get your PUBLISHABLE_KEY from the Bolt Merchant Dashboard.--> <link rel="stylesheet" href="{{ 'bolt-button.css' | asset_url }}"> <script src="{{ 'bolt-button.js' | asset_url }}" data-publishable-key="{PUBLISHABLE_KEY}" data-checkout-link-host="love.c.bolt.com" defer="defer"> </script> Add Bolt Buttons Add Bolt Checkout button to Cart drawer, and Cart page. We need to find an appropriate theme file to edit. Typically, these updates happen to the following files NOTE: Look forclass="cart__ctas" in both files for a good place to place the snippets. Bolt Button Code Snippets Edit Code > snippets > cart-drawer.liquid → Edit Code > snippets > main-cart-footer.liquid → Product Page Checkout Button The Product Page Checkout Button needs to be added in the visual theme editor. Go to Themes and click Customize Theme Button Change the template being edited to Product Page Click on the Dropdown for the templates and Select Products Now Select Default Product Add a Custom Liquid under Buy Buttons Add the following code snippet for the Custom Liquid block on right hand side. <div class="product-form__input"> <button data-bolt-buy-mode="pdp" class="bolt-buy-button button button--full-width button--large"> {% render 'bolt-icon' %} <span>Bolt Checkout</span> </button> </div> Test your website Ensure the Bolt button is visible on all cart pages Ensure Bolt modal works properly and orders are created and flowing correctly Place a Test order by Completing the Checkout Check Back office Order Statuses
