Loop On-Store SDK + Shopify Hydrogen

Overview

Hydrogen is Shopify’s new React based framework for building truly custom storefronts on top of Shopify’s back end.

While most of Loop’s interaction with your Shopify store comes through the back end, merchants using Loop’s Shop Now: On-Store feature will need to connect their front end to Loop to make sure the customer experience is seamless.

To that end, Loop has updated our standard SDK to make it as easy as possible to connect the Loop return flow to your front end experience. In this article we’ll cover:

  • Installation
  • Importing components
  • Setup
  • FAQs

Loop’s standard On Store SDK has been updated to be easier to use with Hydrogen. It is compatible with Hydrogen as well as React.

Note: The classic On Store SDK is still the preferred method of integrating On Store into storefronts built with Shopify’s theme builder. The steps below are intended for merchants with custom themes built using Hydrogen or React.

Installation

If your storefront is built with Hydrogen or React, the best way to consume the On Store SDK is by installing it via the npm package which you can install with npm:

npm install @loopreturns/package-onstore-hydrogen

Importing Components

The On Store SDK npm package consists of two components that you will need to import into your app:

import { LoopOnstore, OnstoreCheckoutBtn } from '@loopreturns/package-onstore-hydrogen';

Setup

Start using On Store by adding the LoopOnstore component to your app and passing your api key as a prop.

To generate the API key that you’ll pass to the LoopOnstore component, go to Loop Admin > Settings > Developers. This key should be scoped to Cart only. Checking the other boxes could expose returns data.

function MyApp(props) {
return (
<div>
<LoopOnstore key={props.loopCartApiKey} />
</div>
);
}

Finally, add the OnstoreCheckoutBtn component to your app:

function MyCart() {
return (
<div>
...
<OnstoreCheckoutBtn />
</div>
);
}

FAQs

Do I need this if I used Shopify's Theme Builder? No. These instructions are specific to merchants with fully custom themes built using Hydrogen.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.