On-Store SDK

🚧

This article references the older, manual version of On-Store. Setup for the newer, embedded On-Store feature is more direct and is viewable in Loop's embedded On-Store Help Center article.

The easiest way to integrate with the cart API is to use our On-Store SDK. Follow the steps below:

  1. Create a development theme on your Shopify store. You can do this by duplicating your live theme. We recommend re-naming it to something like "Current theme + Loop On-Store Integration".

  2. Click the actions dropdown on your new theme and select "Edit code". This will load up Shopify's theme editor. Once that's open, find the file under the layout section named theme.liquid and open it.

  3. Scroll to the bottom of the page and find the /body tag. Paste the following snippet directly above the /body tag.

<script src="https://unpkg.com/@loophq/onstore-sdk@latest/dist/loop-onstore-sdk.js"></script>
<script>
  LoopOnstore.init({
    key: 'api key',
    attach: 'checkout button selector'
  });
</script>

  1. Paste your API key as the key value in the init call.

  2. Find a unique selector for your checkout button and paste that as the attach value in the init call. You can find this by right clicking on your checkout button and selecting inspect element. Common selectors are #checkout, .checkout, .cart__checkout, and .cart__submit.

  3. Test that you've integrated successfully by running LoopOnstore.testMode() in your browser console. You should see the page refresh with on-store enabled and the messages Loop returns activated and Loop attaching to: <your checkout button> print out in console.

  4. Do a full test starting in Loop Returns and have it send you to your store, and then send you back to Loop Returns when you click the checkout button.