---
title: useShopNavigation
description: >-
  Navigates to native Shop app screens (product details, shop profiles, orders,
  checkout, cart) while maintaining the Mini in the navigation stack.
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
api_name: shop-minis
---

# 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

  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

* #### Example code

  ##### tsx

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

***