Setup Pack A/B Testing in your existing Shopify Hydrogen project

Pack's A/B Testing is currently in opt-in beta, with potential fluctuations in APIs and features ahead. While A/B testing is accessible across all plans during beta, keep in mind that this could evolve. Your feedback and insights are invaluable to us as we navigate this phase.

Install the Pack A/B Testing Beta dependencies

@pack/client@1.0.1-ab-test.0

npm

npm install @pack/client@1.0.1-ab-test.0

@pack/hydrogen@1.0.1-ab-test.0

npm

npm install @pack/hydrogen@1.0.1-ab-test.0

1. Add `PACK_STOREFRONT_ID` to `.env`

PACK_STOREFRONT_ID is now a new required environment variable.

Make sure to add this into your Hydrogen storefront environment variables too. You can do this by going to Shopify > Hydrogen > Your Storefront > Storefront settings > Environment and variables > Add variables

For those using typescript, make sure to update your remix.env.d.ts to include PACK_STOREFRONT_ID as part of your Env interface.

interface Env {
  ...
  PACK_STOREFRONT_ID: string;
  ...
}

2. Update `server.ts` imports from `@pack/hydrogen`

// server.ts
import { createPackClient, PackSession, handleRequest } from '@pack/hydrogen'

Import PackSession which replaces PreviewSession
Import new handleRequest function

3. Update session storage

// server.ts
// packSession was previously previewSession
const [cache, session, packSession] = await Promise.all([
  caches.open('hydrogen'),
  AppSession.init(request, [env.SESSION_SECRET]),
  PackSession.init(request, [env.SESSION_SECRET]),
])

Update previewSession to packSession
Update PreviewSession.init() to PackSession.init()

4. Update `createPackClient` options

// server.ts
const pack = createPackClient({
  cache,
  waitUntil,
  storeId: env.PACK_STOREFRONT_ID,
  token: env.PACK_SECRET_TOKEN,
  session: packSession,
  contentEnvironment: env.PACK_CONTENT_ENVIRONMENT,
})

Add in storeId, from newly required environment variable
Pass in packSession as the session
No longer need preview in the create Pack client options

5. Use new Pack `handleRequest` function

// server.ts
/**
 * Create a Remix request handler and pass
 * Hydrogen's Storefront client to the loader context.
 */
const response = await handleRequest(
  pack,
  request,
  createRequestHandler({
    build: remixBuild,
    mode: process.env.NODE_ENV,
    getLoadContext: () => ({
      cache,
      waitUntil,
      session,
      storefront,
      cart,
      env,
      pack,
    }),
  }),
)

Pass in the pack client, request, and Shopify's createRequestHandler as arguments
Don't forget to add the pack client to the getLoadContext

6. Update root `loader` function

// root.tsx
export async function loader({context, request}: LoaderFunctionArgs) {
  const {storefront, session, pack} = context;
  ...
  return defer(
    {
      analytics,
      customer,
      customerAccessToken,
      ENV: {...ENV, SITE_LOGO, SITE_TITLE} as Record<string, string>,
      groupingsPromise,
      selectedLocale: storefront.i18n,
      seo,
      siteSettings,
      siteTitle: SITE_TITLE,
      url: request.url,
      ...pack.getPackSessionData(),
    },
    {headers},
  );
}

You can update your loader's return by using getPackSessionData() function off of the pack client from the context
Remove customizerMeta and isPreviewModeEnabled as they are now provided by getPackSessionData