--- title: useErrorToast description: The useErrorToast hook displays a non-blocking error notification. source_url: html: 'https://shopify.dev/docs/api/shop-minis/hooks/util/useerrortoast' md: 'https://shopify.dev/docs/api/shop-minis/hooks/util/useerrortoast.md' --- # useErrorToast The `useErrorToast` hook displays a non-blocking error notification. Use this for recoverable errors, warnings, or informational messages that don't prevent users from continuing their workflow. The toast appears temporarily at the top or bottom of the screen, auto-dismisses, and allows users to keep interacting with the Mini. **Note:** Use `useErrorToast` for recoverable errors or warnings (e.g., failed to save preference, item out of stock, temporary network issues, validation errors). This shows a non-blocking notification that auto-dismisses and doesn't interrupt the user's current task. 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 before continuing. ## use​Error​Toast() ### Returns * **UseErrorToastReturns** ### UseErrorToastReturns * showErrorToast Show an error toast 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 ``` * 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 ``` * 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 ``` ### 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 ``` * title ```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 ``` ### 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 * code ```ts 'ok' ``` * data ```ts 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. A Mini calls \`resolveIntent(result)\` to signal the outcome of the intent it was launched with. The host tracks the pending intent itself (parsed from the launch URL) and dispatches to the registered handler. The Mini also passes back the \`intentKey\` it declared on the SDK side (e.g. \`'tryOnProduct'\`). The host compares this against its own pending intent — a mismatch means the Mini's typed payload doesn't apply to the actually-launched intent, so the host short-circuits with an error and cleans up rather than running the wrong handler with the wrong shape. * intentKey The IntentDefinitions key the Mini declared at the call site. ```ts K ``` * result The outcome of the intent workflow. ```ts IntentResult ``` ### IntentDefinitions * createUserImage ```ts { action: "create"; type: "shop/UserImage"; data: CreateUserImageParams; result: ImageUrlResponse; } ``` * tryOnProduct ```ts { action: "try_on"; type: "shopify/Product"; data: TryOnProductParams; result: ImageUrlResponse; } ``` ### 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 ``` ### 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 {useErrorToast, Button} from '@shopify/shop-minis-react' export default function MyComponent() { const {showErrorToast} = useErrorToast() const handleError = useCallback(() => { showErrorToast({ message: 'Something went wrong', }) }, [showErrorToast]) return } ``` ***