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
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>
interface UseShopNavigationReturns {
/**
* Navigates to a product.
*/
navigateToProduct: (params: NavigateToProductParams) => Promise<void>
/**
* Navigates to a shop.
*/
navigateToShop: (params: NavigateToShopParams) => Promise<void>
/**
* Navigates to an order.
*/
navigateToOrder: (params: NavigateToOrderParams) => Promise<void>
/**
* Navigates to a checkout.
*/
navigateToCheckout: (params: NavigateToCheckoutParams) => Promise<void>
/**
* Navigates to the cart screen.
*/
navigateToCart: () => Promise<void>
}NavigateToCheckoutParams
- shopId
The GID of the shop. E.g. `gid://shopify/Shop/123`.
string
export interface NavigateToCheckoutParams {
/**
* The GID of the shop. E.g. `gid://shopify/Shop/123`.
*/
shopId: string
}NavigateToOrderParams
- orderId
The GID of the order. E.g. `gid://shopify/Order/123`.
string
export interface NavigateToOrderParams {
/**
* The GID of the order. E.g. `gid://shopify/Order/123`.
*/
orderId: 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
export interface NavigateToProductParams {
/**
* The GID of the product. E.g. `gid://shopify/Product/123`.
*/
productId: string
/**
* If present, the GID of the variant that should be initially selected
*/
productVariantId?: string
/*
* Variants displayed in the product details screen will be limited to those
* whose ID is included in this list.
*/
includedProductVariantGIDs?: string[]
/**
* @deprecated use includedProductVariantGIDs instead
*/
includedProductVariantIds?: string[]
/**
* @deprecated do not use
*/
attribution?: LineItemAttribution
/**
* The discount code to apply to the product.
*/
discountCode?: string
}LineItemAttribution
- sourceIdentifier
string - sourceName
string
export interface LineItemAttribution {
sourceName: string
sourceIdentifier: string
}NavigateToShopParams
- shopId
string
export interface NavigateToShopParams {
shopId: string
}Examples
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>
</>
)
}
Examples
Example code
Default
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> </> ) }
Was this page helpful?