Shopify Integration Guide

Integrating ZTLayer into your Shopify ecosystem depends on your architecture. You can protect either a Custom Shopify App (Node.js/Remix) or a Headless Storefront (Next.js/Hydrogen).

1. Custom Shopify Apps (Node.js / Remix)

If you are building a custom Shopify App that exposes API endpoints to the merchant's store (via App Proxies), these endpoints are highly susceptible to scraping and abuse.

Install the Node SDK in your app backend:

npm install @ztlayer/node

Express-based Shopify Apps

import express from 'express';
import { ZTLayer } from '@ztlayer/node';
 
const app = express();
const security = new ZTLayer({ apiKey: process.env.ZTLAYER_API_KEY });
 
// Protect your App Proxy endpoints
app.use('/api/proxy', security.expressMiddleware(), (req, res) => {
    // Process the Shopify request safely
});

Shopify Remix Apps

If you used the official Shopify CLI to generate a Remix app, you should protect your action and loader functions for sensitive routes.

// app/routes/api.checkout.jsx
import { ZTLayer } from '@ztlayer/node';
import { json } from "@remix-run/node";
 
const security = new ZTLayer({ apiKey: process.env.ZTLAYER_API_KEY });
 
export async function action({ request }) {
    // Manually inspect the web Request object
    const verdict = await security.inspectHTTP(request);
    
    if (verdict.action === 'block') {
        return json({ error: "Blocked by ZTLayer" }, { status: 403 });
    }
    
    // Process checkout...
}

2. Headless Shopify Storefronts (Hydrogen / Next.js)

If you are building a Headless storefront, your site is just a standard React/Next.js application.

1. Follow the Next.js Integration Guide to protect your Edge routes and API endpoints.
2. Follow the React Integration Guide to inject the ZTProvider into your checkout flow. This ensures that bots attempting card testing or inventory hoarding are blocked using behavioral biometrics before they can reach the Shopify Checkout API.