--- title: useErrorScreen description: The useErrorScreen hook displays a full-screen blocking error UI. source_url: html: 'https://shopify.dev/docs/api/shop-minis/hooks/util/useerrorscreen' md: 'https://shopify.dev/docs/api/shop-minis/hooks/util/useerrorscreen.md' api_name: shop-minis --- # use​Error​Screen The `useErrorScreen` hook displays a full-screen blocking error UI. Use this for critical, unrecoverable errors that prevent users from continuing, such as missing required data or fatal API errors. The error screen takes over the entire Mini interface and typically requires user action to dismiss or retry. **Note:** Use `useErrorScreen` for critical failures that block the user workflow (e.g., authentication failures, data corruption, network timeouts that prevent the app from functioning). This provides a full-screen error UI that the user must acknowledge. Use `useErrorToast` for recoverable errors or informational warnings (e.g., failed to save preference, temporary network issues). This shows a non-blocking notification that auto-dismisses and allows users to continue their current task. ## use​Error​Screen() ### Returns * **UseErrorScreenReturns** ### UseErrorScreenReturns * showErrorScreen Show an error screen with the given error message. ```ts ShopActions ``` ### ShopActions ```ts { [K in keyof ShopActionEvents as SnakeToCamelCase]: ShopActionEvents[K] } ``` ### ShopActionEvents * ADD\_PRODUCT\_LIST ```ts ShopAction ``` * ADD\_PRODUCT\_LIST\_ITEM ```ts ShopAction ``` * ADD\_TO\_CART ```ts ShopAction ``` * BUY\_PRODUCT ```ts ShopAction ``` * BUY\_PRODUCTS ```ts ShopAction ``` * CHECK\_PERMISSION ```ts ShopAction ``` * CHECK\_SCOPES\_CONSENT ```ts ShopAction< CheckScopesConsentParams, {data: CheckScopesConsentResponse} > ``` * CLEAR\_INTERNAL\_PERSISTED\_ITEMS ```ts ShopAction ``` * CLEAR\_PERSISTED\_ITEMS ```ts ShopAction ``` * CLOSE\_MINI ```ts ShopAction ``` * COMPLETE\_IMAGE\_UPLOAD ```ts ShopAction< CompleteImageUploadParams, CompleteImageUploadResponse > ``` * CREATE\_CONTENT ```ts ShopAction ``` * CREATE\_IMAGE\_UPLOAD\_LINK ```ts ShopAction< CreateImageUploadLinkParams, CreateImageUploadLinkResponse > ``` * CREATE\_ORDER\_ATTRIBUTION ```ts ShopAction ``` * FAVORITE ```ts ShopAction ``` * FOLLOW\_SHOP ```ts ShopAction ``` * GENERATE\_USER\_TOKEN ```ts ShopAction ``` * GET\_ACCOUNT\_INFORMATION ```ts ShopAction< GetAccountInformationParams, GetAccountInformationResponse > ``` * GET\_ALL\_INTERNAL\_PERSISTED\_KEYS ```ts ShopAction ``` * GET\_ALL\_PERSISTED\_KEYS ```ts ShopAction ``` * GET\_BUYER\_ATTRIBUTES ```ts ShopAction< GetBuyerAttributesParams, GetBuyerAttributesResponse > ``` * GET\_CONTENT ```ts ShopAction ``` * GET\_CURRENT\_USER ```ts ShopAction ``` * GET\_DEEPLINK\_PATHS ```ts ShopAction ``` * GET\_FOLLOWED\_SHOPS ```ts ShopAction< GetFollowedShopsParams, GetFollowedShopsResponse > ``` * GET\_INTERNAL\_PERSISTED\_ITEM ```ts ShopAction< GetAsyncStorageItemParams, string | null > ``` * GET\_ORDERS ```ts ShopAction ``` * GET\_PERSISTED\_ITEM ```ts ShopAction ``` * GET\_POPULAR\_PRODUCTS ```ts ShopAction< GetPopularProductsParams, GetPopularProductsResponse > ``` * GET\_PRODUCT ```ts ShopAction ``` * GET\_PRODUCT\_LIST ```ts ShopAction ``` * GET\_PRODUCT\_LISTS ```ts ShopAction ``` * GET\_PRODUCT\_MEDIA ```ts ShopAction ``` * GET\_PRODUCT\_REVIEWS ```ts ShopAction< GetProductReviewsParams, GetProductReviewsResponse > ``` * GET\_PRODUCT\_SEARCH ```ts ShopAction< GetProductSearchParams, GetProductSearchResponse > ``` * GET\_PRODUCT\_VARIANTS ```ts ShopAction< GetProductVariantsParams, GetProductVariantsResponse > ``` * GET\_PRODUCTS ```ts ShopAction ``` * GET\_RECENT\_PRODUCTS ```ts ShopAction< GetRecentProductsParams, GetRecentProductsResponse > ``` * GET\_RECENT\_SHOPS ```ts ShopAction ``` * GET\_RECOMMENDED\_PRODUCTS ```ts ShopAction< GetRecommendedProductsParams, GetRecommendedProductsResponse > ``` * GET\_RECOMMENDED\_SHOPS ```ts ShopAction< GetRecommendedShopsParams, GetRecommendedShopsResponse > ``` * GET\_SAVED\_PRODUCTS ```ts ShopAction< GetSavedProductsParams, GetSavedProductsResponse > ``` * GET\_SECRET ```ts ShopAction ``` * GET\_SHOP ```ts ShopAction ``` * GET\_SHOP\_APP\_INFORMATION ```ts ShopAction ``` * GET\_SHOPS\_WITH\_DISCOUNTS ```ts ShopAction< GetShopsWithDiscountsParams, GetShopsWithDiscountsResponse > ``` * GET\_SIMILAR\_PRODUCTS ```ts ShopAction< GetSimilarProductsParams, GetSimilarProductsResponse > ``` * INVOKE\_INTENT ```ts ShopAction ``` * NAVIGATE\_TO\_CART ```ts ShopAction ``` * NAVIGATE\_TO\_CHECKOUT ```ts ShopAction ``` * NAVIGATE\_TO\_DEEPLINK ```ts ShopAction ``` * NAVIGATE\_TO\_ORDER ```ts ShopAction ``` * NAVIGATE\_TO\_PRODUCT ```ts ShopAction ``` * NAVIGATE\_TO\_SHOP ```ts ShopAction ``` * PREVIEW\_PRODUCT\_IN\_AR ```ts ShopAction ``` * PRODUCT\_RECOMMENDATION\_CLICK ```ts ShopAction< ProductRecommendationClickParams, void > ``` * PRODUCT\_RECOMMENDATION\_IMPRESSION ```ts ShopAction< ProductRecommendationImpressionParams, void > ``` * REMOVE\_INTERNAL\_PERSISTED\_ITEM ```ts ShopAction ``` * REMOVE\_PERSISTED\_ITEM ```ts ShopAction ``` * REMOVE\_PRODUCT\_LIST ```ts ShopAction ``` * REMOVE\_PRODUCT\_LIST\_ITEM ```ts ShopAction ``` * REMOVE\_SECRET ```ts ShopAction ``` * RENAME\_PRODUCT\_LIST ```ts ShopAction ``` * REPORT\_CONTENT\_IMPRESSION ```ts ShopAction ``` * REPORT\_ERROR ```ts ShopAction ``` * REPORT\_FETCH ```ts ShopAction ``` * REPORT\_IMPRESSION ```ts ShopAction ``` * REPORT\_INTERACTION ```ts ShopAction ``` * REQUEST\_PERMISSION ```ts ShopAction< RequestPermissionParams, RequestPermissionResponse > ``` * REQUEST\_SCOPES\_CONSENT ```ts ShopAction ``` * RESOLVE\_INTENT ```ts ShopAction ``` * SEARCH\_PRODUCTS\_BY\_SHOP ```ts ShopAction< SearchProductsByShopParams, SearchProductsByShopResponse > ``` * SET\_INTERNAL\_PERSISTED\_ITEM ```ts ShopAction ``` * SET\_PERSISTED\_ITEM ```ts ShopAction ``` * SET\_PRODUCT\_LIST\_VISIBILITY ```ts ShopAction< SetProductListVisibilityParams, ProductList > ``` * SET\_SECRET ```ts ShopAction ``` * SHARE ```ts ShopAction ``` * SHARE\_SINGLE ```ts ShopAction ``` * SHOW\_ERROR\_SCREEN ```ts ShopAction ``` * SHOW\_ERROR\_TOAST ```ts ShopAction ``` * SHOW\_FEEDBACK\_SHEET ```ts ShopAction ``` * TRANSLATE\_CONTENT\_DOWN ```ts ShopAction ``` * TRANSLATE\_CONTENT\_UP ```ts ShopAction ``` * UNFAVORITE ```ts ShopAction ``` * UNFOLLOW\_SHOP ```ts ShopAction ``` ### ShopAction A generic type representing any action in ShopActions. - N: The name of the action (string literal type) - P: The params type for the action - R: The result type for the action * params ```ts P ``` returns ```ts Promise> ``` ### ShopActionResult ```ts ShopActionOk | ShopActionError ``` ### ShopActionOk * data ```ts T ``` * mocked ```ts boolean ``` * ok ```ts true ``` ### ShopActionError * error ```ts Error & { code?: string; } ``` * mocked ```ts boolean ``` * ok ```ts false ``` ### AddProductListParams * description A description of the product list. ```ts string ``` * name The name of the product list. ```ts string ``` * privacyStatus The privacy status of the product list. Defaults to 'PRIVATE'. ```ts ProductListPrivacyStatus ``` ### ProductListPrivacyStatus ```ts 'PRIVATE' | 'PUBLIC' ``` ### ProductList * id ```ts string ``` * name ```ts string | null ``` * privacyStatus ```ts ProductListPrivacyStatus ``` * products ```ts Product[] ``` * publicId ```ts string | null ``` ### Product * compareAtPrice ```ts Money | null ``` * defaultVariantId ```ts string ``` * featuredImage ```ts ProductImage | null ``` * id ```ts string ``` * isFavorited ```ts boolean ``` * options The product's configurable options (e.g. Color, Size). Optional for backwards compatibility with products returned by older Shop app hosts; treat as \`\[]\` when undefined. ```ts ProductOption[] ``` * price ```ts Money ``` * referral ```ts boolean ``` * reviewAnalytics ```ts { averageRating?: number; reviewCount?: number; } ``` * selectedVariant ```ts ProductVariant ``` * shop ```ts ProductShop ``` * title ```ts string ``` * variants ```ts ProductVariant[] ``` ### Money * amount ```ts Decimal ``` * currencyCode ```ts CurrencyCode ``` ### Decimal ```ts string ``` ### CurrencyCode ```ts 'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BYR' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JEP' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KID' | 'KMF' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LTL' | 'LVL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STD' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VED' | 'VEF' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' ``` ### ProductImage * altText ```ts string | null ``` * height ```ts number | null ``` * id ```ts string | null ``` * sensitive ```ts boolean | null ``` * thumbhash ```ts string | null ``` * url ```ts string ``` * width ```ts number | null ``` ### ProductOption A configurable product option (e.g. Color, Size) and the set of values it accepts across all variants. * id Globally-unique identifier for the option. ```ts string ``` * name The display name of the option. E.g. \`Color\`. ```ts string ``` * values All possible values for the option across variants. E.g. \`\['Red', 'Blue']\`. ```ts string[] ``` ### ProductVariant * availableForSale Whether the variant can be purchased. When \`false\`, calls to add the variant to cart or buy it through the SDK will fail. UI should be gated on this flag. May be \`undefined\` if the variant was sourced from an API that does not expose stock state. ```ts boolean ``` * compareAtPrice ```ts Money | null ``` * id ```ts string ``` * image ```ts ProductImage | null ``` * isFavorited ```ts boolean ``` * price ```ts Money ``` * selectedOptions The (name, value) pairs of product options this variant corresponds to. E.g. \`\[{name: 'Color', value: 'Green'}, {name: 'Size', value: 'M'}]\`. Optional for backwards compatibility with variants returned by older Shop app hosts; treat as \`\[]\` when undefined. ```ts ProductSelectedOption[] ``` * title ```ts string ``` ### ProductSelectedOption A single (name, value) pair that identifies which value of a product option a variant corresponds to. E.g. \`{name: 'Color', value: 'Green'}\`. * name ```ts string ``` * value ```ts string ``` ### ProductShop * id ```ts string ``` * name ```ts string ``` ### AddProductListItemParams * listId The GID of the product list. E.g. \`gid://shopapp/ProductList/123\`. This will soon be deprecated in favor of just \`publicListId\`. ```ts string ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the product variant. E.g. \`gid://shopify/ProductVariant/101\`. ```ts string ``` * publicListId The public ID of the product list. ```ts string ``` * shopId The GID of the shop. E.g. \`gid://shopify/Shop/42\`. ```ts string ``` ### AddToCartParams * attribution Attribution data for the line item. ```ts LineItemAttribution ``` * discountCodes The discount codes to apply to the cart. ```ts string[] ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the product variant. E.g. \`gid://shopify/ProductVariant/456\`. ```ts string ``` * quantity The quantity of the product to add to the cart. ```ts number ``` * variantImageUrl The URL of the variant image. ```ts string ``` ### LineItemAttribution * sourceIdentifier ```ts string ``` * sourceName ```ts string ``` ### BuyProductParams * attribution Attribution data for the line item. ```ts LineItemAttribution ``` * discountCode The discount code to apply to the product. ```ts string ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the product variant. E.g. \`gid://shopify/ProductVariant/456\`. ```ts string ``` * quantity The quantity of the product to add to the cart. ```ts number ``` ### BuyProductsParams * attribution ```ts LineItemAttribution ``` * discountCode ```ts string ``` * items ```ts [BuyProductLineItem, ...BuyProductLineItem[]] ``` ### BuyProductLineItem * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the product variant. E.g. \`gid://shopify/ProductVariant/456\`. ```ts string ``` * quantity The quantity of the product to add to the cart. ```ts number ``` ### CheckPermissionParams * permission ```ts MiniPermission ``` ### MiniPermission ```ts 'CAMERA' | 'MICROPHONE' | 'MOTION' ``` ### CheckPermissionResponse * errorMessage ```ts string ``` * status ```ts PermissionStatus ``` ### PermissionStatus The current state of a permission for the Mini. - \`granted\`: The user has approved the in-app consent dialog and the OS has granted the permission. - \`denied\`: The user has previously denied the permission, either in the in-app consent dialog or at the OS level. The permission can still be requested again. - \`blocked\`: The permission is blocked at the OS level. The user must enable it from device settings. - \`undetermined\`: The user has not yet been shown the in-app consent dialog for this permission. - \`unavailable\`: The permission is not declared in the Mini's manifest, or the feature is not available on this device. ```ts 'granted' | 'denied' | 'blocked' | 'undetermined' | 'unavailable' ``` ### CheckScopesConsentParams * fetchPolicy ```ts DataHookFetchPolicy ``` ### DataHookFetchPolicy ```ts 'cache-first' | 'network-only' ``` ### CheckScopesConsentResponse * grantedScopes ```ts string[] ``` * requiredScopes ```ts string[] ``` * status ```ts 'granted' | 'partially_granted' | 'not_granted' ``` ### CompleteImageUploadParams * resourceUrls ```ts string[] ``` ### CompleteImageUploadResponse * error ```ts string ``` * files ```ts { id: string; fileStatus: "FAILED" | "PENDING" | "PROCESSING" | "READY"; image?: { url: string; }; }[] ``` ### CreateContentParams * description ```ts string ``` * externalId ```ts string ``` * imageUrl ```ts string ``` * productIds ```ts string[] ``` * title ```ts string ``` * visibility ```ts ContentVisibility[] | null ``` ### ContentVisibility ```ts 'DISCOVERABLE' | 'LINKABLE' ``` ### CreateContentResponse * data ```ts Content ``` * userErrors ```ts ContentCreateUserErrors[] ``` ### Content * description ```ts string | null ``` * externalId ```ts string | null ``` * image ```ts ContentImage ``` * products ```ts ContentProduct[] | null ``` * publicId ```ts string ``` * shareableUrl ```ts string | null ``` * status ```ts MinisContentStatus | null ``` * title ```ts string ``` * visibility ```ts ContentVisibility[] ``` ### ContentImage * altText ```ts string | null ``` * height ```ts number | null ``` * id ```ts string | null ``` * thumbhash ```ts string | null ``` * url ```ts string ``` * width ```ts number | null ``` ### ContentProduct * featuredImage ```ts ContentImage | null ``` * id ```ts string ``` * title ```ts string ``` ### MinisContentStatus * PENDING ```ts PENDING ``` * READY ```ts READY ``` * REJECTED ```ts REJECTED ``` ### ContentCreateUserErrors * code ```ts ContentCreateUserErrorCode ``` * message ```ts string ``` ### ContentCreateUserErrorCode * DUPLICATE\_EXTERNAL\_ID ```ts DUPLICATE_EXTERNAL_ID ``` * INELIGIBLE\_PRODUCTS ```ts INELIGIBLE_PRODUCTS ``` ### CreateImageUploadLinkParams * input ```ts { mimeType: string; fileSize: number; }[] ``` ### CreateImageUploadLinkResponse * error ```ts string ``` * targets ```ts UploadTarget[] ``` ### UploadTarget * parameters ```ts { name: string; value: string; }[] ``` * resourceUrl ```ts string ``` * url ```ts string ``` ### CreateOrderAttributionParams * attribution ```ts LineItemAttribution ``` * orderId ```ts string ``` * productVariantId ```ts string ``` ### FavoriteParams * productId ```ts string ``` * productVariantId ```ts string ``` * shopId ```ts string ``` ### FollowShopParams * shopId ```ts string ``` ### GenerateUserTokenResponse * data ```ts GeneratedTokenData ``` * userErrors ```ts UserTokenGenerateUserErrors[] ``` ### GeneratedTokenData * expiresAt The expiration time of the token. ```ts ISO8601DateTime | null ``` * token A temporary token for the user. ```ts string | null ``` * userState Whether the user is verified or a guest. ```ts UserState | null ``` ### ISO8601DateTime ```ts string ``` ### UserState * GUEST ```ts GUEST ``` * VERIFIED ```ts VERIFIED ``` ### UserTokenGenerateUserErrors * code ```ts UserTokenGenerateUserErrorCode ``` * field ```ts string[] | null ``` * message ```ts string ``` ### UserTokenGenerateUserErrorCode * MINI\_NOT\_FOUND ```ts MINI_NOT_FOUND ``` * USER\_NOT\_FOUND ```ts USER_NOT_FOUND ``` ### GetAccountInformationParams * shopId To use user account information, a shopId must be given to track on which shop's behalf user information is being accessed ```ts string ``` * type ```ts 'email' | 'name' | 'phone' ``` ### GetAccountInformationResponse * status ```ts 'available' | 'not-available' ``` * value ```ts string | AccountInformationPhoneInfo ``` ### AccountInformationPhoneInfo * countryCode ```ts string ``` * phoneNumber ```ts string ``` * prefix ```ts string ``` ### GetBuyerAttributesParams * fetchPolicy ```ts DataHookFetchPolicy ``` ### GetBuyerAttributesResponse * data ```ts { genderAffinity?: Gender; categoryAffinities: TaxonomyCategory[]; } ``` ### Gender ```ts 'MALE' | 'FEMALE' | 'NEUTRAL' ``` ### TaxonomyCategory * ancestors ```ts TaxonomyCategory[] ``` * id ```ts string ``` * name ```ts string ``` ### GetContentParams * fetchPolicy ```ts DataHookFetchPolicy ``` * identifiers ```ts ContentIdentifierInput | ContentIdentifierInput[] ``` ### ContentIdentifierInput * externalId ```ts string | null ``` * publicId ```ts string | null ``` ### GetContentResponse * data ```ts Content[] ``` ### GetCurrentUserParams * fetchPolicy ```ts DataHookFetchPolicy ``` ### GetCurrentUserResponse * data ```ts UserProfile ``` ### UserProfile * avatarImage ```ts { url: string } | null ``` * displayName ```ts string | null ``` ### GetDeeplinkPathsResponse * matchers ```ts string[] ``` ### GetFollowedShopsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetFollowedShopsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### PaginationInfo * endCursor ```ts string | null ``` * hasNextPage ```ts boolean ``` ### GetAsyncStorageItemParams * key ```ts string ``` ### GetOrdersParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetOrdersResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetPopularProductsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetPopularProductsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductParams * fetchPolicy ```ts DataHookFetchPolicy ``` * id ```ts string ``` ### GetProductResponse * data ```ts Product ``` ### GetProductListParams * after The cursor to fetch the next page of items. ```ts string ``` * fetchPolicy The fetch policy to use. ```ts DataHookFetchPolicy ``` * first The number of items to fetch. ```ts number ``` * id The GID of the product list. E.g. \`gid://shopapp/ProductList/123\`. ```ts string ``` * publicId The public ID of the product list. ```ts string ``` ### GetProductListResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductListsParams * after The cursor to fetch the next page of lists. ```ts string ``` * fetchPolicy The fetch policy to use. ```ts DataHookFetchPolicy ``` * first The number of lists to fetch. ```ts number ``` * itemsFirst The number of items per list to fetch. ```ts number ``` ### GetProductListsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductMediaParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` * id ```ts string ``` ### GetProductMediaResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductReviewsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` * id ```ts string ``` ### GetProductReviewsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductSearchParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * filters ```ts ProductFilters ``` * first ```ts number ``` * includeSensitive ```ts boolean ``` * query ```ts string ``` * sortBy ```ts ProductSearchSortBy ``` ### ProductFilters * apparelSize ```ts ProductApparelSizeFilter[] ``` * available ```ts boolean ``` * category ```ts string[] ``` * color ```ts ProductColorFilter[] ``` * gender ```ts 'MALE' | 'FEMALE' | 'NEUTRAL' ``` * includeShopIds ```ts string[] ``` * minimumRating ```ts number ``` * price ```ts { min?: number; max?: number; } ``` * shoeSize ```ts ProductShoeSizeFilter[] ``` ### ProductApparelSizeFilter ```ts 'SIZE_3XL' | 'SIZE_4XL' | 'SIZE_5XL' | 'SIZE_L' | 'SIZE_M' | 'SIZE_S' | 'SIZE_XL' | 'SIZE_XS' | 'SIZE_XXL' | 'SIZE_XXS' ``` ### ProductColorFilter ```ts 'BEIGE' | 'BLACK' | 'BLUE' | 'BROWN' | 'GOLD' | 'GREEN' | 'GREY' | 'NAVY' | 'ORANGE' | 'PINK' | 'PURPLE' | 'RED' | 'SILVER' | 'WHITE' | 'YELLOW' ``` ### ProductShoeSizeFilter ```ts 'SIZE_4' | 'SIZE_4_5' | 'SIZE_5' | 'SIZE_5_5' | 'SIZE_6' | 'SIZE_6_5' | 'SIZE_7' | 'SIZE_7_5' | 'SIZE_8' | 'SIZE_8_5' | 'SIZE_9' | 'SIZE_9_5' | 'SIZE_10' | 'SIZE_10_5' | 'SIZE_11' | 'SIZE_11_5' | 'SIZE_12' | 'SIZE_12_5' | 'SIZE_13' | 'SIZE_13_5' | 'SIZE_14' | 'SIZE_14_5' | 'SIZE_15' ``` ### ProductSearchSortBy ```ts 'MOST_RECENT' | 'PRICE_HIGH_TO_LOW' | 'PRICE_LOW_TO_HIGH' | 'RELEVANCE' ``` ### GetProductSearchResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductVariantsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` * id ```ts string ``` ### GetProductVariantsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetProductsParams * fetchPolicy ```ts DataHookFetchPolicy ``` * ids ```ts string[] ``` ### GetProductsResponse * data ```ts Product[] ``` ### GetRecentProductsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` * includeSensitive ```ts boolean ``` ### GetRecentProductsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetRecentShopsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetRecentShopsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetRecommendedProductsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetRecommendedProductsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetRecommendedShopsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetRecommendedShopsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetSavedProductsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` * includeSensitive ```ts boolean ``` ### GetSavedProductsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetShopParams * fetchPolicy ```ts DataHookFetchPolicy ``` * id ```ts string ``` ### GetShopResponse * data ```ts Shop ``` ### Shop * id ```ts string ``` * isFollowing ```ts boolean | null ``` * logoImage ```ts ProductImage | null ``` * name ```ts string ``` * primaryDomain ```ts { url: string; } ``` * reviewAnalytics ```ts { averageRating?: number; reviewCount: number; } ``` * shareUrl ```ts string | null ``` * visualTheme ```ts VisualTheme | null ``` ### VisualTheme * brandSettings ```ts BrandSettings | null ``` * description ```ts string | null ``` * featuredImages ```ts ImageType[] ``` * id ```ts string ``` * logoImage ```ts ImageType | null ``` ### BrandSettings * colors ```ts ColorTheme | null ``` * headerTheme ```ts HeaderTheme | null ``` * id ```ts string ``` * logos ```ts LogoTheme | null ``` ### ColorTheme * coverDominant ```ts string | null ``` * id ```ts string ``` * logoAverage ```ts string | null ``` * logoDominant ```ts string | null ``` * primary ```ts string | null ``` * secondary ```ts string | null ``` * secondaryText ```ts string | null ``` * statusBarStyle ```ts string | null ``` ### HeaderTheme * coverImage ```ts ImageType | null ``` * endingScrimColor ```ts string | null ``` * id ```ts string ``` * startingScrimColor ```ts string | null ``` * thumbnailImage ```ts ImageType | null ``` * videoUrl ```ts string | null ``` * wordmark ```ts ImageType | null ``` ### ImageType * altText ```ts string | null ``` * height ```ts number | null ``` * sensitive ```ts boolean ``` * thumbhash ```ts string | null ``` * url ```ts string ``` * width ```ts number | null ``` ### LogoTheme * id ```ts string ``` * logoImage ```ts ImageType | null ``` ### GetShopAppInformationResponse * appVersion ```ts string ``` * buildId ```ts string ``` * buildNumber ```ts string ``` ### GetShopsWithDiscountsParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` ### GetShopsWithDiscountsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### GetSimilarProductsParams * after Cursor for pagination. Currently the backend returns only a first page, so this is effectively unused. ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first Number of products to return. Must be 1..10. ```ts number ``` * similarTo Source for similar product search. Exactly one of \`productId\`, \`productVariantId\`, or \`media\` must be set. ```ts GetSimilarProductsSourceInput ``` ### GetSimilarProductsSourceInput The source for similar product search. Exactly one of \`productId\`, \`productVariantId\`, or \`media\` must be provided. * media JPEG image media to find similar products for. ```ts GetSimilarProductsMediaInput ``` * productId Shopify Product GID, e.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId Shopify ProductVariant GID, e.g. \`gid://shopify/ProductVariant/456\`. ```ts string ``` ### GetSimilarProductsMediaInput Image media used as the source for similar product search. The hook handles base64 encoding from a File — partners pass a File directly, not the encoded payload. * base64 The base64-encoded image content (without \`data:\` prefix). Must be <= 4 MiB. ```ts string ``` * contentType The image MIME type. Currently only \`image/jpeg\` is supported. ```ts string ``` ### GetSimilarProductsResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### InvokeIntentParams Params for the INVOKE\_INTENT shop action. * action Verb describing the operation (e.g., 'create', 'edit', 'view') ```ts string ``` * data Optional JSON-serializable input payload ```ts TData ``` * type MIME-type identifier for the target resource (e.g., 'shop/UserImage') ```ts string ``` * value Optional identifier (e.g. a resource GID) for an existing resource ```ts string ``` ### InvokeIntentResponse Untyped intent response used at the INVOKE\_INTENT bridge boundary. ```ts IntentResult ``` ### IntentResult Discriminated union of all possible intent completion outcomes. - \`'ok'\` — workflow completed successfully with typed result data - \`'error'\` — workflow failed with a message - \`'closed'\` — user dismissed without completing ```ts IntentResultOk | IntentResultError | IntentResultClosed ``` ### IntentResultOk Successful intent completion. \`data\` follows the declared response type: \`void\` → omitted, concrete shape → required, untyped (\`unknown\`) → optional. ```ts unknown extends T ? {code: 'ok'; data?: T} : [T] extends [void] ? {code: 'ok'} : {code: 'ok'; data: T} ``` ### IntentResultError * code ```ts 'error' ``` * message ```ts string ``` ### IntentResultClosed * code ```ts 'closed' ``` ### NavigateToCheckoutParams * shopId The GID of the shop. E.g. \`gid://shopify/Shop/123\`. ```ts string ``` ### NavigateToDeeplinkParams * deeplink ```ts string ``` ### NavigateToOrderParams * orderId The GID of the order. E.g. \`gid://shopify/Order/123\`. ```ts string ``` ### NavigateToProductParams * attribution ```ts LineItemAttribution ``` * discountCode The discount code to apply to the product. ```ts string ``` * includedProductVariantGIDs ```ts string[] ``` * includedProductVariantIds ```ts string[] ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId If present, the GID of the variant that should be initially selected ```ts string ``` ### NavigateToShopParams * shopId ```ts string ``` ### PreviewProductInARParams * fetchPolicy ```ts DataHookFetchPolicy ``` * id ```ts string ``` ### ProductRecommendationClickParams * attribution ```ts LineItemAttribution ``` * discountCode ```ts string ``` * productId ```ts string ``` * productVariantId ```ts string ``` * sectionId ```ts string ``` * variantGIDs ```ts string[] ``` ### ProductRecommendationImpressionParams * productId ```ts string ``` * sectionId ```ts string ``` ### RemoveAsyncStorageItemParams * key ```ts string ``` ### RemoveProductListParams * id The GID of the product list. E.g. \`gid://shopapp/ProductList/123\`. ```ts string ``` ### RemoveProductListItemParams * listId The GID of the product list. E.g. \`gid://shopapp/ProductList/123\`. This will soon be deprecated in favor of just \`publicListId\`. ```ts string ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the product variant. E.g. \`gid://shopify/ProductVariant/101\`. ```ts string ``` * publicListId The public ID of the product list. ```ts string ``` * shopId The GID of the shop. E.g. \`gid://shopify/Shop/42\`. ```ts string ``` ### RenameProductListParams * id The GID of the product list. E.g. \`gid://shopapp/ProductList/123\`. ```ts string ``` * name The new name of the product list. ```ts string ``` ### ReportContentImpressionParams * pageValue ```ts string ``` * publicId ```ts string ``` ### ReportErrorParams Parameters for reporting JavaScript errors that occur in the webview. This captures detailed error information to help with debugging and monitoring. * additionalContext Additional context about the error (e.g., user actions, state, etc.) ```ts {[key: string]: any} ``` * message The error message ```ts string ``` * stack The stack trace of the error ```ts string ``` ### ReportFetchParams Parameters for reporting fetch calls made in the webview. This captures network request details for observability. * duration Duration of the request in milliseconds ```ts number ``` * error Error message if the request failed ```ts string ``` * method The HTTP method used (GET, POST, etc.) ```ts string ``` * status The HTTP status code of the response (0 for network errors) ```ts number ``` * success Whether the request was successful (response.ok) ```ts boolean ``` * timestamp Timestamp when the request completed ```ts number ``` * url The URL that was fetched ```ts string ``` ### ReportImpressionParams * pageValue ```ts string ``` * subjectId ```ts string ``` * subjectType ```ts string ``` ### ReportInteractionParams * interactionType ```ts string ``` * interactionValue ```ts string ``` * pageValue ```ts string ``` ### RequestPermissionParams * permission ```ts MiniPermission ``` ### RequestPermissionResponse * errorMessage ```ts string ``` * granted ```ts boolean ``` ### RequestScopesConsentResponse * granted ```ts boolean ``` ### ResolveIntentParams Params for the RESOLVE\_INTENT shop action. \`result\` is loose at the bridge; the typed correlation between \`intentKey\` and \`result.data\` is enforced by the \`useResolveIntent\` hook, where K is concrete. * intentKey Lets the host verify the Mini resolved the intent it was launched with. ```ts IntentKey ``` * result ```ts IntentResult ``` ### IntentKey ```ts keyof IntentDefinitions ``` ### IntentDefinitions * addToCartProductVariant ```ts { action: "add_to_cart"; type: "shopify/ProductVariant"; data: AddToCartProductVariantParams; result: AddToCartProductVariantResult; } ``` * buyNowProductVariant ```ts { action: "buy_now"; type: "shopify/ProductVariant"; data: BuyNowProductVariantParams; result: BuyNowProductVariantResult; } ``` * createUserImage ```ts { action: "create"; type: "shop/UserImage"; data: CreateUserImageParams; result: ImageUrlResponse; } ``` * selectProductVariant ```ts { action: "select"; type: "shopify/ProductVariant"; data: SelectProductVariantParams; result: SelectProductVariantResult; } ``` * tryOnProduct ```ts { action: "try_on"; type: "shopify/Product"; data: TryOnProductParams; result: ImageUrlResponse; } ``` ### AddToCartProductVariantParams Data payload for the \`add\_to\_cart:shopify/ProductVariant\` intent. Adds a variant to the user's cart. If \`productVariantId\` is omitted (or \`forceShow\` is \`true\`), the host opens the same native variant selector sheet as \`select:shopify/ProductVariant\` first — the user picks a variant and quantity, and the host then performs the add-to-cart on confirm. For products outside Shop's catalog (referral products), the host navigates the user to the product's PDP instead of adding to cart. * discountCodes Discount codes to apply to the cart when adding. ```ts string[] ``` * forceShow When \`true\`, always render the sheet — even for products with a single variant or when \`productVariantId\` is supplied. Bypasses the single-variant short-circuit so the mini gets a consistent confirmation step. Defaults to \`false\`. ```ts boolean ``` * includedProductVariantGIDs Optional allow-list of variant GIDs. When set, only these variants are presented to the user. Other variants are filtered out before the option tree is built. Ignored when \`productVariantId\` is supplied. ```ts string[] ``` * initialQuantity Initial quantity displayed in the stepper. Defaults to \`quantity ?? 1\`. ```ts number ``` * initialVariantId If present, the GID of the variant that should be initially highlighted in the sheet. Defaults to the product's default variant. Ignored when \`productVariantId\` is supplied. ```ts string ``` * maxQuantity Maximum quantity selectable in the stepper. Defaults to the variant's \`quantityAvailable\` (or unbounded when stock is not tracked). ```ts number ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the variant to add. When provided, the host adds it directly without showing the sheet. Omit to let the user pick. ```ts string ``` * quantity Quantity to add. Defaults to \`1\`. ```ts number ``` * showQuantity Whether to show the quantity stepper. Defaults to \`true\`. ```ts boolean ``` ### AddToCartProductVariantResult Successful payload returned from \`add\_to\_cart:shopify/ProductVariant\`. Discriminate via \`data.outcome\`: - \`'added\_to\_cart'\` — a concrete variant was added; selection fields (\`productVariantId\`, \`quantity\`, \`source\`) are present. - \`'navigated\_to\_product'\` — the user tapped the sheet's product header and the host took them to the PDP. The cart was not modified. - \`'redirected\_to\_product'\` — the host could not add this product (e.g. referral product on another merchant's storefront) and redirected the user to the PDP. Only \`productId\` is present. ```ts AddToCartAddedResult | AddToCartNavigatedToProductResult | AddToCartRedirectedToProductResult ``` ### AddToCartAddedResult Variant added to the cart by \`add\_to\_cart:shopify/ProductVariant\`. * outcome Discriminator. The host added a concrete variant to the cart. ```ts 'added_to_cart' ``` * productVariantId The GID of the variant the user picked. ```ts string ``` * quantity The quantity the user chose in the stepper. \`1\` when the stepper is hidden. ```ts number ``` * source Indicates whether the user actively picked a variant in the sheet (\`'user'\`) or whether the host resolved the selection automatically without showing UI (\`'auto'\`). \`'auto'\` is returned when the product has a single selectable variant and \`forceShow\` is \`false\` (the default). \`'user'\` is returned in every other success case — i.e. the sheet was rendered and the user tapped the CTA. ```ts 'auto' | 'user' ``` * variant The full variant the user picked. ```ts ProductVariant ``` ### AddToCartNavigatedToProductResult Returned when the user tapped the sheet's product header to view the PDP instead of adding to cart. The sheet is dismissed and the user is now on the PDP. * outcome Discriminator. The user navigated to the PDP from the sheet. ```ts 'navigated_to_product' ``` * productId GID of the product the host navigated to. ```ts string ``` * productVariantId GID of the variant that was highlighted when the user tapped to navigate. The PDP opens scoped to this variant. ```ts string ``` ### AddToCartRedirectedToProductResult Returned when the product cannot be added to the cart from the mini (e.g. referral products outside Shop's catalog) and the host instead redirected the user to the product's PDP. The mini should treat this as a successful hand-off — the cart was not modified but the shopper is now on the PDP. * outcome Discriminator. The host redirected the user to the PDP instead. ```ts 'redirected_to_product' ``` * productId GID of the product the host redirected to. ```ts string ``` ### BuyNowProductVariantParams Data payload for the \`buy\_now:shopify/ProductVariant\` intent. Sends the user to express checkout for a variant, bypassing the cart. If \`productVariantId\` is omitted (or \`forceShow\` is \`true\`), the host opens the same native variant selector sheet as the other variant intents — the user picks a variant and quantity, and the host then creates the checkout on confirm. For products outside Shop's catalog (referral products), the host navigates the user to the product's PDP instead. * discountCode Discount code to apply to the checkout. ```ts string ``` * forceShow When \`true\`, always render the sheet — even for single-variant products or when \`productVariantId\` is supplied. Defaults to \`false\`. ```ts boolean ``` * includedProductVariantGIDs Allow-list of variant GIDs surfaced in the sheet. ```ts string[] ``` * initialQuantity Initial quantity in the stepper. Defaults to \`quantity ?? 1\`. ```ts number ``` * initialVariantId Variant initially highlighted in the picker. ```ts string ``` * maxQuantity Max quantity selectable in the stepper. ```ts number ``` * productId The GID of the product. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * productVariantId The GID of the variant to buy. When provided, the host creates the checkout directly without showing the sheet. Omit to let the user pick. ```ts string ``` * quantity Quantity to buy. Defaults to \`1\`. ```ts number ``` * showQuantity Whether to show the quantity stepper. Defaults to \`true\`. ```ts boolean ``` ### BuyNowProductVariantResult Successful payload returned from \`buy\_now:shopify/ProductVariant\`. Discriminate via \`data.outcome\`: - \`'checkout\_opened'\` — express checkout opened for a concrete variant; selection fields (\`productVariantId\`, \`quantity\`, \`source\`) are present. - \`'navigated\_to\_product'\` — the user tapped the sheet's product header and the host took them to the PDP. No checkout was created. - \`'redirected\_to\_product'\` — the host could not buy this product (e.g. referral product on another merchant's storefront) and redirected the user to the PDP. Only \`productId\` is present. ```ts BuyNowCheckoutOpenedResult | BuyNowNavigatedToProductResult | BuyNowRedirectedToProductResult ``` ### BuyNowCheckoutOpenedResult Checkout opened for a concrete variant by \`buy\_now:shopify/ProductVariant\`. * outcome Discriminator. The host opened express checkout for a variant. ```ts 'checkout_opened' ``` * productVariantId The GID of the variant the user picked. ```ts string ``` * quantity The quantity the user chose in the stepper. \`1\` when the stepper is hidden. ```ts number ``` * source Indicates whether the user actively picked a variant in the sheet (\`'user'\`) or whether the host resolved the selection automatically without showing UI (\`'auto'\`). \`'auto'\` is returned when the product has a single selectable variant and \`forceShow\` is \`false\` (the default). \`'user'\` is returned in every other success case — i.e. the sheet was rendered and the user tapped the CTA. ```ts 'auto' | 'user' ``` * variant The full variant the user picked. ```ts ProductVariant ``` ### BuyNowNavigatedToProductResult Returned when the user tapped the sheet's product header to view the PDP instead of going to checkout. The sheet is dismissed and the user is now on the PDP. * outcome Discriminator. The user navigated to the PDP from the sheet. ```ts 'navigated_to_product' ``` * productId GID of the product the host navigated to. ```ts string ``` * productVariantId GID of the variant that was highlighted when the user tapped to navigate. The PDP opens scoped to this variant. ```ts string ``` ### BuyNowRedirectedToProductResult Returned when the product cannot be bought from the mini (e.g. referral products outside Shop's catalog) and the host instead redirected the user to the product's PDP. The mini should treat this as a successful hand-off — no checkout was created but the shopper is now on the PDP. * outcome Discriminator. The host redirected the user to the PDP instead. ```ts 'redirected_to_product' ``` * productId GID of the product the host redirected to. ```ts string ``` ### CreateUserImageParams * camera Which camera to default to when the camera is used. Defaults to 'front'. ```ts 'front' | 'rear' ``` * crop Cropping configuration. Omit to skip the cropping step — the user's original photo is returned as-is (capped by \`maxSize\`). ```ts { aspectRatio?: { width: number; height: number; }; shape?: "rectangle" | "circle"; } ``` * maxSize Max width/height of the output image in pixels. Defaults to 700. ```ts number ``` * source If set, skip the source chooser and open this source directly. When omitted, the host shows a sheet letting the user pick a source. ```ts 'camera' | 'library' ``` * tag Tag identifying the image in the mini's image library. Required so a future saved-images intent can surface previously created images by tag. ```ts string ``` ### ImageUrlResponse * imageUrl URL of the generated image. ```ts string ``` ### SelectProductVariantParams Data payload for the \`select:shopify/ProductVariant\` intent. Prompts the user to pick a variant (and quantity) for the product whose GID is passed as \`data.productId\`. The host renders a native bottom sheet over the mini WebView using the same option pickers as the Shop PDP. Single-variant products short-circuit without showing UI. * allowOutOfStockSelection When \`true\`, the sheet's confirm CTA stays enabled even for a sold-out variant — the host hands the selection back to the mini without touching the cart. Defaults to \`true\` for the \`select\` intent so flows like “notify me when back in stock” can pick a sold-out variant. Pass \`false\` to restore the cart-style sold-out guard. ```ts boolean ``` * forceShow When \`true\`, always render the sheet — even for products with a single variant. The single-variant short-circuit (resolving instantly without showing UI) is bypassed. Useful for flows that want a consistent confirmation step regardless of variant count. Defaults to \`false\`. ```ts boolean ``` * includedProductVariantGIDs Optional allow-list of variant GIDs. When set, only these variants are presented to the user. Other variants are filtered out before the option tree is built. ```ts string[] ``` * initialQuantity Initial quantity displayed in the stepper. Defaults to \`1\`. ```ts number ``` * initialVariantId If present, the GID of the variant that should be initially highlighted. Defaults to the product's default variant. ```ts string ``` * maxQuantity Maximum quantity selectable in the stepper. Defaults to the variant's available inventory (or unbounded when stock is not tracked). ```ts number ``` * productId The GID of the product whose variants should be selectable. E.g. \`gid://shopify/Product/123\`. ```ts string ``` * showQuantity Whether to show the quantity stepper. Defaults to \`false\` for the \`select\` intent (selection is informational; quantity is rarely relevant). Pass \`true\` to opt into the stepper. ```ts boolean ``` ### SelectProductVariantResult Successful payload returned from \`select:shopify/ProductVariant\`. The intent result is \`{code: 'ok', data: SelectProductVariantResult}\` on success; \`{code: 'closed'}\` when the user dismisses the sheet. Discriminate via \`data.outcome\`: - \`'selected'\` — the user picked a variant from the sheet; the full selection (\`productVariantId\`, \`quantity\`, \`variant\`, \`source\`) is present. - \`'navigated\_to\_product'\` — the user tapped the sheet's product header and the host took them to the PDP. Only \`productId\` and \`productVariantId\` (the highlighted variant) are present. ```ts SelectVariantSelectedResult | SelectVariantNavigatedToProductResult ``` ### SelectVariantSelectedResult Variant chosen by the user from the sheet's option pickers. * outcome Discriminator. The user picked a variant and confirmed. ```ts 'selected' ``` * productVariantId The GID of the variant the user picked. ```ts string ``` * quantity The quantity the user chose in the stepper. \`1\` when the stepper is hidden. ```ts number ``` * source Indicates whether the user actively picked a variant in the sheet (\`'user'\`) or whether the host resolved the selection automatically without showing UI (\`'auto'\`). \`'auto'\` is returned when the product has a single selectable variant and \`forceShow\` is \`false\` (the default). \`'user'\` is returned in every other success case — i.e. the sheet was rendered and the user tapped the CTA. ```ts 'auto' | 'user' ``` * variant The full variant the user picked. ```ts ProductVariant ``` ### SelectVariantNavigatedToProductResult Returned when the user taps the product header inside the sheet to go to the PDP instead of confirming a selection. The sheet is dismissed, the user has navigated to the PDP, and no selection is reported back. * outcome Discriminator. The user navigated to the PDP from the sheet. ```ts 'navigated_to_product' ``` * productId GID of the product the host navigated to. ```ts string ``` * productVariantId GID of the variant that was highlighted when the user tapped to navigate. The PDP opens scoped to this variant. ```ts string ``` ### TryOnProductParams * variantId Variant the user selected on the PDP that launched the Mini. ```ts string ``` ### SearchProductsByShopParams * after ```ts string ``` * fetchPolicy ```ts DataHookFetchPolicy ``` * first ```ts number ``` * query ```ts string ``` * shopId ```ts string ``` ### SearchProductsByShopResponse * data ```ts T ``` * pageInfo ```ts PaginationInfo ``` ### SetAsyncStorageItemParams * key ```ts string ``` * value ```ts string ``` ### SetProductListVisibilityParams * id The GID of the product list. E.g. \`gid://shopapp/ProductList/123\`. ```ts string ``` * name The name of the product list. Required to preserve the existing name. ```ts string ``` * privacyStatus The privacy status to set for the product list. ```ts ProductListPrivacyStatus ``` ### SetSecretParams * value ```ts string ``` ### ShareParams * failOnCancel ```ts boolean ``` * message ```ts string ``` * title ```ts string ``` * type ```ts string ``` * url ```ts string ``` * urls ```ts string[] ``` ### ShareResponse * dismissedAction ```ts boolean ``` * message ```ts string ``` * success ```ts boolean ``` ### ShareSingleParams ```ts BaseShareSingleOptions | InstagramShareSingleOptions | FacebookShareSingleOptions ``` ### BaseShareSingleOptions * appId ```ts string ``` * email ```ts string ``` * filename ```ts string ``` * forceDialog ```ts boolean ``` * message ```ts string ``` * recipient ```ts string ``` * social ```ts Social.Facebook | Social.Pagesmanager | Social.Twitter | Social.Whatsapp | Social.Whatsappbusiness | Social.Instagram | Social.Googleplus | Social.Email | Social.Pinterest | Social.Linkedin | Social.Sms | Social.Telegram | Social.Snapchat | Social.Messenger | Social.Viber | Social.Discord ``` * subject ```ts string ``` * title ```ts string ``` * type ```ts string ``` * url ```ts string ``` * urls ```ts string[] ``` ### Social * Facebook ```ts facebook ``` * FacebookStories ```ts facebookstories ``` * Pagesmanager ```ts pagesmanager ``` * Twitter ```ts twitter ``` * Whatsapp ```ts whatsapp ``` * Whatsappbusiness ```ts whatsappbusiness ``` * Instagram ```ts instagram ``` * InstagramStories ```ts instagramstories ``` * Googleplus ```ts googleplus ``` * Email ```ts email ``` * Pinterest ```ts pinterest ``` * Linkedin ```ts linkedin ``` * Sms ```ts sms ``` * Telegram ```ts telegram ``` * Snapchat ```ts snapchat ``` * Messenger ```ts messenger ``` * Viber ```ts viber ``` * Discord ```ts discord ``` ### InstagramShareSingleOptions * appId ```ts string ``` * attributionURL ```ts string ``` * backgroundBottomColor ```ts string ``` * backgroundImage ```ts string ``` * backgroundTopColor ```ts string ``` * backgroundVideo ```ts string ``` * email ```ts string ``` * filename ```ts string ``` * forceDialog ```ts boolean ``` * linkText ```ts string ``` * linkUrl ```ts string ``` * message ```ts string ``` * recipient ```ts string ``` * social ```ts Social.InstagramStories ``` * stickerImage ```ts string ``` * subject ```ts string ``` * title ```ts string ``` * type ```ts string ``` * url ```ts string ``` * urls ```ts string[] ``` ### FacebookShareSingleOptions * appId ```ts string ``` * attributionURL ```ts string ``` * backgroundBottomColor ```ts string ``` * backgroundImage ```ts string ``` * backgroundTopColor ```ts string ``` * backgroundVideo ```ts string ``` * email ```ts string ``` * filename ```ts string ``` * forceDialog ```ts boolean ``` * linkText ```ts string ``` * linkUrl ```ts string ``` * message ```ts string ``` * recipient ```ts string ``` * social ```ts Social.FacebookStories ``` * stickerImage ```ts string ``` * subject ```ts string ``` * title ```ts string ``` * type ```ts string ``` * url ```ts string ``` * urls ```ts string[] ``` ### ShareSingleResponse * message ```ts string ``` * success ```ts boolean ``` ### ShowErrorScreenParams * message The message to display in the error screen. ```ts string ``` * title The title of the error screen. ```ts string ``` ### ShowErrorToastParams * message ```ts string ``` ### ShowFeedbackSheetParams * publicId ```ts string ``` ### TranslateContentUpParams * inputYPosition ```ts number ``` ### UnfavoriteParams * productId ```ts string ``` * productVariantId ```ts string ``` * shopId ```ts string ``` ### UnfollowShopParams * shopId ```ts string ``` ### SnakeToCamelCase ```ts S extends `${infer Head}_${infer Tail}` ? `${Lowercase}${SnakeToCamelCaseTail}` : Lowercase ``` ### SnakeToCamelCaseTail ```ts S extends `${infer Head}_${infer Tail}` ? `${CapitalizeSegment}${SnakeToCamelCaseTail}` : CapitalizeSegment ``` ### CapitalizeSegment ```ts Uppercase extends 'AR' ? 'AR' : Capitalize> ``` Examples ### Examples * #### ##### tsx ```tsx import {useCallback} from 'react' import {useErrorScreen, Button} from '@shopify/shop-minis-react' export default function MyComponent() { const {showErrorScreen} = useErrorScreen() const handleError = useCallback(() => { showErrorScreen({ message: 'Something went wrong', }) }, [showErrorScreen]) return } ``` ***