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<br>
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.