3D & AR Product Viewer for commercetools

Install guide

Installing Thridify on a commercetools storefront

commercetools is headless: it has no storefront templates for a snippet to go into. Thridify is added to your own frontend, whatever it is built with, and talks to commercetools only through your code.

1. 01Load the script on the client

   The Thridify viewer is a browser component, so load it after hydration. In Next.js, for example, use next/script with the afterInteractive strategy on the product page.

   import Script from "next/script";
   
   <Script id="thridify-data" strategy="afterInteractive">
     {`window.thridifyData = Object.assign({ accountId: "YOUR_THRIDIFY_ACCOUNT_ID" }, window.thridifyData || {});`}
   </Script>
   <Script src="https://viewer.thridify.com/floating-icon.js" strategy="afterInteractive" />

2. 02Pass the product key and the selected SKU

   Use a stable identifier as the Thridify product reference. The product key works well because it does not change between environments. Expose the current variant’s SKU through window.thridifyCommerce, and Thridify uses the binding published for that SKU.

   <div data-thridify-page-product-id={product.key} />
   
   window.thridifyCommerce = {
     getVariantContext: () => ({ sku: selectedVariant.sku }),
     onConfigurationChange: (change) => syncVariantPicker(change),
     addToCart: async (req) => addLineItem(selectedVariant.sku, req),
   };

3. 03Add configured items to the cart

   When addToCart is defined, the viewer offers its own Add to cart button. Your handler adds the line item with your own price and can keep the shopper’s configuration on it.