Getting Started

Welcome to the Fast Simon integration guide! Follow these steps to set up and use Fast Simon in your Hydrogen app.

---

Requirements

Before you begin, ensure you have the following:

• Node.js: Version 16.14.0 or higher to support Hydrogen's runtime.
• Shopify Store: A live or development store to integrate Fast Simon.
• Hydrogen App: A Shopify Hydrogen storefront for your custom headless solution.
• Fast Simon App: Installed and configured on your Shopify store.

Enable Fast Simon Features:

1. Go to Fast Simon Dashboard > Upsell & Cross-sell > Advanced Configuration.
2. Turn on the Look-a-like Visually Similar Recommendations switch.
3. Ensure the following features are enabled:
   • Collections
   • Search Results Page
   • Autocomplete

---

Installation

Set up the required Fast Simon packages in your Hydrogen project:

Install Fast Simon Packages:

Run the following commands in your project directory:

npm install @fast-simon/storefront-kit
npm install @fast-simon/utilities@1.0.7

Local development

npm install

npm run dev

Fast Simon Context API

The following simple example shows how to add Fast Simon API to the Remix context, and simply query your data from any route.

1. Go to /app/lib/context.ts directory in your Hydrogen project.
2. import {createFastSimonClient, FastSimonSession} from '@fast-simon/storefront-kit'
3. Invoke createFastSimonClient and return it.
4. Init FastSimonSession and return it.

Full example:

import {createFastSimonClient, FastSimonSession} from '@fast-simon/storefront-kit';
export async function createAppLoadContext(
  request: Request,
  env: Env,
  executionContext: ExecutionContext
) {
    
  // ... Existing context creation code here...
   
  // Initialize Fast Simon Session
  const [cache, session, fastSimonSession] = await Promise.all([
     caches.open('hydrogen'),
     AppSession.init(request, [env.SESSION_SECRET]),
     FastSimonSession.init(request, [env.SESSION_SECRET])
  ]);

  // Create the Fast Simon API Client
  const fastSimon = createFastSimonClient({
     cache, waitUntil,
     request,
     uuid: '{{fast_simon_uuid}}',
     storeID: '{{fast_simon_store_id}}',
     fastSimonSession,
     searchPersonalization: true, //pass true if you want to enable search personalization
     collectionPersonalization: true, //pass true if you want to enable collection personalization
     marketContext: locale.country // optional — pass Shopify Markets country code to filter results by market
  });

  return {
    ...hydrogenContext,
    fastSimon,
    fastSimonSession
  };
}

note

replace fast_simon_uuid and fast_simon_store_id with your own UUID and StoreId. It can be found at the dashboard->settings.

• Use the Fast Simon API: You can now query the Fast Simon API from any loader function in your Hydrogen app. This uses the same caching utilities as Shopify's Storefront API, ensuring efficient data fetching