---
updatedAt: 2025-08-05T06:52:02.000Z
agentTools:
  projectIndex: https://dev.tapcart.com/llms.txt
---

# screen/open

Navigate to screens and routes with flexible presentation options

#### Fields

### `destination` • [destination](/docs/destination) <span class="required-tag">required</span>

##### A destination object used for navigation using a common known Route or a Screen ID

### `presentation` • [presentation](/docs/presentation)

##### A presentation object that can be used to override the destination screens default Presentation

### `header` • [header](/docs/header)

##### A header object that can be used to override the destination screens default Header

### `data` • *object*

##### A JSON object that is used to pass data to the next screen

<br />

***

<br />

Use the `open/screen` to navigate between screens, routes, and external content with full control over presentation style and navigation stack behavior.

### Basic usage - Navigating using a Route

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "cart"
  }
});
```

<Callout icon="✨" theme="default">
  **Available routes include:`home`, `pdp`, `plp`, `cart`, `search`, `account`, `checkout`**
</Callout>

<br />

### Basic usage - Navigating to a Custom Screen by ID

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
    "type": "screen",
    "id": "<SCREEN-ID-HERE>"
  }
});
```

<Callout icon="✨" theme="default">
  You can locate the Screen ID on the right-hand sidebar of the Custom Screens page

  <Image align="center" width="300px" src="https://files.readme.io/dc0b6bf0bdeedd636fb13c87ce52a70c4d0180efe2cfa3fb5351019a0af07242-Screenshot_2025-08-04_at_11.05.39_PM.png" />
</Callout>

<br />

### Basic usage - Navigating to a Product Detail Page (PDP)

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "pdp"
  },
	"data":{
  	"productHandle": "summer-dress",
  	"variant": "1234559392"
	}	
});
```

<br />

### Basic usage - Navigating to a Collection Page (PLP)

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "plp"
  },
	"data":{
  	"collectionHandle": "summer-dress",
  	"sort": "price",
  	"filters": ["color:blue", "size:large"]
	}	
});
```

<br />

### Basic usage - Navigating to a Search page

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "search"
  },
	"data":{
  	"query": "blue shirts",
  	"autoSubmit": true
	}	
});
```

<br />

### Basic usage - Navigating to cart

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "cart"
  }
});
```

<br />

### Basic usage - Navigating to a webpage/website

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "web",
      "url": "https://support.example.com"
  }
});
```

<br />

### Advanced usage - Adding product to cart, then navigate to Cart

```javascript App Studio - React.js
// Add to cart, then navigate to cart
async function addToCartAndView() {
  await Tapcart.action("cart/add", {
    "lineItems": [{ "variantId": "variant_id_here", "quantity": 1 }]
  });
  
  await Tapcart.action("open/screen", {
    "destination": { "type": "route", "id": "cart" }
  });
}
```

<br />

### Advanced usage - Using Dynamic Routing

```javascript App Studio - React.js
//Acess custom data and evaluate a dynmic route.
Tapcart.action("screen/open", {
  "destination": {
  	"type": "dynamic",
  	"id": "customer ? <SCREEN_ID_1_HERE> : <SCREEN_ID_2_HERE>"
  }
});
```

<Callout icon="✨">
  When using Dynamic routing you have access to all the App Studio context variables.
</Callout>

<br />

<Image align="center" src="https://files.readme.io/4d7109e7b1763c3c5f8986fc56707c5e953fb307fd082c5fecea16141d31ec99-transitions.png" />

### Advanced usage - Overriding Header and Presentation

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "plp"
  },
  "presentation": {
    "type": "fullscreen",
    "style": "flip"
  },
  "header": {
    "visible": true,
    "headerLeft": [],
    "headerCenter": [],
    "headerRight": []
  }
});
```

<Callout icon="✨" theme="default">
  Learn all the Presentation options here: [Presentation](https://dev.tapcart.com/docs/presentation#/)
</Callout>

<br />

## Passing custom Data

The `data` field allows you to pass parameters to the destination screen. The available parameters depend on what the destination screen expects to receive. This can greatly enhance performance of screen transitions and load time.

<br />

### Passing custom Data object to destination screen

```javascript App Studio - React.js
Tapcart.action("screen/open", {
  "destination": {
      "type": "screen",
      "id": "<SCREEN-ID-HERE>"
  },
  "data": {
    "id": "promo_2025_summer_sale",
    "title": "Summer Sale: 20% Off Sitewide",
    "description": "Celebrate summer with 20% off everything — no code needed.",
    "type": "percentage_discount",
    "value": 20,
    "appliesTo": {
      "scope": "sitewide",
      "excludedCollections": ["gift-cards", "clearance"]
    },
    "eligibility": {
      "customerTags": [],
      "minimumSubtotal": 0
    },
    "automatic": true,
    "startsAt": "2025-08-05T00:00:00Z",
    "endsAt": "2025-08-12T23:59:59Z",
    "status": "active",
    "priority": 1,
    "stackable": false,
    "display": {
      "badgeText": "20% Off",
      "highlightColor": "#00FFD1",
      "bannerMessage": "🔥 Summer Sale On Now!"
    }
}
});
```

<br />

### Retrieving custom data on the destination screen

```javascript App Studio - React.js
//Access the custom Data from the destination screen
Tapcart.variables.data
```