codeFor Hydrogen + Next.js + Remix developers

The only Shopify loyalty app with a full headless widget SDK

Every other loyalty app gives you a raw API and says "build your own UI." Anchor ships the complete widget, pre-built, for any JavaScript framework. Three lines of code. Same experience as theme-based stores.

descriptionRead the SDK docsInstall on Shopify

The headless loyalty problem

You moved to Hydrogen or Next.js for speed, flexibility, and control. Then your loyalty app told you "we support headless" — by which they meant an API and a "good luck" note.

cancel

What competitors offer

  • • Raw GraphQL/REST API
  • • No pre-built UI components
  • • "Here are our API docs, build your own widget"
  • • Custom tier progress bar? Build it.
  • • Referral share modal? Build it.
  • • Checkout integration? Good luck.
  • • 2-4 weeks of frontend engineering
  • • Ongoing maintenance every Shopify update
check_circle

What Anchor offers

  • • Complete pre-built widget
  • • Works on Hydrogen, Next.js, Remix, Gatsby, Vue, Svelte
  • • Points, tiers, referrals, redemption — all UI handled
  • • Same experience as theme-based Shopify stores
  • • 14 KB initial load, lazy-loaded
  • • 32+ languages built in
  • • HMAC-signed tokens for security
  • • 10 minutes from install to live

Three lines. One widget. Any framework.

This is the entire integration for Next.js. Hydrogen, Remix, and Gatsby are similar.

app/components/LoyaltyWidget.tsxNext.js
'use client'
import Script from 'next/script'

export function LoyaltyWidget({ customerId, customerToken }) {
  return (
    <Script
      src={`https://anchorloyalty.app/api/sdk.js?key=${process.env.NEXT_PUBLIC_ANCHOR_KEY}`}
      strategy="lazyOnload"
      onReady={() => {
        window.AnchorLoyaltySDK?.init({
          apiKey: process.env.NEXT_PUBLIC_ANCHOR_KEY,
          customerId,
          customerToken, // HMAC-signed for secure redemptions
        })
      }}
    />
  )
}

Full SDK docs with Hydrogen, Remix, Gatsby examplesarrow_forward

Built for performance-obsessed teams

14 KB
Initial JS load

46× lighter than Yotpo (650 KB). No render blocking.

0 ms
LCP impact

Lazy-loaded on user interaction. Zero Core Web Vitals hit.

32+
Languages, auto-detected

Professional translations, full RTL support for Arabic and Hebrew.

Headless loyalty FAQ

Does Anchor work with Shopify Hydrogen?expand_more

Yes. Anchor's SDK works natively in Hydrogen, Next.js, Remix, Gatsby, Vue, Svelte, and any JavaScript framework. The same pre-built widget that runs on theme-based Shopify stores renders on your headless frontend.

Do I need to build my own UI?expand_more

No — that's the whole point. Other apps give you an API and require 2-4 weeks of custom UI engineering. Anchor gives you the complete widget: launcher, panel, points display, rewards list, tier progress, referral modal, checkout integration. Three lines of code and it's live.

How is authentication handled for headless redemptions?expand_more

Your backend generates an HMAC-signed customer token: HMAC-SHA256(customerId.timestamp, signingSecret). The widget sends it with every authenticated request. This prevents IDOR attacks where a logged-in user could redeem another customer's points. Details in the SDK docs.

Which plan includes the Headless SDK?expand_more

The Headless SDK is available on the Pro plan at $39.99/mo. For context, enterprise competitors charge $199-699/mo for comparable headless support.

Ready to ship loyalty on your headless store?

Install from the Shopify App Store, upgrade to Pro, drop the SDK in. You'll have loyalty live in under 10 minutes.

Install on ShopifyRead the full SDK docs