diff --git a/packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx b/packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx
index bb384d08964..7b337b8a9b3 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.tsx
@@ -217,12 +217,24 @@ export class AtomicCommerceProductList
     );
   }
 
+  private logWarningIfNeeded(message?: string) {
+    if (message) {
+      this.bindings.engine.logger.warn(message);
+    }
+  }
+
+  private getInteractiveProduct(product: Product) {
+    const parentController =
+      this.bindings.interfaceElement.type === 'product-listing'
+        ? this.productListing
+        : this.search;
+
+    return parentController.interactiveProduct({options: {product}});
+  }
+
   private getPropsForAtomicProduct(product: Product) {
     return {
-      // TODO: add back once interactive result is implemented for products in KIT-3149
-      /* interactiveResult: buildInteractiveResult(this.bindings.engine, {
-        options: {result},
-      }), */
+      interactiveProduct: this.getInteractiveProduct(product),
       product,
       renderingFunction: this.itemRenderingFunction,
       loadingFlag: this.loadingFlag,
@@ -243,6 +255,7 @@ export class AtomicCommerceProductList
   private renderAsGrid() {
     return this.productState.products.map((product, i) => {
       const propsForAtomicProduct = this.getPropsForAtomicProduct(product);
+      const {interactiveProduct} = propsForAtomicProduct;
       return (
         <DisplayGrid
           item={{
@@ -250,23 +263,24 @@ export class AtomicCommerceProductList
             clickUri: product.clickUri,
             title: product.ec_name ?? 'temp',
           }}
-          // TODO KIT-3149: add back once the interactive result is implemented
-          //{...propsForAtomicProduct.interactiveResult}
-          // TODO KIT-3149: Remove these back once the interactive result is implemented
+          {...propsForAtomicProduct.interactiveProduct}
           setRef={(element) =>
             element && this.productListCommon.setNewResultRef(element, i)
           }
-          select={function (): void {
-            throw new Error('Function not implemented. TODO KIT-3149');
+          select={() => {
+            this.logWarningIfNeeded(interactiveProduct.warningMessage);
+            interactiveProduct.select();
           }}
-          beginDelayedSelect={function (): void {
-            throw new Error('Function not implemented. TODO KIT-3149');
+          beginDelayedSelect={() => {
+            this.logWarningIfNeeded(interactiveProduct.warningMessage);
+            interactiveProduct.beginDelayedSelect();
           }}
-          cancelPendingSelect={function (): void {
-            throw new Error('Function not implemented. TODO KIT-3149');
+          cancelPendingSelect={() => {
+            this.logWarningIfNeeded(interactiveProduct.warningMessage);
+            interactiveProduct.cancelPendingSelect();
           }}
         >
-          <atomic-product {...this} {...propsForAtomicProduct}></atomic-product>
+          <atomic-product {...propsForAtomicProduct}></atomic-product>
         </DisplayGrid>
       );
     });
@@ -328,7 +342,6 @@ export class AtomicCommerceProductList
       const propsForAtomicProduct = this.getPropsForAtomicProduct(product);
       return (
         <atomic-product
-          {...this}
           {...propsForAtomicProduct}
           ref={(element) =>
             element && this.productListCommon.setNewResultRef(element, i)
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx
index 2d759fb2e86..7a7f0e9cfe8 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-interface/atomic-commerce-recommendation-interface.tsx
@@ -126,12 +126,6 @@ export class AtomicCommerceRecommendationInterface
       this,
       'CoveoAtomic'
     );
-
-    if (!this.commonInterfaceHelper.engineIsCreated()) {
-      return;
-    }
-
-    this.contextController = buildContext(this.bindings.engine);
   }
 
   public connectedCallback() {
@@ -233,6 +227,10 @@ export class AtomicCommerceRecommendationInterface
     };
   }
 
+  private initContext() {
+    this.contextController = buildContext(this.bindings.engine);
+  }
+
   private initAriaLive() {
     if (
       Array.from(this.host.children).some(
@@ -246,6 +244,7 @@ export class AtomicCommerceRecommendationInterface
 
   private async internalInitialization(initEngine: () => void) {
     await this.commonInterfaceHelper.onInitialization(initEngine);
+    this.initContext();
   }
 
   private addResourceBundle(
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
index 53d086d578f..a66c8c58f75 100644
--- a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
+++ b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.tsx
@@ -302,29 +302,27 @@ export class AtomicCommerceRecommendationList
     );
   }
 
-  private getAtomicProductProps(recommendation: Product) {
+  private logWarningIfNeeded(message?: string) {
+    if (message) {
+      this.bindings.engine.logger.warn(message);
+    }
+  }
+
+  private getAtomicProductProps(product: Product) {
     return {
       interactiveProduct: this.recommendations.interactiveProduct({
-        options: {
-          product: {
-            ...recommendation,
-            name: recommendation.ec_name ?? '',
-            price: this.getPrice(recommendation),
-            productId: recommendation.permanentid,
-          },
-          position: this.currentIndex,
-        },
+        options: {product},
       }),
-      product: recommendation,
+      product: product,
       renderingFunction: this.itemRenderingFunction,
       loadingFlag: this.loadingFlag,
       key: this.itemListCommon.getResultId(
-        recommendation.permanentid,
+        product.permanentid,
         this.recommendationsState.responseId,
         this.density,
         this.imageSize
       ),
-      content: this.productTemplateProvider.getTemplateContent(recommendation),
+      content: this.productTemplateProvider.getTemplateContent(product),
       store: this.bindings.store,
       density: this.density,
       display: this.display,
@@ -332,20 +330,6 @@ export class AtomicCommerceRecommendationList
     };
   }
 
-  private getPrice(recommendation: Product) {
-    if (recommendation.ec_price === undefined) {
-      return 0;
-    }
-
-    if (recommendation.ec_promo_price === undefined) {
-      return recommendation.ec_price;
-    }
-
-    return recommendation.ec_promo_price > recommendation.ec_price
-      ? recommendation.ec_promo_price
-      : recommendation.ec_price;
-  }
-
   private computeListDisplayClasses() {
     const displayPlaceholders = !this.bindings.store.isAppLoaded();
 
@@ -359,7 +343,8 @@ export class AtomicCommerceRecommendationList
   }
 
   private renderAsGrid(product: Product, i: number) {
-    const atomicProductProps = this.getAtomicProductProps(product);
+    const propsForAtomicProduct = this.getAtomicProductProps(product);
+    const {interactiveProduct} = propsForAtomicProduct;
     return (
       <DisplayGrid
         item={{
@@ -367,12 +352,23 @@ export class AtomicCommerceRecommendationList
           clickUri: product.clickUri,
           title: product.ec_name ?? '',
         }}
-        {...atomicProductProps.interactiveProduct}
+        select={() => {
+          this.logWarningIfNeeded(interactiveProduct.warningMessage);
+          interactiveProduct.select();
+        }}
+        beginDelayedSelect={() => {
+          this.logWarningIfNeeded(interactiveProduct.warningMessage);
+          interactiveProduct.beginDelayedSelect();
+        }}
+        cancelPendingSelect={() => {
+          this.logWarningIfNeeded(interactiveProduct.warningMessage);
+          interactiveProduct.cancelPendingSelect();
+        }}
         setRef={(element) =>
           element && this.itemListCommon.setNewResultRef(element, i)
         }
       >
-        <atomic-product {...atomicProductProps}></atomic-product>
+        <atomic-product {...propsForAtomicProduct}></atomic-product>
       </DisplayGrid>
     );
   }
diff --git a/packages/atomic/src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.tsx b/packages/atomic/src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.tsx
index 8940b8d719d..2bbd1525066 100644
--- a/packages/atomic/src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.tsx
+++ b/packages/atomic/src/components/commerce/product-template-components/atomic-product-link/atomic-product-link.tsx
@@ -56,6 +56,12 @@ export class AtomicProductLink
   private linkAttributes?: Attr[];
   private stopPropagation?: boolean;
 
+  private logWarningIfNeed(warning?: string) {
+    if (warning) {
+      this.bindings.engine.logger.warn(warning);
+    }
+  }
+
   public initialize() {
     this.host.dispatchEvent(
       buildCustomEvent(
@@ -78,16 +84,27 @@ export class AtomicProductLink
       ? this.product.clickUri
       : 'test';
 
+    if (!this.interactiveProduct) {
+      return;
+    }
+
+    const {warningMessage} = this.interactiveProduct;
+
     return (
       <LinkWithItemAnalytics
         href={href}
-        onSelect={() => this.interactiveProduct.select()}
-        onBeginDelayedSelect={() =>
-          this.interactiveProduct.beginDelayedSelect()
-        }
-        onCancelPendingSelect={() =>
-          this.interactiveProduct.cancelPendingSelect()
-        }
+        onSelect={() => {
+          this.logWarningIfNeed(warningMessage);
+          this.interactiveProduct.select();
+        }}
+        onBeginDelayedSelect={() => {
+          this.logWarningIfNeed(warningMessage);
+          this.interactiveProduct.beginDelayedSelect();
+        }}
+        onCancelPendingSelect={() => {
+          this.logWarningIfNeed(warningMessage);
+          this.interactiveProduct.cancelPendingSelect();
+        }}
         attributes={this.linkAttributes}
         stopPropagation={this.stopPropagation}
       >
diff --git a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx
index a9f274347ea..00f03a731fd 100644
--- a/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx
+++ b/packages/atomic/src/components/commerce/search-box-suggestions/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.tsx
@@ -3,8 +3,6 @@ import {
   buildInstantProducts,
   Product,
   InstantProducts,
-  InteractiveProduct,
-  CommerceEngine,
 } from '@coveo/headless/commerce';
 import {Component, Element, State, h, Prop, Method} from '@stencil/core';
 import {InitializableComponent} from '../../../../utils/initialization-utils';
@@ -34,14 +32,6 @@ export type AriaLabelGenerator = (
   product: Product
 ) => string | undefined;
 
-// TODO: KIT-3165 Uncomment once the `buildInteractiveInstantProduct` function is implemented in headless.
-function buildInteractiveInstantProduct(
-  _engine: CommerceEngine<{}>,
-  _arg: {options: {product: Product}}
-): InteractiveProduct {
-  return {} as InteractiveProduct;
-}
-
 /**
  * The `atomic-commerce-search-box-instant-products` component can be added as a child of an `atomic-search-box` component, allowing for the configuration of instant results behavior.
  *
@@ -141,6 +131,9 @@ export class AtomicCommerceSearchBoxInstantProducts
 
     const elements: SearchBoxSuggestionElement[] = products.map(
       (product: Product) => {
+        const interactiveProduct = this.instantProducts.interactiveProduct({
+          options: {product},
+        });
         const partialItem = getPartialInstantItemElement(
           this.bindings.i18n,
           this.ariaLabelGenerator?.(this.bindings, product) || product.ec_name!,
@@ -153,12 +146,7 @@ export class AtomicCommerceSearchBoxInstantProducts
               key={`instant-product-${encodeForDomAttribute(product.permanentid)}`}
               part="outline"
               product={product}
-              interactiveProduct={buildInteractiveInstantProduct(
-                this.bindings.engine,
-                {
-                  options: {product},
-                }
-              )}
+              interactiveProduct={interactiveProduct}
               display={this.display}
               density={this.density}
               imageSize={this.imageSize}
diff --git a/packages/atomic/src/pages/examples/commerce-website/cart.html b/packages/atomic/src/pages/examples/commerce-website/cart.html
index 63c1ac23be5..ebde5777aab 100644
--- a/packages/atomic/src/pages/examples/commerce-website/cart.html
+++ b/packages/atomic/src/pages/examples/commerce-website/cart.html
@@ -12,9 +12,12 @@
       import {commerceEngine} from './engine.mjs';
 
       (async () => {
-        await customElements.whenDefined('atomic-commerce-interface');
-        const commerceInterface = document.querySelector('atomic-commerce-recommendation-interface');
-        await commerceInterface.initializeWithEngine(commerceEngine);
+        await customElements.whenDefined('atomic-commerce-recommendation-interface');
+        const recommendationInterfaces = document.querySelectorAll('atomic-commerce-recommendation-interface');
+
+        for (const recommendationInterface of recommendationInterfaces) {
+          await recommendationInterface.initializeWithEngine(commerceEngine);
+        }
       })();
     </script>
     <style>
diff --git a/packages/atomic/src/pages/examples/commerce-website/homepage.html b/packages/atomic/src/pages/examples/commerce-website/homepage.html
index 4ebdfd38055..da3b4b59130 100644
--- a/packages/atomic/src/pages/examples/commerce-website/homepage.html
+++ b/packages/atomic/src/pages/examples/commerce-website/homepage.html
@@ -12,10 +12,12 @@
       import {commerceEngine} from './engine.mjs';
 
       (async () => {
-        await customElements.whenDefined('atomic-commerce-interface');
-        const commerceInterface = document.querySelector('atomic-commerce-recommendation-interface');
+        await customElements.whenDefined('atomic-commerce-recommendation-interface');
+        const recommendationInterfaces = document.querySelectorAll('atomic-commerce-recommendation-interface');
 
-        await commerceInterface.initializeWithEngine(commerceEngine);
+        for (const recommendationInterface of recommendationInterfaces) {
+          await recommendationInterface.initializeWithEngine(commerceEngine);
+        }
       })();
     </script>
     <style>
diff --git a/packages/headless/src/api/commerce/common/product.ts b/packages/headless/src/api/commerce/common/product.ts
index 11249108361..62993200872 100644
--- a/packages/headless/src/api/commerce/common/product.ts
+++ b/packages/headless/src/api/commerce/common/product.ts
@@ -1,7 +1,10 @@
-export type ChildProduct = Omit<Product, 'children' | 'totalNumberOfChildren'>;
+export type ChildProduct = Omit<
+  BaseProduct,
+  'children' | 'totalNumberOfChildren'
+>;
 
 // TODO: KIT-3164 update based on https://coveord.atlassian.net/browse/DOC-14667
-export interface Product {
+export interface BaseProduct {
   /**
    * The SKU of the product.
    */
@@ -105,3 +108,12 @@ export interface Product {
    */
   totalNumberOfChildren: number;
 }
+
+export interface Product extends BaseProduct {
+  /**
+   * The 1-based product's position across the non-paginated result set.
+   *
+   * E.g., if the product is the third one on the second page, and there are 10 products per page, its position is 13 (not 3).
+   */
+  position: number;
+}
diff --git a/packages/headless/src/api/commerce/common/response.ts b/packages/headless/src/api/commerce/common/response.ts
index 9d24717df0a..4d478d0c4af 100644
--- a/packages/headless/src/api/commerce/common/response.ts
+++ b/packages/headless/src/api/commerce/common/response.ts
@@ -5,12 +5,12 @@ import {
   SearchAPIErrorWithStatusCode,
 } from '../../search/search-api-error-response';
 import {Pagination} from './pagination';
-import {Product} from './product';
+import {BaseProduct} from './product';
 import {Sort} from './sort';
 
 export interface BaseCommerceSuccessResponse {
   responseId: string;
-  products: Product[];
+  products: BaseProduct[];
   pagination: Pagination;
   triggers: Trigger[];
 }
diff --git a/packages/headless/src/commerce.index.ts b/packages/headless/src/commerce.index.ts
index e3c911fcce7..3f8699cfe8f 100644
--- a/packages/headless/src/commerce.index.ts
+++ b/packages/headless/src/commerce.index.ts
@@ -25,7 +25,11 @@ export type {
 export type {LogLevel, LoggerOptions} from './app/logger';
 export type {NavigatorContext} from './app/navigatorContextProvider';
 
-export type {Product, ChildProduct} from './api/commerce/common/product';
+export type {
+  BaseProduct,
+  Product,
+  ChildProduct,
+} from './api/commerce/common/product';
 export type {PlatformEnvironment} from './utils/url-utils';
 
 // Actions
diff --git a/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.test.ts b/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.test.ts
index 75272b6770b..ab0d90eac19 100644
--- a/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.test.ts
+++ b/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.test.ts
@@ -5,24 +5,30 @@ import {
   buildMockCommerceEngine,
   MockedCommerceEngine,
 } from '../../../../test/mock-engine-v2';
-import {buildCoreInteractiveProduct} from './headless-core-interactive-product';
+import {buildMockProduct} from '../../../../test/mock-product';
+import {
+  buildCoreInteractiveProduct,
+  InteractiveProduct,
+} from './headless-core-interactive-product';
 
 jest.mock('../../../../features/commerce/context/product/product-actions');
 
 describe('core interactive result', () => {
   let engine: MockedCommerceEngine;
 
-  const product = {
-    productId: '1',
-    name: 'clicked on product',
-    price: 17.99,
-  };
+  const product = buildMockProduct({
+    ec_name: 'product 1',
+    ec_price: 17.99,
+    ec_promo_price: 15.99,
+    ec_product_id: 'product1-id',
+    permanentid: 'product-1-permanentid',
+    position: 1,
+  });
 
   function initializeInteractiveResult() {
     buildCoreInteractiveProduct(engine, {
       options: {
         product,
-        position: 1,
       },
       responseIdSelector: () => 'responseId',
     });
@@ -37,21 +43,153 @@ describe('core interactive result', () => {
     expect(engine.addReducers).toHaveBeenCalledWith({configuration});
   });
 
-  it('#select dispatches productClick', () => {
+  describe('#select', () => {
+    it('when ec_name, ec_product_id, and ec_promo_price or ec_price are defined on the product, dispatches productClick with the correct payload', () => {
+      const controller = buildCoreInteractiveProduct(engine, {
+        options: {
+          product,
+        },
+        responseIdSelector: () => 'responseId',
+      });
+
+      controller.select();
+
+      expect(productClick).toHaveBeenCalledWith({
+        product: {
+          name: product.ec_name,
+          price: product.ec_promo_price,
+          productId: product.ec_product_id,
+        },
+        position: product.position,
+        responseId: 'responseId',
+      });
+    });
+
+    it('when ec_name is not defined on the product, falls back to the permanentid field to set the product name', () => {
+      const controller = buildCoreInteractiveProduct(engine, {
+        options: {
+          product: {
+            ...product,
+            ec_name: undefined,
+          },
+        },
+        responseIdSelector: () => 'responseId',
+      });
+
+      controller.select();
+
+      expect(productClick).toHaveBeenCalledWith({
+        product: {
+          name: product.permanentid,
+          price: product.ec_promo_price,
+          productId: product.ec_product_id,
+        },
+        position: product.position,
+        responseId: 'responseId',
+      });
+    });
+
+    it('when ec_product_id is not defined on the product, falls back to the permanentid field to set the product id', () => {
+      const controller = buildCoreInteractiveProduct(engine, {
+        options: {
+          product: {
+            ...product,
+            ec_product_id: undefined,
+          },
+        },
+        responseIdSelector: () => 'responseId',
+      });
+
+      controller.select();
+
+      expect(productClick).toHaveBeenCalledWith({
+        product: {
+          name: product.ec_name,
+          price: product.ec_promo_price,
+          productId: product.permanentid,
+        },
+        position: product.position,
+        responseId: 'responseId',
+      });
+    });
+
+    it('when ec_promo_price and ec_price are not defined on the product, falls back to NaN to set the product price', () => {
+      const controller = buildCoreInteractiveProduct(engine, {
+        options: {
+          product: {
+            ...product,
+            ec_promo_price: undefined,
+            ec_price: undefined,
+          },
+        },
+        responseIdSelector: () => 'responseId',
+      });
+
+      controller.select();
+
+      expect(productClick).toHaveBeenCalledWith({
+        product: {
+          name: product.ec_name,
+          price: NaN,
+          productId: product.ec_product_id,
+        },
+        position: product.position,
+        responseId: 'responseId',
+      });
+    });
+  });
+
+  it('when ec_name, ec_product_id, and ec_promo_price or ec_price are defined on the product, warningMessage is undefined', () => {
     const controller = buildCoreInteractiveProduct(engine, {
       options: {
         product,
-        position: 2,
       },
       responseIdSelector: () => 'responseId',
     });
 
-    controller.select();
+    expect((controller as InteractiveProduct).warningMessage).toBeUndefined();
+  });
 
-    expect(productClick).toHaveBeenCalledWith({
-      product,
-      position: 2,
-      responseId: 'responseId',
+  it('when ec_name is not defined on the product, warningMessage is defined', () => {
+    const controller = buildCoreInteractiveProduct(engine, {
+      options: {
+        product: {
+          ...product,
+          ec_name: undefined,
+        },
+      },
+      responseIdSelector: () => 'responseId',
+    });
+
+    expect((controller as InteractiveProduct).warningMessage).toBeDefined();
+  });
+
+  it('when ec_product_id is not defined on the product, warningMessage is defined', () => {
+    const controller = buildCoreInteractiveProduct(engine, {
+      options: {
+        product: {
+          ...product,
+          ec_product_id: undefined,
+        },
+      },
+      responseIdSelector: () => 'responseId',
+    });
+
+    expect((controller as InteractiveProduct).warningMessage).toBeDefined();
+  });
+
+  it('when ec_promo_price and ec_price are not defined on the product, warningMessage is defined', () => {
+    const controller = buildCoreInteractiveProduct(engine, {
+      options: {
+        product: {
+          ...product,
+          ec_promo_price: undefined,
+          ec_price: undefined,
+        },
+      },
+      responseIdSelector: () => 'responseId',
     });
+
+    expect((controller as InteractiveProduct).warningMessage).toBeDefined();
   });
 });
diff --git a/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.ts b/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.ts
index 90a16f2045a..cdd34e23d75 100644
--- a/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.ts
+++ b/packages/headless/src/controllers/commerce/core/product-list/headless-core-interactive-product.ts
@@ -1,4 +1,4 @@
-import {Product} from '@coveo/relay-event-types';
+import {Product} from '../../../../api/commerce/common/product';
 import {
   CommerceEngine,
   CommerceEngineState,
@@ -18,11 +18,6 @@ export interface InteractiveProductOptions
    * The product to log analytics for.
    */
   product: Product;
-
-  /**
-   * The 1-based product's position across the non-paginated result set.
-   */
-  position: number;
 }
 
 export interface InteractiveProductCoreProps
@@ -33,7 +28,7 @@ export interface InteractiveProductCoreProps
   options: InteractiveProductOptions;
 
   /**
-   * The selector to fetch the response id from the state.
+   * The selector to fetch the response ID from the state.
    */
   responseIdSelector: (state: CommerceEngineState) => string;
 }
@@ -44,9 +39,12 @@ export type InteractiveProductProps = Omit<
 >;
 
 /**
- * The `InteractiveProduct` controller provides an interface for handling long presses, multiple clicks, etc. to ensure analytics events are logged properly when a user selects a product.
+ * The `InteractiveProduct` controller provides an interface for handling long presses, multiple clicks, etc. to ensure
+ * analytics events are logged properly when a user selects a product.
  */
-export interface InteractiveProduct extends InteractiveResultCore {}
+export interface InteractiveProduct extends InteractiveResultCore {
+  warningMessage?: string;
+}
 
 /**
  * Creates an `InteractiveProduct` controller instance.
@@ -61,6 +59,42 @@ export function buildCoreInteractiveProduct(
 ): InteractiveProduct {
   let wasOpened = false;
 
+  const getWarningMessage = () => {
+    const messageSegment = (
+      property: string,
+      lookupFields: string[],
+      fallback: string
+    ) =>
+      `- Could not retrieve '${property}' analytics property from field${lookupFields.length > 1 ? 's' : ''} \
+'${lookupFields.join("', '")}'; fell back to ${fallback}.`;
+
+    const warnings = [];
+
+    const {ec_name, ec_promo_price, ec_price, ec_product_id} =
+      props.options.product;
+    if (!ec_name) {
+      warnings.push(messageSegment('name', ['ec_gender'], 'permanentid'));
+    }
+    if (!ec_promo_price && !ec_price) {
+      warnings.push(
+        messageSegment('price', ['ec_promo_price', 'ec_price'], 'NaN')
+      );
+    }
+    if (!ec_product_id) {
+      warnings.push(
+        messageSegment('productId', ['ec_product_id'], 'permanentid')
+      );
+    }
+
+    if (warnings.length === 0) {
+      return;
+    }
+
+    return `Some required analytics properties could not be retrieved from the expected fields for product with \
+permanentid '${props.options.product.permanentid}':\n\n${warnings.join('\n')}\n\nReview the configuration of the above \
+'ec_'-prefixed fields in your index, and make sure they contain the correct metadata.`;
+  };
+
   const logAnalyticsIfNeverOpened = () => {
     if (wasOpened) {
       return;
@@ -68,12 +102,25 @@ export function buildCoreInteractiveProduct(
     wasOpened = true;
     engine.dispatch(
       productClick({
-        product: props.options.product,
-        position: props.options.position,
+        product: {
+          name:
+            props.options.product.ec_name ?? props.options.product.permanentid,
+          price:
+            props.options.product.ec_promo_price ??
+            props.options.product.ec_price ??
+            NaN,
+          productId:
+            props.options.product.ec_product_id ??
+            props.options.product.permanentid,
+        },
+        position: props.options.product.position,
         responseId: props.responseIdSelector(engine[stateKey]),
       })
     );
   };
 
-  return buildInteractiveResultCore(engine, props, logAnalyticsIfNeverOpened);
+  return {
+    ...buildInteractiveResultCore(engine, props, logAnalyticsIfNeverOpened),
+    warningMessage: getWarningMessage(),
+  };
 }
diff --git a/packages/headless/src/controllers/commerce/core/sub-controller/headless-sub-controller.test.ts b/packages/headless/src/controllers/commerce/core/sub-controller/headless-sub-controller.test.ts
index fb8dd93ad33..529506466a3 100644
--- a/packages/headless/src/controllers/commerce/core/sub-controller/headless-sub-controller.test.ts
+++ b/packages/headless/src/controllers/commerce/core/sub-controller/headless-sub-controller.test.ts
@@ -6,6 +6,7 @@ import {
   MockedCommerceEngine,
   buildMockCommerceEngine,
 } from '../../../../test/mock-engine-v2';
+import {buildMockProduct} from '../../../../test/mock-product';
 import * as DidYouMean from '../../search/did-you-mean/headless-did-you-mean';
 import * as CoreBreadcrumbManager from '../breadcrumb-manager/headless-core-breadcrumb-manager';
 import * as CoreFacetGenerator from '../facets/generator/headless-commerce-facet-generator';
@@ -222,12 +223,13 @@ describe('sub-controllers', () => {
 
       const props = {
         options: {
-          product: {
-            productId: '1',
-            name: 'Product name',
-            price: 17.99,
-          },
-          position: 1,
+          product: buildMockProduct({
+            ec_product_id: '1',
+            ec_name: 'Product name',
+            ec_promo_price: 15.99,
+            ec_price: 17.99,
+            position: 1,
+          }),
         },
       };
 
diff --git a/packages/headless/src/controllers/commerce/instant-products/headless-instant-products.ts b/packages/headless/src/controllers/commerce/instant-products/headless-instant-products.ts
index a89172dab5d..05d6858ebf7 100644
--- a/packages/headless/src/controllers/commerce/instant-products/headless-instant-products.ts
+++ b/packages/headless/src/controllers/commerce/instant-products/headless-instant-products.ts
@@ -21,6 +21,11 @@ import {
   Controller,
   buildController,
 } from '../../controller/headless-controller';
+import {
+  InteractiveProduct,
+  InteractiveProductProps,
+  buildCoreInteractiveProduct,
+} from '../core/product-list/headless-core-interactive-product';
 
 export interface InstantProductsOptions {
   /**
@@ -80,6 +85,14 @@ export interface InstantProducts extends Controller {
     childPermanentId: string,
     parentPermanentId: string
   ): void;
+
+  /**
+   * Creates an `InteractiveProduct` sub-controller.
+   * @param props - The properties for the `InteractiveProduct` sub-controller.
+   * @returns An `InteractiveProduct` sub-controller.
+   */
+  interactiveProduct(props: InteractiveProductProps): InteractiveProduct;
+
   /**
    * The state of the `InstantProducts` controller.
    */
@@ -196,6 +209,14 @@ export function buildInstantProducts(
       );
     },
 
+    interactiveProduct(props: InteractiveProductProps) {
+      return buildCoreInteractiveProduct(engine, {
+        ...props,
+        responseIdSelector: () =>
+          getStateForSearchBox().cache[getQuery()].searchUid,
+      });
+    },
+
     get state() {
       const query = getQuery();
       const cached = getCached(query);
diff --git a/packages/headless/src/features/commerce/instant-products/instant-products-slice.test.ts b/packages/headless/src/features/commerce/instant-products/instant-products-slice.test.ts
index 33ce74af416..6cf0146b4cb 100644
--- a/packages/headless/src/features/commerce/instant-products/instant-products-slice.test.ts
+++ b/packages/headless/src/features/commerce/instant-products/instant-products-slice.test.ts
@@ -1,5 +1,9 @@
 import {SearchCommerceSuccessResponse} from '../../../api/commerce/search/response';
-import {buildMockProduct} from '../../../test/mock-product';
+import {
+  buildMockChildProduct,
+  buildMockProduct,
+  buildMockBaseProduct,
+} from '../../../test/mock-product';
 import {
   fetchInstantProducts,
   QuerySearchCommerceAPIThunkReturn,
@@ -41,7 +45,7 @@ const initialEmptyCache: () => InstantProductsCache = () => ({
 });
 
 describe('instant products slice', () => {
-  describe('registerInstantProducts', () => {
+  describe('on #registerInstantProducts', () => {
     it('registers one search box instant products cache', () => {
       const expectedState = getSearchBoxInstantProductsState(id1);
       expect(
@@ -73,7 +77,7 @@ describe('instant products slice', () => {
     });
   });
 
-  describe('updateQuery', () => {
+  describe('on #updateQuery', () => {
     it('updates query when payload is not an empty string', () => {
       const query = 'some_query';
       const initialState = getSearchBoxInstantProductsState(id1);
@@ -100,7 +104,7 @@ describe('instant products slice', () => {
     });
   });
 
-  describe('fetchInstantProducts', () => {
+  describe('on #fetchInstantProducts', () => {
     describe('when pending', () => {
       it('creates new cache when one does not exist', () => {
         const query = 'some_query';
@@ -198,7 +202,7 @@ describe('instant products slice', () => {
         const action = fetchInstantProducts.fulfilled(
           {
             response: {
-              products: [buildMockProduct()],
+              products: [buildMockBaseProduct()],
               pagination: {totalEntries: 123},
               responseId: 'someid',
             } as unknown as SearchCommerceSuccessResponse,
@@ -242,7 +246,7 @@ describe('instant products slice', () => {
         const action = fetchInstantProducts.fulfilled(
           {
             response: {
-              products: [buildMockProduct()],
+              products: [buildMockBaseProduct()],
               pagination: {totalEntries: 123},
               responseId: 'someid',
             } as unknown as SearchCommerceSuccessResponse,
@@ -278,6 +282,60 @@ describe('instant products slice', () => {
           expectedState
         );
       });
+
+      it('sets the #position of each product to its 1-based position in the unpaginated list', () => {
+        const query = 'some_query';
+        const action = fetchInstantProducts.fulfilled(
+          {
+            response: {
+              products: [
+                buildMockBaseProduct({ec_name: 'product1'}),
+                buildMockBaseProduct({ec_name: 'product2'}),
+              ],
+              pagination: {totalEntries: 22},
+              responseId: 'someid',
+            } as unknown as SearchCommerceSuccessResponse,
+          } as QuerySearchCommerceAPIThunkReturn,
+          'req_id',
+          {
+            id: id1,
+            q: query,
+            cacheTimeout: 10000,
+          }
+        );
+
+        const makeState = (some_query: InstantProductsCache) =>
+          getSearchBoxInstantProductsState(id1, query, {
+            some_query,
+            some_other_query: initialEmptyCache(),
+          });
+
+        const initialState = makeState(initialEmptyCache());
+
+        const expectedState = makeState({
+          isLoading: false,
+          error: null,
+          products: [
+            buildMockProduct({
+              ec_name: 'product1',
+              position: 1,
+            }),
+            buildMockProduct({
+              ec_name: 'product2',
+              position: 2,
+            }),
+          ],
+          expiresAt: Date.now() + 10000,
+          isActive: true,
+          searchUid: 'someid',
+          duration: 0,
+          totalCountFiltered: 22,
+        });
+
+        expect(instantProductsReducer(initialState, action)).toEqual(
+          expectedState
+        );
+      });
     });
   });
 
@@ -336,7 +394,7 @@ describe('instant products slice', () => {
     });
 
     it('when both parent and child exist in cache for query, promotes the child to parent', () => {
-      const childProduct = buildMockProduct({
+      const childProduct = buildMockChildProduct({
         permanentid: childPermanentId,
         additionalFields: {test: 'test'},
         clickUri: 'child-uri',
@@ -360,6 +418,7 @@ describe('instant products slice', () => {
         permanentid: 'parent-id',
         children: [childProduct],
         totalNumberOfChildren: 1,
+        position: 5,
       });
 
       state[id]!.cache[query].products = [parentProduct];
@@ -371,6 +430,7 @@ describe('instant products slice', () => {
           ...childProduct,
           children: parentProduct.children,
           totalNumberOfChildren: parentProduct.totalNumberOfChildren,
+          position: parentProduct.position,
         }),
       ]);
     });
diff --git a/packages/headless/src/features/commerce/instant-products/instant-products-slice.ts b/packages/headless/src/features/commerce/instant-products/instant-products-slice.ts
index 9103e0322fa..c850e35048e 100644
--- a/packages/headless/src/features/commerce/instant-products/instant-products-slice.ts
+++ b/packages/headless/src/features/commerce/instant-products/instant-products-slice.ts
@@ -1,5 +1,5 @@
 import {createReducer} from '@reduxjs/toolkit';
-import {Product} from '../../../api/commerce/common/product';
+import {Product, BaseProduct} from '../../../api/commerce/common/product';
 import {
   clearExpiredItems,
   fetchItemsFulfilled,
@@ -53,7 +53,9 @@ export const instantProductsReducer = createReducer(
           },
           state,
           {
-            products: products.map(prependProductInItsOwnChildrenIfNeeded),
+            products: products.map((product, index) =>
+              preprocessProduct(product, index + 1)
+            ),
           }
         );
       })
@@ -72,10 +74,11 @@ export const instantProductsReducer = createReducer(
         );
 
         if (currentParentIndex === -1) {
-          console.log('parent not found');
           return;
         }
 
+        const position = products[currentParentIndex].position;
+
         const {children, totalNumberOfChildren} = products[currentParentIndex];
 
         const childToPromote = children.find(
@@ -83,7 +86,6 @@ export const instantProductsReducer = createReducer(
         );
 
         if (childToPromote === undefined) {
-          console.log('child not found');
           return;
         }
 
@@ -91,6 +93,7 @@ export const instantProductsReducer = createReducer(
           ...childToPromote,
           children,
           totalNumberOfChildren,
+          position,
         };
 
         const newProducts = [...products];
@@ -101,12 +104,12 @@ export const instantProductsReducer = createReducer(
   }
 );
 
-function prependProductInItsOwnChildrenIfNeeded(product: Product) {
+function preprocessProduct(product: BaseProduct, position: number): Product {
   const isParentAlreadyInChildren = product.children.some(
     (child) => child.permanentid === product.permanentid
   );
   if (product.children.length === 0 || isParentAlreadyInChildren) {
-    return product;
+    return {...product, position};
   }
 
   const {children, totalNumberOfChildren, ...restOfProduct} = product;
@@ -114,5 +117,6 @@ function prependProductInItsOwnChildrenIfNeeded(product: Product) {
   return {
     ...product,
     children: [restOfProduct, ...children],
+    position,
   };
 }
diff --git a/packages/headless/src/features/commerce/product-listing/product-listing-slice.test.ts b/packages/headless/src/features/commerce/product-listing/product-listing-slice.test.ts
index 42d519032f6..41f4f5e4b73 100644
--- a/packages/headless/src/features/commerce/product-listing/product-listing-slice.test.ts
+++ b/packages/headless/src/features/commerce/product-listing/product-listing-slice.test.ts
@@ -1,5 +1,9 @@
 import {buildMockCommerceRegularFacetResponse} from '../../../test/mock-commerce-facet-response';
-import {buildMockProduct} from '../../../test/mock-product';
+import {
+  buildMockChildProduct,
+  buildMockProduct,
+  buildMockBaseProduct,
+} from '../../../test/mock-product';
 import {buildFetchProductListingV2Response} from '../../../test/mock-product-listing-v2';
 import {
   fetchMoreProducts,
@@ -12,7 +16,7 @@ import {
   ProductListingV2State,
 } from './product-listing-state';
 
-describe('product-listing-v2-slice', () => {
+describe('product-listing-slice', () => {
   let state: ProductListingV2State;
   beforeEach(() => {
     state = getProductListingV2InitialState();
@@ -23,113 +27,221 @@ describe('product-listing-v2-slice', () => {
     );
   });
 
-  it('when a #fetchProductListing.fulfilled is received, should set the state to the received payload', () => {
-    const result = buildMockProduct();
-    const facet = buildMockCommerceRegularFacetResponse();
-    const responseId = 'some-response-id';
-    const response = buildFetchProductListingV2Response({
-      products: [result],
-      facets: [facet],
-      responseId,
+  describe('on #fetchProductListing.fulfilled', () => {
+    it('updates the product listing state with the received payload', () => {
+      const result = buildMockBaseProduct({ec_name: 'product1'});
+      const facet = buildMockCommerceRegularFacetResponse();
+      const responseId = 'some-response-id';
+      const response = buildFetchProductListingV2Response({
+        products: [result],
+        facets: [facet],
+        responseId,
+      });
+
+      const action = fetchProductListing.fulfilled(response, '');
+      const finalState = productListingV2Reducer(state, action);
+
+      expect(finalState.products).toEqual(
+        response.response.products.map((p) =>
+          buildMockProduct({ec_name: p.ec_name})
+        )
+      );
+      expect(finalState.facets[0]).toEqual(facet);
+      expect(finalState.responseId).toEqual(responseId);
+      expect(finalState.isLoading).toBe(false);
     });
 
-    const action = fetchProductListing.fulfilled(response, '');
-    const finalState = productListingV2Reducer(state, action);
+    it('sets the #position of each product to its 1-based position in the unpaginated list', () => {
+      const response = buildFetchProductListingV2Response({
+        products: [
+          buildMockBaseProduct({ec_name: 'product1'}),
+          buildMockBaseProduct({ec_name: 'product2'}),
+        ],
+        pagination: {
+          page: 2,
+          perPage: 10,
+          totalEntries: 22,
+          totalPages: 3,
+        },
+      });
 
-    expect(finalState.products[0]).toEqual(result);
-    expect(finalState.facets[0]).toEqual(facet);
-    expect(finalState.responseId).toEqual(responseId);
-    expect(finalState.isLoading).toBe(false);
-  });
+      const action = fetchProductListing.fulfilled(response, '');
+      const finalState = productListingV2Reducer(state, action);
 
-  it('when a #fetchMoreProducts.fulfilled is received, should append the received payload to the state', () => {
-    state.products = [
-      buildMockProduct({ec_name: 'product1'}),
-      buildMockProduct({ec_name: 'product2'}),
-    ];
-    const result = buildMockProduct({ec_name: 'product3'});
-    const facet = buildMockCommerceRegularFacetResponse();
-    const responseId = 'some-response-id';
-    const response = buildFetchProductListingV2Response({
-      products: [result],
-      facets: [facet],
-      responseId,
-    });
-
-    const action = fetchMoreProducts.fulfilled(response, '');
-    const finalState = productListingV2Reducer(state, action);
-
-    expect(finalState.products.map((p) => p.ec_name)).toEqual([
-      'product1',
-      'product2',
-      'product3',
-    ]);
-    expect(finalState.facets).toEqual([facet]);
-    expect(finalState.responseId).toEqual(responseId);
-    expect(finalState.isLoading).toBe(false);
-  });
+      expect(finalState.products[0].position).toBe(21);
+      expect(finalState.products[1].position).toBe(22);
+    });
 
-  it('set the error on #fetchProductListing.rejected', () => {
-    const err = {
-      message: 'message',
-      statusCode: 500,
-      type: 'type',
-    };
-    const action = {
-      type: 'commerce/productListing/fetch/rejected',
-      payload: err,
-    };
-    const finalState = productListingV2Reducer(state, action);
-    expect(finalState.error).toEqual(err);
-    expect(finalState.isLoading).toBe(false);
-  });
+    it('set #error to null ', () => {
+      const err = {message: 'message', statusCode: 500, type: 'type'};
+      state.error = err;
 
-  it('set the error on #fetchMoreProducts.rejected', () => {
-    const err = {
-      message: 'message',
-      statusCode: 500,
-      type: 'type',
-    };
-    const action = {
-      type: 'commerce/productListing/fetchMoreProducts/rejected',
-      payload: err,
-    };
-    const finalState = productListingV2Reducer(state, action);
-    expect(finalState.error).toEqual(err);
-    expect(finalState.isLoading).toBe(false);
+      const response = buildFetchProductListingV2Response();
+
+      const action = fetchProductListing.fulfilled(response, '');
+      const finalState = productListingV2Reducer(state, action);
+      expect(finalState.error).toBeNull();
+    });
   });
 
-  it('set the error to null on #fetchProductListing.fulfilled', () => {
-    const err = {message: 'message', statusCode: 500, type: 'type'};
-    state.error = err;
+  describe('on #fetchMoreProducts.fulfilled', () => {
+    it('appends the received products to the product listing state', () => {
+      state.products = [
+        buildMockProduct({ec_name: 'product1'}),
+        buildMockProduct({ec_name: 'product2'}),
+      ];
+      const result = buildMockBaseProduct({ec_name: 'product3'});
+      const facet = buildMockCommerceRegularFacetResponse();
+      const responseId = 'some-response-id';
+      const response = buildFetchProductListingV2Response({
+        products: [result],
+        facets: [facet],
+        responseId,
+      });
 
-    const response = buildFetchProductListingV2Response();
+      const action = fetchMoreProducts.fulfilled(response, '');
+      const finalState = productListingV2Reducer(state, action);
+
+      expect(finalState.products.map((p) => p.ec_name)).toEqual([
+        'product1',
+        'product2',
+        'product3',
+      ]);
+      expect(finalState.facets).toEqual([facet]);
+      expect(finalState.responseId).toEqual(responseId);
+      expect(finalState.isLoading).toBe(false);
+    });
 
-    const action = fetchProductListing.fulfilled(response, '');
-    const finalState = productListingV2Reducer(state, action);
-    expect(finalState.error).toBeNull();
+    it('sets the #position of each product to its 1-based position in the unpaginated list', () => {
+      state.products = [
+        buildMockProduct({
+          ec_name: 'product1',
+          position: 1,
+        }),
+        buildMockProduct({
+          ec_name: 'product2',
+          position: 2,
+        }),
+      ];
+      const response = buildFetchProductListingV2Response({
+        products: [buildMockBaseProduct({ec_name: 'product3'})],
+        pagination: {
+          page: 1,
+          perPage: 2,
+          totalEntries: 22,
+          totalPages: 3,
+        },
+      });
+
+      const action = fetchMoreProducts.fulfilled(response, '');
+      const finalState = productListingV2Reducer(state, action);
+
+      expect(finalState.products[0].position).toBe(1);
+      expect(finalState.products[1].position).toBe(2);
+      expect(finalState.products[2].position).toBe(3);
+    });
+
+    it('set #error to null', () => {
+      const err = {message: 'message', statusCode: 500, type: 'type'};
+      state.error = err;
+
+      const response = buildFetchProductListingV2Response();
+      const action = fetchMoreProducts.fulfilled(response, '');
+      const finalState = productListingV2Reducer(state, action);
+      expect(finalState.error).toBeNull();
+    });
+  });
+
+  describe('on #fetchProductListing.rejected', () => {
+    it('sets #error', () => {
+      const err = {
+        message: 'message',
+        statusCode: 500,
+        type: 'type',
+      };
+      const action = {
+        type: 'commerce/productListing/fetch/rejected',
+        payload: err,
+      };
+      const finalState = productListingV2Reducer(state, action);
+      expect(finalState.error).toEqual(err);
+      expect(finalState.isLoading).toBe(false);
+    });
+
+    it('sets #isLoading to false', () => {
+      const err = {
+        message: 'message',
+        statusCode: 500,
+        type: 'type',
+      };
+      state.isLoading = true;
+      const action = {
+        type: 'commerce/productListing/fetch/rejected',
+        payload: err,
+      };
+      const finalState = productListingV2Reducer(state, action);
+      expect(finalState.isLoading).toBe(false);
+    });
   });
 
-  it('set the error to null on #fetchMoreProducts.fulfilled', () => {
-    const err = {message: 'message', statusCode: 500, type: 'type'};
-    state.error = err;
+  describe('on #fetchMoreProducts.rejected', () => {
+    it('sets #error', () => {
+      const err = {
+        message: 'message',
+        statusCode: 500,
+        type: 'type',
+      };
+      const action = {
+        type: 'commerce/productListing/fetchMoreProducts/rejected',
+        payload: err,
+      };
+      const finalState = productListingV2Reducer(state, action);
+      expect(finalState.error).toEqual(err);
+      expect(finalState.isLoading).toBe(false);
+    });
 
-    const response = buildFetchProductListingV2Response();
-    const action = fetchMoreProducts.fulfilled(response, '');
-    const finalState = productListingV2Reducer(state, action);
-    expect(finalState.error).toBeNull();
+    it('sets #isLoading to false', () => {
+      const err = {
+        message: 'message',
+        statusCode: 500,
+        type: 'type',
+      };
+      state.isLoading = true;
+      const action = {
+        type: 'commerce/productListing/fetchMoreProducts/rejected',
+        payload: err,
+      };
+      const finalState = productListingV2Reducer(state, action);
+      expect(finalState.isLoading).toBe(false);
+    });
   });
 
-  it('set the isLoading state to true during #fetchProductListing.pending', () => {
-    const pendingAction = fetchProductListing.pending('');
-    const finalState = productListingV2Reducer(state, pendingAction);
-    expect(finalState.isLoading).toBe(true);
+  describe('on #fetchProductListing.pending', () => {
+    it('sets #isLoading to true', () => {
+      const pendingAction = fetchProductListing.pending('');
+      const finalState = productListingV2Reducer(state, pendingAction);
+      expect(finalState.isLoading).toBe(true);
+    });
+
+    it('sets #requestId', () => {
+      const pendingAction = fetchProductListing.pending('request-id');
+      const finalState = productListingV2Reducer(state, pendingAction);
+      expect(finalState.requestId).toBe('request-id');
+    });
   });
 
-  it('set the isLoading state to true during #fetchMoreProducts.pending', () => {
-    const pendingAction = fetchMoreProducts.pending('');
-    const finalState = productListingV2Reducer(state, pendingAction);
-    expect(finalState.isLoading).toBe(true);
+  describe('on #fetchMoreProducts.pending', () => {
+    it('sets #isLoading to true', () => {
+      const pendingAction = fetchMoreProducts.pending('');
+      const finalState = productListingV2Reducer(state, pendingAction);
+      expect(finalState.isLoading).toBe(true);
+    });
+
+    it('sets #requestId', () => {
+      const pendingAction = fetchMoreProducts.pending('request-id');
+      const finalState = productListingV2Reducer(state, pendingAction);
+      expect(finalState.requestId).toBe('request-id');
+    });
   });
 
   describe('on #promoteChildToParent', () => {
@@ -161,7 +273,7 @@ describe('product-listing-v2-slice', () => {
     });
 
     it('when both parent and child exist, promotes the child to parent', () => {
-      const childProduct = buildMockProduct({
+      const childProduct = buildMockChildProduct({
         permanentid: childPermanentId,
         additionalFields: {test: 'test'},
         clickUri: 'child-uri',
@@ -185,6 +297,7 @@ describe('product-listing-v2-slice', () => {
         permanentid: parentPermanentId,
         children: [childProduct],
         totalNumberOfChildren: 1,
+        position: 5,
       });
 
       state.products = [parentProduct];
@@ -196,6 +309,7 @@ describe('product-listing-v2-slice', () => {
           ...childProduct,
           children: parentProduct.children,
           totalNumberOfChildren: parentProduct.totalNumberOfChildren,
+          position: parentProduct.position,
         }),
       ]);
     });
diff --git a/packages/headless/src/features/commerce/product-listing/product-listing-slice.ts b/packages/headless/src/features/commerce/product-listing/product-listing-slice.ts
index 41f84960dfa..306e11b3c2f 100644
--- a/packages/headless/src/features/commerce/product-listing/product-listing-slice.ts
+++ b/packages/headless/src/features/commerce/product-listing/product-listing-slice.ts
@@ -1,7 +1,8 @@
 import {createReducer} from '@reduxjs/toolkit';
 import {CommerceAPIErrorStatusResponse} from '../../../api/commerce/commerce-api-error-response';
-import {Product} from '../../../api/commerce/common/product';
+import {Product, BaseProduct} from '../../../api/commerce/common/product';
 import {CommerceSuccessResponse} from '../../../api/commerce/common/response';
+import {QueryCommerceAPIThunkReturn} from '../common/actions';
 import {
   fetchMoreProducts,
   fetchProductListing,
@@ -24,19 +25,22 @@ export const productListingV2Reducer = createReducer(
         handleError(state, action.payload);
       })
       .addCase(fetchProductListing.fulfilled, (state, action) => {
+        const paginationOffset = getPaginationOffset(action.payload);
         handleFullfilled(state, action.payload.response);
         state.products = action.payload.response.products.map(
-          prependProductInItsOwnChildrenIfNeeded
+          (product, index) =>
+            preprocessProduct(product, paginationOffset + index + 1)
         );
       })
       .addCase(fetchMoreProducts.fulfilled, (state, action) => {
         if (!action.payload) {
           return;
         }
+        const paginationOffset = getPaginationOffset(action.payload);
         handleFullfilled(state, action.payload.response);
         state.products = state.products.concat(
-          action.payload.response.products.map(
-            prependProductInItsOwnChildrenIfNeeded
+          action.payload.response.products.map((product, index) =>
+            preprocessProduct(product, paginationOffset + index + 1)
           )
         );
       })
@@ -56,6 +60,8 @@ export const productListingV2Reducer = createReducer(
           return;
         }
 
+        const position = products[currentParentIndex].position;
+
         const {children, totalNumberOfChildren} = products[currentParentIndex];
 
         const childToPromote = children.find(
@@ -70,6 +76,7 @@ export const productListingV2Reducer = createReducer(
           ...childToPromote,
           children,
           totalNumberOfChildren,
+          position,
         };
 
         products.splice(currentParentIndex, 1, newParent);
@@ -100,12 +107,17 @@ function handlePending(state: ProductListingV2State, requestId: string) {
   state.requestId = requestId;
 }
 
-function prependProductInItsOwnChildrenIfNeeded(product: Product) {
+function getPaginationOffset(payload: QueryCommerceAPIThunkReturn): number {
+  const pagination = payload.response.pagination;
+  return pagination.page * pagination.perPage;
+}
+
+function preprocessProduct(product: BaseProduct, position: number): Product {
   const isParentAlreadyInChildren = product.children.some(
     (child) => child.permanentid === product.permanentid
   );
   if (product.children.length === 0 || isParentAlreadyInChildren) {
-    return product;
+    return {...product, position};
   }
 
   const {children, totalNumberOfChildren, ...restOfProduct} = product;
@@ -113,5 +125,6 @@ function prependProductInItsOwnChildrenIfNeeded(product: Product) {
   return {
     ...product,
     children: [restOfProduct, ...children],
+    position,
   };
 }
diff --git a/packages/headless/src/features/commerce/recommendations/recommendations-slice.test.ts b/packages/headless/src/features/commerce/recommendations/recommendations-slice.test.ts
index 9665c673203..4dead2847b4 100644
--- a/packages/headless/src/features/commerce/recommendations/recommendations-slice.test.ts
+++ b/packages/headless/src/features/commerce/recommendations/recommendations-slice.test.ts
@@ -1,5 +1,9 @@
 import {Action} from '@reduxjs/toolkit';
-import {buildMockProduct} from '../../../test/mock-product';
+import {
+  buildMockChildProduct,
+  buildMockProduct,
+  buildMockBaseProduct,
+} from '../../../test/mock-product';
 import {buildMockRecommendationsResponse} from '../../../test/mock-recommendations';
 import {buildMockRecommendationsSlice} from '../../../test/mock-recommendations-slice';
 import {
@@ -51,7 +55,7 @@ describe('recommendation-slice', () => {
   });
 
   describe('on #fetchRecommendations.fulfilled', () => {
-    const result = buildMockProduct();
+    const result = buildMockBaseProduct();
     const responseId = 'some-response-id';
     const response = buildMockRecommendationsResponse({
       products: [result],
@@ -65,10 +69,10 @@ describe('recommendation-slice', () => {
     );
 
     it('when slot exists, sets the state to the received payload', () => {
-      const result = buildMockProduct();
+      const baseProduct = buildMockBaseProduct({ec_name: 'product-1'});
       const responseId = 'some-response-id';
       const response = buildMockRecommendationsResponse({
-        products: [result],
+        products: [baseProduct],
         responseId,
       });
 
@@ -79,18 +83,46 @@ describe('recommendation-slice', () => {
 
       const slot = finalState[slotId]!;
 
-      expect(slot.products[0]).toEqual(result);
+      expect(slot.products).toEqual(
+        response.response.products.map((p) =>
+          buildMockProduct({ec_name: p.ec_name})
+        )
+      );
       expect(slot.responseId).toEqual(responseId);
       expect(slot.isLoading).toBe(false);
     });
+
+    it('when slot exists, sets the #position of each product to its 1-based position in the unpaginated list', () => {
+      const response = buildMockRecommendationsResponse({
+        products: [
+          buildMockBaseProduct({ec_name: 'product-1'}),
+          buildMockBaseProduct({ec_name: 'product-2'}),
+        ],
+        pagination: {
+          page: 2,
+          perPage: 10,
+          totalEntries: 22,
+          totalPages: 3,
+        },
+      });
+
+      state[slotId] = buildMockRecommendationsSlice();
+
+      const action = fetchRecommendations.fulfilled(response, '', {slotId});
+      const finalState = recommendationsReducer(state, action);
+
+      const slot = finalState[slotId]!;
+      expect(slot.products[0].position).toBe(21);
+      expect(slot.products[1].position).toBe(22);
+    });
   });
 
   describe('on #fetchMoreRecommendations.fulfilled', () => {
     const responseId = 'some-response-id';
     const response = buildMockRecommendationsResponse({
       products: [
-        buildMockProduct({ec_name: 'product-3'}),
-        buildMockProduct({ec_name: 'product-4'}),
+        buildMockBaseProduct({ec_name: 'product-3'}),
+        buildMockBaseProduct({ec_name: 'product-4'}),
       ],
       responseId,
     });
@@ -121,6 +153,38 @@ describe('recommendation-slice', () => {
       expect(slot.responseId).toEqual(responseId);
       expect(slot.isLoading).toBe(false);
     });
+
+    it('when slot exists, sets the #position of each product to its 1-based position in the unpaginated list', () => {
+      const response = buildMockRecommendationsResponse({
+        products: [buildMockBaseProduct({ec_name: 'product-3'})],
+        pagination: {
+          page: 1,
+          perPage: 2,
+          totalEntries: 22,
+          totalPages: 3,
+        },
+      });
+
+      state[slotId] = buildMockRecommendationsSlice({
+        products: [
+          buildMockProduct({
+            ec_name: 'product-1',
+            position: 1,
+          }),
+          buildMockProduct({
+            ec_name: 'product-2',
+            position: 2,
+          }),
+        ],
+      });
+
+      const action = fetchMoreRecommendations.fulfilled(response, '', {slotId});
+      const finalState = recommendationsReducer(state, action);
+
+      expect(finalState[slotId]!.products[0].position).toBe(1);
+      expect(finalState[slotId]!.products[1].position).toBe(2);
+      expect(finalState[slotId]!.products[2].position).toBe(3);
+    });
   });
 
   describe('on #fetchRecommendations.rejected', () => {
@@ -273,7 +337,7 @@ describe('recommendation-slice', () => {
     });
 
     it('when both parent and child exist in slot, promotes the child to parent', () => {
-      const childProduct = buildMockProduct({
+      const childProduct = buildMockChildProduct({
         permanentid: childPermanentId,
         additionalFields: {test: 'test'},
         clickUri: 'child-uri',
@@ -297,6 +361,7 @@ describe('recommendation-slice', () => {
         permanentid: parentPermanentId,
         children: [childProduct],
         totalNumberOfChildren: 1,
+        position: 5,
       });
 
       state[slotId]!.products = [parentProduct];
@@ -308,6 +373,7 @@ describe('recommendation-slice', () => {
           ...childProduct,
           children: parentProduct.children,
           totalNumberOfChildren: parentProduct.totalNumberOfChildren,
+          position: parentProduct.position,
         }),
       ]);
     });
diff --git a/packages/headless/src/features/commerce/recommendations/recommendations-slice.ts b/packages/headless/src/features/commerce/recommendations/recommendations-slice.ts
index be25951ad06..e951ce7d8a3 100644
--- a/packages/headless/src/features/commerce/recommendations/recommendations-slice.ts
+++ b/packages/headless/src/features/commerce/recommendations/recommendations-slice.ts
@@ -1,12 +1,13 @@
 import {createReducer} from '@reduxjs/toolkit';
 import {CommerceAPIErrorStatusResponse} from '../../../api/commerce/commerce-api-error-response';
-import {Product} from '../../../api/commerce/common/product';
+import {BaseProduct, Product} from '../../../api/commerce/common/product';
 import {RecommendationsCommerceSuccessResponse} from '../../../api/commerce/recommendations/recommendations-response';
 import {
   fetchRecommendations,
   registerRecommendationsSlot,
   fetchMoreRecommendations,
   promoteChildToParent,
+  QueryRecommendationsCommerceAPIThunkReturn,
 } from './recommendations-actions';
 import {
   getRecommendationsInitialState,
@@ -45,8 +46,10 @@ export const recommendationsReducer = createReducer(
         if (!recommendations) {
           return;
         }
-        recommendations.products = response.products.map(
-          prependProductInItsOwnChildrenIfNeeded
+        const paginationOffset = getPaginationOffset(action.payload);
+
+        recommendations.products = response.products.map((product, index) =>
+          preprocessProduct(product, paginationOffset + index + 1)
         );
       })
       .addCase(fetchMoreRecommendations.fulfilled, (state, action) => {
@@ -62,8 +65,13 @@ export const recommendationsReducer = createReducer(
         if (!recommendations) {
           return;
         }
+
+        const paginationOffset = getPaginationOffset(action.payload);
+
         recommendations.products = recommendations.products.concat(
-          response.products.map(prependProductInItsOwnChildrenIfNeeded)
+          response.products.map((product, index) =>
+            preprocessProduct(product, paginationOffset + index + 1)
+          )
         );
       })
       .addCase(fetchRecommendations.pending, (state, action) => {
@@ -88,6 +96,8 @@ export const recommendationsReducer = createReducer(
           return;
         }
 
+        const position = products[currentParentIndex].position;
+
         const {children, totalNumberOfChildren} = products[currentParentIndex];
 
         const childToPromote = children.find(
@@ -102,6 +112,7 @@ export const recommendationsReducer = createReducer(
           ...childToPromote,
           children,
           totalNumberOfChildren,
+          position,
         };
 
         products.splice(currentParentIndex, 1, newParent);
@@ -159,12 +170,19 @@ function handlePending(state: RecommendationsState, slotId: string) {
   recommendations.isLoading = true;
 }
 
-function prependProductInItsOwnChildrenIfNeeded(product: Product) {
+function getPaginationOffset(
+  actionPayload: QueryRecommendationsCommerceAPIThunkReturn
+): number {
+  const pagination = actionPayload.response.pagination;
+  return pagination.page * pagination.perPage;
+}
+
+function preprocessProduct(product: BaseProduct, position: number): Product {
   const isParentAlreadyInChildren = product.children.some(
     (child) => child.permanentid === product.permanentid
   );
   if (product.children.length === 0 || isParentAlreadyInChildren) {
-    return product;
+    return {...product, position};
   }
 
   const {children, totalNumberOfChildren, ...restOfProduct} = product;
@@ -172,5 +190,6 @@ function prependProductInItsOwnChildrenIfNeeded(product: Product) {
   return {
     ...product,
     children: [restOfProduct, ...children],
+    position,
   };
 }
diff --git a/packages/headless/src/features/commerce/search/search-slice.test.ts b/packages/headless/src/features/commerce/search/search-slice.test.ts
index bcd38bb4c1c..027ad001933 100644
--- a/packages/headless/src/features/commerce/search/search-slice.test.ts
+++ b/packages/headless/src/features/commerce/search/search-slice.test.ts
@@ -1,6 +1,10 @@
 import {buildMockCommerceRegularFacetResponse} from '../../../test/mock-commerce-facet-response';
 import {buildSearchResponse} from '../../../test/mock-commerce-search';
-import {buildMockProduct} from '../../../test/mock-product';
+import {
+  buildMockChildProduct,
+  buildMockProduct,
+  buildMockBaseProduct,
+} from '../../../test/mock-product';
 import {
   executeSearch,
   fetchMoreProducts,
@@ -25,9 +29,9 @@ describe('search-slice', () => {
     );
   });
 
-  describe('when executeSearch.fulfilled', () => {
-    it('it updates the state with the received payload', () => {
-      const products = [buildMockProduct()];
+  describe('on #executeSearch.fulfilled', () => {
+    it('updates the state with the received payload', () => {
+      const products = [buildMockBaseProduct({ec_name: 'product1'})];
       const facets = [buildMockCommerceRegularFacetResponse()];
       const responseId = 'some-response-id';
       const response = buildSearchResponse({
@@ -39,13 +43,36 @@ describe('search-slice', () => {
       const action = executeSearch.fulfilled(response, '');
       const finalState = commerceSearchReducer(state, action);
 
-      expect(finalState.products).toEqual(products);
+      expect(finalState.products).toEqual(
+        products.map((p) => buildMockProduct({ec_name: p.ec_name}))
+      );
       expect(finalState.facets).toEqual(facets);
       expect(finalState.responseId).toEqual(responseId);
       expect(finalState.isLoading).toBe(false);
     });
 
-    it('set the error to null on success', () => {
+    it('sets the #position of each product to its 1-based position in the unpaginated list', () => {
+      const response = buildSearchResponse({
+        products: [
+          buildMockBaseProduct({ec_name: 'product1'}),
+          buildMockBaseProduct({ec_name: 'product2'}),
+        ],
+        pagination: {
+          page: 2,
+          perPage: 10,
+          totalEntries: 22,
+          totalPages: 3,
+        },
+      });
+
+      const action = executeSearch.fulfilled(response, '');
+      const finalState = commerceSearchReducer(state, action);
+
+      expect(finalState.products[0].position).toBe(21);
+      expect(finalState.products[1].position).toBe(22);
+    });
+
+    it('sets #error to null', () => {
       state.error = {message: 'message', statusCode: 500, type: 'type'};
 
       const response = buildSearchResponse();
@@ -56,15 +83,15 @@ describe('search-slice', () => {
     });
   });
 
-  describe('when fetchMoreProducts.fulfilled', () => {
-    it('it updates the state with the received payload', () => {
+  describe('on #fetchMoreProducts.fulfilled', () => {
+    it('updates the state with the received payload', () => {
       state.products = [
         buildMockProduct({ec_name: 'product1'}),
         buildMockProduct({ec_name: 'product2'}),
       ];
       const newProducts = [
-        buildMockProduct({ec_name: 'product3'}),
-        buildMockProduct({ec_name: 'product4'}),
+        buildMockBaseProduct({ec_name: 'product3'}),
+        buildMockBaseProduct({ec_name: 'product4'}),
       ];
       const facets = [buildMockCommerceRegularFacetResponse()];
       const responseId = 'some-response-id';
@@ -89,7 +116,36 @@ describe('search-slice', () => {
       expect(finalState.isLoading).toBe(false);
     });
 
-    it('set the error to null on success', () => {
+    it('sets the #position of each product to its 1-based position in the unpaginated list', () => {
+      state.products = [
+        buildMockProduct({
+          ec_name: 'product1',
+          position: 1,
+        }),
+        buildMockProduct({
+          ec_name: 'product2',
+          position: 2,
+        }),
+      ];
+      const response = buildSearchResponse({
+        products: [buildMockBaseProduct({ec_name: 'product3'})],
+        pagination: {
+          page: 1,
+          perPage: 2,
+          totalEntries: 22,
+          totalPages: 3,
+        },
+      });
+
+      const action = fetchMoreProducts.fulfilled(response, '');
+      const finalState = commerceSearchReducer(state, action);
+
+      expect(finalState.products[0].position).toBe(1);
+      expect(finalState.products[1].position).toBe(2);
+      expect(finalState.products[2].position).toBe(3);
+    });
+
+    it('sets #error to null', () => {
       state.error = {message: 'message', statusCode: 500, type: 'type'};
 
       const response = buildSearchResponse();
@@ -100,14 +156,14 @@ describe('search-slice', () => {
     });
   });
 
-  describe('when executeSearch.rejected', () => {
+  describe('on #executeSearch.rejected', () => {
     const err = {
       message: 'message',
       statusCode: 500,
       type: 'type',
     };
 
-    it('sets the error', () => {
+    it('sets #error', () => {
       const action = {type: executeSearch.rejected.type, payload: err};
       const finalState = commerceSearchReducer(state, action);
 
@@ -115,7 +171,7 @@ describe('search-slice', () => {
       expect(finalState.isLoading).toBe(false);
     });
 
-    it('sets isLoading to false', () => {
+    it('sets #isLoading to false', () => {
       state.isLoading = true;
 
       const action = {type: executeSearch.rejected.type, payload: err};
@@ -126,14 +182,14 @@ describe('search-slice', () => {
     });
   });
 
-  describe('when fetchMoreProducts.rejected', () => {
+  describe('on #fetchMoreProducts.rejected', () => {
     const err = {
       message: 'message',
       statusCode: 500,
       type: 'type',
     };
 
-    it('sets the error', () => {
+    it('sets #error', () => {
       const action = {type: fetchMoreProducts.rejected.type, payload: err};
       const finalState = commerceSearchReducer(state, action);
 
@@ -141,7 +197,7 @@ describe('search-slice', () => {
       expect(finalState.isLoading).toBe(false);
     });
 
-    it('sets isLoading to false', () => {
+    it('sets #isLoading to false', () => {
       state.isLoading = true;
 
       const action = {type: fetchMoreProducts.rejected.type, payload: err};
@@ -152,8 +208,8 @@ describe('search-slice', () => {
     });
   });
 
-  describe('when executeSearch.pending', () => {
-    it('sets isLoading to true', () => {
+  describe('on #executeSearch.pending', () => {
+    it('sets #isLoading to true', () => {
       state.isLoading = false;
 
       const pendingAction = executeSearch.pending('');
@@ -161,10 +217,19 @@ describe('search-slice', () => {
 
       expect(finalState.isLoading).toBe(true);
     });
+
+    it('sets #requestId', () => {
+      const requestId = 'request-id';
+
+      const pendingAction = executeSearch.pending(requestId);
+      const finalState = commerceSearchReducer(state, pendingAction);
+
+      expect(finalState.requestId).toBe(requestId);
+    });
   });
 
-  describe('when fetchMoreProducts.pending', () => {
-    it('sets isLoading to true', () => {
+  describe('on #fetchMoreProducts.pending', () => {
+    it('sets #isLoading to true', () => {
       state.isLoading = false;
 
       const pendingAction = fetchMoreProducts.pending('');
@@ -172,6 +237,15 @@ describe('search-slice', () => {
 
       expect(finalState.isLoading).toBe(true);
     });
+
+    it('sets #requestId', () => {
+      const requestId = 'request-id';
+
+      const pendingAction = fetchMoreProducts.pending(requestId);
+      const finalState = commerceSearchReducer(state, pendingAction);
+
+      expect(finalState.requestId).toBe(requestId);
+    });
   });
 
   describe('on #promoteChildToParent', () => {
@@ -186,13 +260,13 @@ describe('search-slice', () => {
       });
     });
 
-    it('when parent does not exist, it does not change the state', () => {
+    it('when parent does not exist, does not change the state', () => {
       const finalState = commerceSearchReducer(state, action);
 
       expect(finalState).toEqual(state);
     });
 
-    it('when child does not exist, it does not change the state', () => {
+    it('when child does not exist, does not change the state', () => {
       state.products = [
         buildMockProduct({permanentid: parentPermanentId, children: []}),
       ];
@@ -203,7 +277,7 @@ describe('search-slice', () => {
     });
 
     it('when both parent and child exist, promotes the child to parent', () => {
-      const childProduct = buildMockProduct({
+      const childProduct = buildMockChildProduct({
         permanentid: childPermanentId,
         additionalFields: {test: 'test'},
         clickUri: 'child-uri',
@@ -227,6 +301,7 @@ describe('search-slice', () => {
         permanentid: parentPermanentId,
         children: [childProduct],
         totalNumberOfChildren: 1,
+        position: 5,
       });
 
       state.products = [parentProduct];
@@ -238,6 +313,7 @@ describe('search-slice', () => {
           ...childProduct,
           children: parentProduct.children,
           totalNumberOfChildren: parentProduct.totalNumberOfChildren,
+          position: parentProduct.position,
         }),
       ]);
     });
diff --git a/packages/headless/src/features/commerce/search/search-slice.ts b/packages/headless/src/features/commerce/search/search-slice.ts
index 3fe134a4d48..9c21632652e 100644
--- a/packages/headless/src/features/commerce/search/search-slice.ts
+++ b/packages/headless/src/features/commerce/search/search-slice.ts
@@ -1,8 +1,9 @@
 import {createReducer} from '@reduxjs/toolkit';
 import {CommerceAPIErrorStatusResponse} from '../../../api/commerce/commerce-api-error-response';
-import {Product} from '../../../api/commerce/common/product';
+import {Product, BaseProduct} from '../../../api/commerce/common/product';
 import {CommerceSuccessResponse} from '../../../api/commerce/common/response';
 import {
+  QuerySearchCommerceAPIThunkReturn,
   executeSearch,
   fetchMoreProducts,
   promoteChildToParent,
@@ -24,27 +25,30 @@ export const commerceSearchReducer = createReducer(
         handleError(state, action.payload);
       })
       .addCase(executeSearch.fulfilled, (state, action) => {
+        const paginationOffset = getPaginationOffset(action.payload);
         handleFulfilled(
           state,
           action.payload.response,
           action.payload.queryExecuted
         );
         state.products = action.payload.response.products.map(
-          prependProductInItsOwnChildrenIfNeeded
+          (product, index) =>
+            preprocessProduct(product, paginationOffset + index + 1)
         );
       })
       .addCase(fetchMoreProducts.fulfilled, (state, action) => {
         if (!action.payload) {
           return;
         }
+        const paginationOffset = getPaginationOffset(action.payload);
         handleFulfilled(
           state,
           action.payload.response,
           action.payload.queryExecuted
         );
         state.products = state.products.concat(
-          action.payload.response.products.map(
-            prependProductInItsOwnChildrenIfNeeded
+          action.payload.response.products.map((product, index) =>
+            preprocessProduct(product, paginationOffset + index + 1)
           )
         );
       })
@@ -64,6 +68,8 @@ export const commerceSearchReducer = createReducer(
           return;
         }
 
+        const position = products[currentParentIndex].position;
+
         const {children, totalNumberOfChildren} = products[currentParentIndex];
 
         const childToPromote = children.find(
@@ -78,6 +84,7 @@ export const commerceSearchReducer = createReducer(
           ...childToPromote,
           children,
           totalNumberOfChildren,
+          position,
         };
 
         products.splice(currentParentIndex, 1, newParent);
@@ -110,12 +117,19 @@ function handleFulfilled(
   state.queryExecuted = query ?? '';
 }
 
-function prependProductInItsOwnChildrenIfNeeded(product: Product) {
+function getPaginationOffset(
+  payload: QuerySearchCommerceAPIThunkReturn
+): number {
+  const pagination = payload.response.pagination;
+  return pagination.page * pagination.perPage;
+}
+
+function preprocessProduct(product: BaseProduct, position: number): Product {
   const isParentAlreadyInChildren = product.children.some(
     (child) => child.permanentid === product.permanentid
   );
   if (product.children.length === 0 || isParentAlreadyInChildren) {
-    return product;
+    return {...product, position};
   }
 
   const {children, totalNumberOfChildren, ...restOfProduct} = product;
@@ -123,5 +137,6 @@ function prependProductInItsOwnChildrenIfNeeded(product: Product) {
   return {
     ...product,
     children: [restOfProduct, ...children],
+    position,
   };
 }
diff --git a/packages/headless/src/test/mock-product.ts b/packages/headless/src/test/mock-product.ts
index 9e93dc49434..a369e1ea240 100644
--- a/packages/headless/src/test/mock-product.ts
+++ b/packages/headless/src/test/mock-product.ts
@@ -1,13 +1,36 @@
-import {Product} from '../api/commerce/common/product';
+import {
+  ChildProduct,
+  Product,
+  BaseProduct,
+} from '../api/commerce/common/product';
 
-export function buildMockProduct(config: Partial<Product> = {}): Product {
+export function buildMockChildProduct(
+  config: Partial<ChildProduct> = {}
+): ChildProduct {
   return {
     permanentid: '',
     clickUri: '',
     ec_name: '',
     additionalFields: {},
-    children: [],
-    totalNumberOfChildren: 0,
     ...config,
   };
 }
+
+export function buildMockBaseProduct(
+  config: Partial<BaseProduct> = {}
+): BaseProduct {
+  const {children, totalNumberOfChildren, ...childProductConfig} = config;
+  return {
+    ...buildMockChildProduct(childProductConfig),
+    children: children ?? [],
+    totalNumberOfChildren: totalNumberOfChildren ?? 0,
+  };
+}
+
+export function buildMockProduct(config: Partial<Product> = {}): Product {
+  const {position, ...baseProductConfig} = config;
+  return {
+    ...buildMockBaseProduct(baseProductConfig),
+    position: position ?? 1,
+  };
+}