ProductSearch API

The ProductSearch API gives extensions access to the native product search and fetching functionality of Shopify POS. The interface provides numerous functions to search for products by query, or to fetch the details of one or more products or product variants.

ProductSearchApi

ProductSearchApiContent

searchProducts

Search for products on the POS device.

fetchProductWithId

Fetches a single product's details.

fetchProductsWithIds

Fetches multiple products' details.

fetchProductVariantWithId

Fetches a single product variant's details.

fetchProductVariantsWithIds

Fetches multiple product variants' details.

fetchProductVariantsWithProductId

Fetches all product variants associated with a product.

fetchPaginatedProductVariantsWithProductId

Fetches a page of product variants associated with a product.

ProductSearchParams

Interface for product search

queryString

The search term to be used to search for POS products.

sortType

Specifies the order in which products should be sorted. When a `queryString` is provided, sortType will not have any effect, as the results will be returned in order by relevance to the `queryString`.

first

Specifies the number of results to be returned in this page. The maximum number of items that will be returned is 50.

afterCursor

Specifies the page cursor. Items after this cursor will be returned.

ProductSortType

'RECENTLY_ADDED' | 'RECENTLY_ADDED_ASCENDING' | 'ALPHABETICAL_A_TO_Z' | 'ALPHABETICAL_Z_TO_A'

PaginatedResult

Contains a page of fetched results.

items

The items returned from the fetch.

lastCursor

The cursor of the last item. This can be used to fetch more results. The format of this cursor may look different depending on if POS is fetching results from the remote API, or its local database. However, that should not affect its usage with the search functions.

hasNextPage

Whether or not there is another page of results that can be fetched.

Product

id

createdAt

updatedAt

title

description

descriptionHtml

featuredImage

isGiftCard

tracksInventory

vendor

minVariantPrice

maxVariantPrice

productType

productCategory

tags

numVariants

totalAvailableInventory

totalInventory

variants

options

hasOnlyDefaultVariant

hasInStockVariants

onlineStoreUrl

ProductVariant

id

createdAt

updatedAt

title

price

compareAtPrice

taxable

sku

barcode

displayName

image

inventoryIsTracked

inventoryAtLocation

inventoryAtAllLocations

inventoryPolicy

hasInStockVariants

options

product

productId

position

ProductVariantInventoryPolicy

'DENY' | 'CONTINUE'

ProductVariantOption

name

value

ProductOption

id

name

optionValues

productId

MultipleResourceResult

The result of a fetch function where the input is multiple IDs. This object contains the resources that were found, as well as an array of IDs specifying which IDs, if any, did not correspond to a resource.

fetchedResources

The resources that were fetched using the IDs provided.

idsForResourcesNotFound

The IDs for which a resource was not found.

PaginationParams

Base interface for pagination.

first

Specifies the number of results to be returned in this page. The maximum number of items that will be returned is 50.

afterCursor

Specifies the page cursor. Items after this cursor will be returned.

Examples

The ProductSearch API gives extensions access to the native product search and fetching functionality of Shopify POS. The interface provides numerous functions to search for products by query, or to fetch the details of one or more products or product variants.

Search for products with a search bar

import React, { useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  const search = async (queryString?: string) => {
    const results = await api.productSearch.searchProducts({queryString})
    const data = results.items.map((product): ListRow => {
      return {
        id: String(product.id),
        leftSide: {
          label: product.title,
          image: {
            source: product.featuredImage
          }
        }
      }
    })

    setData(data)
  }

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          listHeaderComponent={<SearchBar 
            placeholder='Search products'
            onTextChange={search}
            onSearch={search}
          />}
        imageDisplayStrategy='always'
        data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const search = async (queryString?: string) => {
    const results = await api.productSearch.searchProducts({queryString});
    const data = results.items.map((product): ListRow => {
      return {
        id: String(product.id),
        leftSide: {
          label: product.title,
          image: {
            source: product.featuredImage,
          },
        },
      };
    });

    list.updateProps({data});
  };

  const searchBar = root.createFragment();

  searchBar.append(
    root.createComponent(SearchBar, {
      placeholder: 'Search products',
      onTextChange: search,
      onSearch: search,
    }),
  );

  list.updateProps({listHeaderComponent: searchBar});

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);
});

Search for products with a search bar

import React, { useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  const search = async (queryString?: string) => {
    const results = await api.productSearch.searchProducts({queryString})
    const data = results.items.map((product): ListRow => {
      return {
        id: String(product.id),
        leftSide: {
          label: product.title,
          image: {
            source: product.featuredImage
          }
        }
      }
    })

    setData(data)
  }

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          listHeaderComponent={<SearchBar 
            placeholder='Search products'
            onTextChange={search}
            onSearch={search}
          />}
        imageDisplayStrategy='always'
        data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const search = async (queryString?: string) => {
    const results = await api.productSearch.searchProducts({queryString});
    const data = results.items.map((product): ListRow => {
      return {
        id: String(product.id),
        leftSide: {
          label: product.title,
          image: {
            source: product.featuredImage,
          },
        },
      };
    });

    list.updateProps({data});
  };

  const searchBar = root.createFragment();

  searchBar.append(
    root.createComponent(SearchBar, {
      placeholder: 'Search products',
      onTextChange: search,
      onSearch: search,
    }),
  );

  list.updateProps({listHeaderComponent: searchBar});

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);
});

Fetch a specific product with a product ID

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProduct = async () => {
      const resultProduct = await api.productSearch.fetchProductWithId(1)
  
      if (resultProduct) { 
        const listItem = {
          id: String(resultProduct.id),
          leftSide: {
            label: resultProduct.title,
            image: {
              source: resultProduct.featuredImage
            }
          }
        }
        setData([listItem])
      }
    }

    fetchProduct();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProduct = async () => {
    const resultProduct = await api.productSearch.fetchProductWithId(1);
    if (resultProduct) {
      const listItem = {
        id: String(resultProduct.id),
        leftSide: {
          label: resultProduct.title,
          image: {
            source: resultProduct.featuredImage,
          },
        },
      };

      list.updateProps({data: [listItem]});
    }
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProduct();
});

Fetch a specific product with a product ID

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProduct = async () => {
      const resultProduct = await api.productSearch.fetchProductWithId(1)
  
      if (resultProduct) { 
        const listItem = {
          id: String(resultProduct.id),
          leftSide: {
            label: resultProduct.title,
            image: {
              source: resultProduct.featuredImage
            }
          }
        }
        setData([listItem])
      }
    }

    fetchProduct();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProduct = async () => {
    const resultProduct = await api.productSearch.fetchProductWithId(1);
    if (resultProduct) {
      const listItem = {
        id: String(resultProduct.id),
        leftSide: {
          label: resultProduct.title,
          image: {
            source: resultProduct.featuredImage,
          },
        },
      };

      list.updateProps({data: [listItem]});
    }
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProduct();
});

Fetch multiple products by specifying product IDs

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const results = await api.productSearch.fetchProductsWithIds([1, 2, 3]);
      const data = results.fetchedResources.map((product): ListRow => {
        return {
          id: String(product.id),
          leftSide: {
            label: product.title,
            image: {
              source: product.featuredImage
            }
          }
        }
      })

      console.log('IDs not found: ', results.idsForResourcesNotFound);
  
      setData(data)
    }

    fetchProducts();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProducts = async () => {
    const results = await api.productSearch.fetchProductsWithIds([1, 2, 3, 4]);
    const data = results.fetchedResources.map((product): ListRow => {
      return {
        id: String(product.id),
        leftSide: {
          label: product.title,
          image: {
            source: product.featuredImage,
          },
        },
      };
    });

    console.log('IDs not found: ', results.idsForResourcesNotFound);

    list.updateProps({data});
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProducts();
});

Fetch multiple products by specifying product IDs

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProducts = async () => {
      const results = await api.productSearch.fetchProductsWithIds([1, 2, 3]);
      const data = results.fetchedResources.map((product): ListRow => {
        return {
          id: String(product.id),
          leftSide: {
            label: product.title,
            image: {
              source: product.featuredImage
            }
          }
        }
      })

      console.log('IDs not found: ', results.idsForResourcesNotFound);
  
      setData(data)
    }

    fetchProducts();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProducts = async () => {
    const results = await api.productSearch.fetchProductsWithIds([1, 2, 3, 4]);
    const data = results.fetchedResources.map((product): ListRow => {
      return {
        id: String(product.id),
        leftSide: {
          label: product.title,
          image: {
            source: product.featuredImage,
          },
        },
      };
    });

    console.log('IDs not found: ', results.idsForResourcesNotFound);

    list.updateProps({data});
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProducts();
});

Fetch a specific product variant with a variant ID

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProductVariant = async () => {
      const resultProductVariant = await api.productSearch.fetchProductVariantWithId(1);
  
      if (resultProductVariant) { 
        const listItem = {
          id: String(resultProductVariant.id),
          leftSide: {
            label: resultProductVariant.title,
            image: {
              source: resultProductVariant.image
            }
          }
        }
        setData([listItem])
      }
    }

    fetchProductVariant();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProductVariant = async () => {
    const resultProductVariant =
      await api.productSearch.fetchProductVariantWithId(1);
    if (resultProductVariant) {
      const listItem = {
        id: String(resultProductVariant.id),
        leftSide: {
          label: resultProductVariant.title,
          image: {
            source: resultProductVariant.image,
          },
        },
      };

      list.updateProps({data: [listItem]});
    }
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProductVariant();
});

Fetch a specific product variant with a variant ID

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProductVariant = async () => {
      const resultProductVariant = await api.productSearch.fetchProductVariantWithId(1);
  
      if (resultProductVariant) { 
        const listItem = {
          id: String(resultProductVariant.id),
          leftSide: {
            label: resultProductVariant.title,
            image: {
              source: resultProductVariant.image
            }
          }
        }
        setData([listItem])
      }
    }

    fetchProductVariant();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProductVariant = async () => {
    const resultProductVariant =
      await api.productSearch.fetchProductVariantWithId(1);
    if (resultProductVariant) {
      const listItem = {
        id: String(resultProductVariant.id),
        leftSide: {
          label: resultProductVariant.title,
          image: {
            source: resultProductVariant.image,
          },
        },
      };

      list.updateProps({data: [listItem]});
    }
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProductVariant();
});

Fetch multiple product variants by specifying variant IDs

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProductVariants = async () => {
      const results = await api.productSearch.fetchProductVariantsWithIds([1, 2, 3]);
      const data = results.fetchedResources.map((variant): ListRow => {
        return {
          id: String(variant.id),
          leftSide: {
            label: variant.title,
            image: {
              source: variant.image
            }
          }
        }
      })

      console.log('IDs not found: ', results.idsForResourcesNotFound);
  
      setData(data)
    }

    fetchProductVariants();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProductVariants = async () => {
    const results = await api.productSearch.fetchProductVariantsWithIds([
      1, 2, 3, 4,
    ]);
    const data = results.fetchedResources.map((variant): ListRow => {
      return {
        id: String(variant.id),
        leftSide: {
          label: variant.title,
          image: {
            source: variant.image,
          },
        },
      };
    });

    console.log('IDs not found: ', results.idsForResourcesNotFound);

    list.updateProps({data});
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProductVariants();
});

Fetch multiple product variants by specifying variant IDs

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProductVariants = async () => {
      const results = await api.productSearch.fetchProductVariantsWithIds([1, 2, 3]);
      const data = results.fetchedResources.map((variant): ListRow => {
        return {
          id: String(variant.id),
          leftSide: {
            label: variant.title,
            image: {
              source: variant.image
            }
          }
        }
      })

      console.log('IDs not found: ', results.idsForResourcesNotFound);
  
      setData(data)
    }

    fetchProductVariants();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProductVariants = async () => {
    const results = await api.productSearch.fetchProductVariantsWithIds([
      1, 2, 3, 4,
    ]);
    const data = results.fetchedResources.map((variant): ListRow => {
      return {
        id: String(variant.id),
        leftSide: {
          label: variant.title,
          image: {
            source: variant.image,
          },
        },
      };
    });

    console.log('IDs not found: ', results.idsForResourcesNotFound);

    list.updateProps({data});
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProductVariants();
});

Fetch a page of product variants with a specific product ID

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProductVariants = async () => {
      const results = await api.productSearch.fetchPaginatedProductVariantsWithProductId(1, {first: 10});
      const data = results.items.map((variant): ListRow => {
        return {
          id: String(variant.id),
          leftSide: {
            label: variant.title,
            image: {
              source: variant.image
            }
          }
        }
      })
  
      console.log('Cursor for next page: ', results.lastCursor);
      setData(data)
    }

    fetchProductVariants();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProductVariants = async () => {
    const results =
      await api.productSearch.fetchPaginatedProductVariantsWithProductId(1, {
        first: 10,
      });
    const data = results.items.map((variant): ListRow => {
      return {
        id: String(variant.id),
        leftSide: {
          label: variant.title,
          image: {
            source: variant.image,
          },
        },
      };
    });

    console.log('Cursor for next page: ', results.lastCursor);

    list.updateProps({data});
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProductVariants();
});

Fetch a page of product variants with a specific product ID

import React, { useEffect, useState } from 'react'

import { Screen, List, Navigator, reactExtension, SearchBar, useApi, ListRow } from '@shopify/ui-extensions-react/point-of-sale';

const Modal = () => {
  const api = useApi<'pos.home.modal.render'>();
  const [data, setData] = useState<ListRow[]>([]);

  useEffect(() => {
    const fetchProductVariants = async () => {
      const results = await api.productSearch.fetchPaginatedProductVariantsWithProductId(1, {first: 10});
      const data = results.items.map((variant): ListRow => {
        return {
          id: String(variant.id),
          leftSide: {
            label: variant.title,
            image: {
              source: variant.image
            }
          }
        }
      })
  
      console.log('Cursor for next page: ', results.lastCursor);
      setData(data)
    }

    fetchProductVariants();
  }, []);

  return (
    <Navigator>
      <Screen name="HelloWorld" title="Hello World!">
        <List
          imageDisplayStrategy='always'
          data={data}
        />
      </Screen>
    </Navigator>
  )
}

export default reactExtension('pos.home.modal.render', () => <Modal />);
import {
  SearchBar,
  Screen,
  Navigator,
  extension,
  ListRow,
  List,
} from '@shopify/ui-extensions/point-of-sale';

export default extension('pos.home.modal.render', (root, api) => {
  const list = root.createComponent(List, {
    imageDisplayStrategy: 'always',
    data: [],
  });

  const fetchProductVariants = async () => {
    const results =
      await api.productSearch.fetchPaginatedProductVariantsWithProductId(1, {
        first: 10,
      });
    const data = results.items.map((variant): ListRow => {
      return {
        id: String(variant.id),
        leftSide: {
          label: variant.title,
          image: {
            source: variant.image,
          },
        },
      };
    });

    console.log('Cursor for next page: ', results.lastCursor);

    list.updateProps({data});
  };

  const screen = root.createComponent(Screen, {
    title: 'Home',
    name: 'Home',
  });

  screen.append(list);

  const navigator = root.createComponent(Navigator);
  navigator.append(screen);

  root.append(navigator);

  fetchProductVariants();
});