Skip to main content

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

  • Go to /app/lib/context.ts directory in your Hydrogen project
  • import createFastSimonClient from @fast-simon/storefront-kit
  • Invoke createFastSimonClient and return it as following:
export async function createAppLoadContext(
  request: Request,
  env: Env,
  executionContext: ExecutionContext
) {
  // ... Existing context creation code here...

  // Create the Fast Simon API Client
  const fastSimon = createFastSimonClient({cache, waitUntil, request, uuid: '{{fast_simon_uuid}}', storeID: '{{fast_simon_store_id}}'});

  return {
    ...hydrogenContext,
    fastSimon,
  };
}
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