Shopify POS UI Extensions: Fast Lists with s-pos-list

The 2026-10 API introduces s-pos-list, a virtualized list component for Shopify POS UI extensions. If you're building a POS extension that displays long lists—products, orders, customers—s-pos-list keeps scrolling smooth by rendering only the visible rows. This guide shows you how to use it effectively, from custom row templates to performance tuning on retail hardware.

We'll cover what s-pos-list is, how to render custom rows, handle large datasets with search and pagination, avoid common pitfalls, and decide when a POS extension is the right approach for a merchant. By the end, you'll have a clear path to building fast, responsive list screens that work well even on modest POS devices.

If you're evaluating whether to build a custom POS extension or need help with Shopify app development, our team can assist. Learn more about our Shopify app services.

What s-pos-list is and why virtualization matters on POS devices

s-pos-list is a UI component in the Shopify POS UI extensions framework that renders a virtualized list. Virtualization means the component only creates DOM elements for the rows currently visible in the viewport (plus a small buffer). As the user scrolls, rows are recycled and new data is rendered. This dramatically reduces the number of elements in the DOM, which is critical on POS hardware—often tablets or mobile devices with limited CPU and memory compared to desktop browsers.

Without virtualization, a list of 1,000 products would create 1,000 row elements, leading to slow initial rendering, janky scrolling, and high memory usage. With s-pos-list, you can display thousands of items while keeping the interface responsive. This is especially important in retail environments where staff need quick access to product information during a sale.

The component is part of the 2026-10 API release, so you'll need to ensure your extension targets that version or later. Check the Shopify developer documentation for the exact import path and usage details.

Custom row templates: what you can render and what you cannot

s-pos-list supports custom row templates, giving you flexibility in how each item appears. You define a template using a function that returns a UI component tree for a given item. The component tree can include text, images, buttons, and other POS UI components, but there are limitations.

What you can render

• Text elements with various styles (headings, body, captions).
• Images (e.g., product thumbnails) with specified dimensions.
• Buttons and other interactive elements for actions like "Add to cart" or "View details."
• Badges or tags to indicate status (e.g., "In stock," "On sale").
• Layout components like stacks and grids to arrange content.

What you cannot render

• Arbitrary HTML or custom web components—the template must use the provided POS UI components.
• Nested lists—s-pos-list does not support nesting another list inside a row.
• Heavy media like videos or complex animations—these can degrade performance.
• Components that require asynchronous data fetching within the row template—data should be preloaded or fetched outside the list.

Keep row templates simple and lightweight. Avoid complex calculations or data transformations inside the template function; precompute any derived data before passing it to the list.

Handling large catalogues, search and pagination inside the list

When dealing with large catalogues, you need strategies to load data efficiently. s-pos-list works with an array of items, but you shouldn't load all items at once if the dataset is huge. Instead, implement pagination or infinite scrolling.

Pagination

Load a page of items (e.g., 50 at a time) and provide a "Load more" button at the end of the list. When clicked, fetch the next page and append to the existing array. s-pos-list will efficiently render the new items.

Infinite scrolling

Detect when the user scrolls near the bottom and automatically fetch the next page. This provides a seamless experience but requires careful handling to avoid duplicate requests. Use a loading indicator and a flag to prevent multiple simultaneous fetches.

Search

Include a search bar above the list. When the user types, filter the dataset. For large catalogues, perform server-side search via Shopify's APIs (e.g., Storefront API or Admin API) and update the list with results. Debounce the search input to avoid excessive requests.

Caching

Cache fetched pages in memory to avoid re-fetching when the user scrolls back. Implement a simple cache keyed by page number or search query.

Performance pitfalls and how to measure them on real hardware

Even with virtualization, performance issues can arise. Here are common pitfalls and how to avoid them.

Pitfalls

• Complex row templates: Each row should render quickly. Avoid heavy computations, large images, or many nested components.
• Frequent re-renders: If the list's data array changes frequently (e.g., due to real-time updates), the list may re-render often. Use stable keys and memoization where possible.
• Large images: Use appropriately sized images (thumbnails) and lazy loading if supported.
• Excessive event listeners: Attach listeners at the list level rather than per row when possible.
• Memory leaks: Clean up timers, subscriptions, and event listeners when the component unmounts.

Measurement

Test on actual POS hardware—not just a desktop browser. Use the browser's performance profiler (available via remote debugging) to record frame rates during scrolling. Look for dropped frames (jank) and long tasks. Aim for a consistent 60fps during scroll. Also monitor memory usage over time to detect leaks.

Shopify provides POS UI extension testing tools; use them to simulate various devices. Additionally, consider using the Performance API to log metrics from real devices in production (with user consent).

When a POS extension is the right build for a merchant

A POS extension is ideal when a merchant needs custom functionality directly within Shopify POS—for example, specialized product recommendations, loyalty program integration, or custom order workflows. If the merchant's needs can be met with existing apps or built-in features, an extension might be overkill.

Consider a POS extension when:

• The merchant requires a tailored interface for staff that integrates with their unique business processes.
• Off-the-shelf apps don't cover the specific workflow.
• The merchant is willing to invest in development and maintenance.

Before building, assess the merchant's hardware, network reliability, and staff technical proficiency. POS extensions should enhance efficiency, not add complexity.

If you're unsure whether a POS extension is right for your client, or need help building one, get in touch. We specialize in Shopify app development and can guide you through the process.

---

This article is based on the 2026-10 API documentation. Always refer to the official Shopify developer docs for the latest information.

Related reading

• Shopify POS UI Extension Development: What You Can Build
• Shopify POS UI Extension Cart Mutations: Fix Rejected Writes