December 2024: Support for 2,000 variants and combined listings

Welcome to our December release! As we wrap up the year, we're excited to bring you updates that expand product variant limits,optimize product page performance and support multiple pagination components. Let's dive into what's new:

Support for 2,000 Variants and Combined Listings

Hydrogen can now support up to 2,000 variants per product - a significant increase from the previous limit of 100. This enhancement is made possible by recent updates to the Storefront API, and we're making it easy for you to leverage with our new getProductOptions utility.

The utility simplifies the process of working with the expanded variant capacity whether you're dealing with complex product configurations, extensive color and size combinations, or intricate bundled offerings. See example usage in the Skeleton template’s new component.

Optimized Product Page Performance in Skeleton Template

We've made a significant improvement to the skeleton template's product page by leveraging the Storefront API's new product.selectedOrFirstAvailableVariant field. This update eliminates the need for an initial product page redirect, resulting in two key performance enhancements:

• Reduced server round trips: Visiting /products/{handle} now requires only one server hit instead of two.
• Improved link prefetching: Prefetching now caches actual content instead of just the redirect.

Additionally, we've updated the VariantSelector to accept an optional selectedVariant prop which sets default selected values when no URL params are provided on the initial page load.

Multiple <Pagination /> Support

We've addressed a limitation in our pagination functionality. Previously, only one <Pagination /> component could be supported on a page due to potential conflicts with cursor parameters in the URL. Now, we've introduced a namespace option that allows you to customize these URL params. This means you can now render multiple pagination components on the same page simultaneously, offering more versatile layout options for your product listings and collections.

Updates, optimizations, and fixes

• Accessibility improvements and DX polish in the Skeleton template (#2639, #2638, #2637, #2636)

Lastly, a huge shout out to @lb- for their contributions last month! We’re grateful for the community’s ongoing support.

To take advantage of all the latest features and improvements in Hydrogen, just run npx shopify hydrogen upgrade. That’s it for the December release — see you in January!