use
Navigates to native Shop app screens (product details, shop profiles, orders, checkout, cart) while maintaining the Mini in the navigation stack. The Mini stays loaded in memory, so back navigation returns to your Mini. Use this when directing users to Shop-managed screens. It preserves native navigation animations, back button behavior, and keeps your Mini's session alive.
UseShopNavigationReturns
- navigateToCart
Navigates to the cart screen.
() => Promise<void> - navigateToCheckout
Navigates to a checkout.
(params: NavigateToCheckoutParams) => Promise<void> - navigateToOrder
Navigates to an order.
(params: NavigateToOrderParams) => Promise<void> - navigateToProduct
Navigates to a product.
(params: NavigateToProductParams) => Promise<void> - navigateToShop
Navigates to a shop.
(params: NavigateToShopParams) => Promise<void>
NavigateToCheckoutParams
- shopId
The GID of the shop. E.g. `gid://shopify/Shop/123`.
string
NavigateToOrderParams
- orderId
The GID of the order. E.g. `gid://shopify/Order/123`.
string
NavigateToProductParams
- attribution
LineItemAttribution - discountCode
The discount code to apply to the product.
string - includedProductVariantGIDs
string[] - includedProductVariantIds
string[] - productId
The GID of the product. E.g. `gid://shopify/Product/123`.
string - productVariantId
If present, the GID of the variant that should be initially selected
string
LineItemAttribution
- sourceIdentifier
string - sourceName
string
NavigateToShopParams
- shopId
string
tsx
Examples
Example code
tsx
import {useShopNavigation, Button} from '@shopify/shop-minis-react' export default function MyComponent() { const {navigateToProduct, navigateToShop, navigateToOrder, navigateToCheckout} = useShopNavigation() return ( <> <Button onClick={() => navigateToProduct({productId: 'gid://shopify/Product/123'}) } > View Product </Button> <Button onClick={() => navigateToShop({ shopId: 'gid://shopify/Shop/123', }) } > Go to Shop </Button> <Button onClick={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})} > View Order </Button> <Button onClick={() => navigateToCheckout({shopId: 'gid://shopify/Shop/123'})} > Go to Checkout </Button> </> ) }