---
title: useShopNavigation
description: >-
  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.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/navigation/useshopnavigation'
  md: >-
    https://shopify.dev/docs/api/shop-minis/hooks/navigation/useshopnavigation.md
---

# use​Shop​Navigation

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.

## use​Shop​Navigation()

### Returns

* **UseShopNavigationReturns**

  ### ### UseShopNavigationReturns

  * **navigateToCart**

    **() => Promise\<void>**

    Navigates to the cart screen.

  * **navigateToCheckout**

    **(params: NavigateToCheckoutParams) => Promise\<void>**

    Navigates to a checkout.

  * **navigateToOrder**

    **(params: NavigateToOrderParams) => Promise\<void>**

    Navigates to an order.

  * **navigateToProduct**

    **(params: NavigateToProductParams) => Promise\<void>**

    Navigates to a product.

  * **navigateToShop**

    **(params: NavigateToShopParams) => Promise\<void>**

    Navigates to a shop.

### UseShopNavigationReturns

* navigateToCart

  Navigates to the cart screen.

  ```ts
  () => Promise<void>
  ```

* navigateToCheckout

  Navigates to a checkout.

  ```ts
  (params: NavigateToCheckoutParams) => Promise<void>
  ```

* navigateToOrder

  Navigates to an order.

  ```ts
  (params: NavigateToOrderParams) => Promise<void>
  ```

* navigateToProduct

  Navigates to a product.

  ```ts
  (params: NavigateToProductParams) => Promise<void>
  ```

* navigateToShop

  Navigates to a shop.

  ```ts
  (params: NavigateToShopParams) => Promise<void>
  ```

### NavigateToCheckoutParams

* shopId

  The GID of the shop. E.g. \`gid://shopify/Shop/123\`.

  ```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
  ```

### LineItemAttribution

* sourceIdentifier

  ```ts
  string
  ```

* sourceName

  ```ts
  string
  ```

### NavigateToShopParams

* shopId

  ```ts
  string
  ```

Examples

### Examples

* #### Example code

  ##### Default

  ```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>
      </>
    )
  }
  ```