Products, collections and search

Product and listing UI receives prepared storefront resources. Use Liquid for visible cards and section layouts. Use the Theme SDK when developer-mode JavaScript needs typed views, route data or actions.

Product presentation

The product view can supply title, description, media, prices, currency, vendor, stock presentation, fulfillment kind, options, variants, selected variant, category, review summary and URL. Values remain empty when the store has not supplied them.

Use helpers such as createThemeProductPriceView, createThemeProductInventoryView, createThemeProductBadgeView, createThemeProductInformationView, createThemeProductVariantPickerView and createThemeProductQuickAddView to prepare consistent display state.

Use the approved product-purchase runtime and themeRuntimeProps.productAddToCart for shopper actions. Never decide inventory availability or a final price in browser code.

Collection and search helpers prepare filters, sorting, pagination, product cards and empty states. A page-width section must keep its filtering, sorting and product results inside the same intended layout boundary.

Use buildThemeProductUrl, buildThemeCollectionUrl and buildThemeSearchUrl for navigation. Do not copy internal route paths.

Missing media

Render a deliberate “No product media” placeholder or its accessible icon-only form when space is small. Do not render a broken image element.