Visual Similarity

Integrate Fast Simon's Visual Similarity feature to display similar products based on visual attributes.

---

Step 1: Fetch Visual Similarity Products

1. Locate the File:

   • Identify the file where you want to display the Visual Similarity Widget.

2. Update the Root Loader:

   • Use the getVisualSimilarityProducts function in your root loader.
   • Pass the product ID as a prop.
   • Choose to:
     • Await the promise to resolve (may impact performance), or
     • Pass it down as a stream for better performance.

export async function loader(args: LoaderFunctionArgs) {
 // Start fetching non-critical data without blocking time to first byte
 const deferredData = loadDeferredData(args);

 // Await the critical data required to render initial state of the page
 const criticalData = await loadCriticalData(args);

 const visualSimilarityProducts = await args.context.fastSimon.getVisualSimilarityProducts({
                                         props: {
                                           productId: criticalData.product.id,
                                         },
                                         cacheStrategy: CacheLong(),
                                       });

 return defer({...deferredData, ...criticalData, visualSimilarityProducts});
}

Step 2: Use Fast Simon Components

After fetching the data, display it using components from @fast-simon/storefront-kit.

import { FastSimonWidget , transformToShopifyStructure } from '@fast-simon/storefront-kit';

function ProductPage() {

  const {product, visualSimilarityProducts} = useLoaderData<typeof loader>();
  const fastStructureProducts = transformToShopifyStructure(visualSimilarityProducts);

  // ... other component logic

  return (
          <div>

            {/* ... other parts of your product page */}

            <FastSimonWidget title={'Similar Products'}
                             products={fastStructureProducts}
                             RightArrowIcon={<MyRightArrowIcon/>}
                             imageAspectRatio={"2/3"}/>

          </div>
  );
}

Key Concepts

Critical vs. Non-Critical Data

• Critical Data: Includes essential information required for the initial render (e.g., product details).
• Non-Critical Data: Includes additional elements like visual similarity results, fetched asynchronously to optimize TTFB.

Component Customization

• Use the FastSimonWidget to display similar products in a visually appealing format.
• Customize components, such as icons and aspect ratios, to match your theme's design.

Additional Notes

• The transformToShopifyStructure function ensures compatibility with Shopify's data format. You can skip this if you're using custom components.
• Use a caching strategy (CacheLong) for optimal performance when fetching similarity results