App Studio Guide
App Studio Guide
Start typing to search…

screen/open

Navigate to screens and routes with flexible presentation options

Fields

destination • destination required

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

presentation • presentation

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

header • 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


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

Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "cart"
  }
});
✨

Available routes include:home, pdp, plp, cart, search, account, checkout


Basic usage - Navigating to a Custom Screen by ID

Tapcart.action("screen/open", {
  "destination": {
    "type": "screen",
    "id": "<SCREEN-ID-HERE>"
  }
});
✨

You can locate the Screen ID on the right-hand sidebar of the Custom Screens page


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

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

Basic usage - Navigating to a Collection Page (PLP)

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

Basic usage - Navigating to a Search page

Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "search"
  },
	"data":{
  	"query": "blue shirts",
  	"autoSubmit": true
	}	
});

Basic usage - Navigating to cart

Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "cart"
  }
});

Basic usage - Navigating to a webpage/website

Tapcart.action("screen/open", {
  "destination": {
      "type": "web",
      "url": "https://support.example.com"
  }
});

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

// 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" }
  });
}

Advanced usage - Using Dynamic Routing

//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>"
  }
});
✨

When using Dynamic routing you have access to all the App Studio context variables.


Advanced usage - Overriding Header and Presentation

Tapcart.action("screen/open", {
  "destination": {
      "type": "route",
      "id": "plp"
  },
  "presentation": {
    "type": "fullscreen",
    "style": "flip"
  },
  "header": {
    "visible": true,
    "headerLeft": [],
    "headerCenter": [],
    "headerRight": []
  }
});
✨

Learn all the Presentation options here: Presentation


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.


Passing custom Data object to destination screen

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!"
    }
}
});

Retrieving custom data on the destination screen

//Access the custom Data from the destination screen
Tapcart.variables.data

Updated 9 days ago