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

```ts
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\`.

  ```ts
  string
  ```

```ts
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\`.

  ```ts
  string
  ```

```ts
export interface NavigateToOrderParams {
  /**
   * The GID of the order. E.g. `gid://shopify/Order/123`.
   */
  orderId: 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
  ```

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

  ```ts
  string
  ```

* sourceName

  ```ts
  string
  ```

```ts
export interface LineItemAttribution {
  sourceName: string
  sourceIdentifier: string
}
```

### NavigateToShopParams

* shopId

  ```ts
  string
  ```

```ts
export interface NavigateToShopParams {
  shopId: 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>
      </>
    )
  }
  ```