Custom screens allow you to bring additional experiences into your app that may not be already available as one of the out of the box screens provided on platform. You may have experience you've built on the website you'd like to replicate in your app or you might like to create a new experiences using any number of blocks on platform, whatever your use case, custom screens are a key part of your app strategy.
Types of Custom Screens
There are 2 types of custom screens you can use to create new experiences for your app
Block Based Custom Screens: block based custom screens use any type of block, including your own custom blocks, to create the screen. You're able to drag 1 or more blocks and configure the arrangement of them. Block based custom screens are great for when you are considering build app specific experiences that you don't have on your website today and/or where you want to make them different for app shoppers.
Web Based Custom Screens: web based custom screens use a URL you provide to effectively pull that experience onto a custom screen. Because this URL is add to a custom screen, the user experience feels native and cohesive while providing you the benefit of being able to reuse experiences you've built for your website that also apply to the app.
In order for web based custom screens to be optimized we highly recommend you install Tapcart's WebBridge SDK to your website. The WebBridge SDK dynamically remove traditional website headers and footers while also handling authentication if your using Shopify Classic auth leading to an ideal customer experience. More details are provided below.
Creating a Custom Screen
Hover over App Studio in your Tapcart Dashboard header and select Screens
Click the "v" beside Home to see all your available screens in app
Navigate down to Custom Screens and open the Custom Screen folder
Click + Create Screen to add a screen
Once on the screen use Settings to toggle between Block and Web Based Custom Screens
Add a Screen Title, configure the relevant options, and click Publish or Schedule the screen to go live as usual
Considerations when building a Custom Screen
If you are adding a screen which requires authentication from the user in order to access you'll use the toggle for requiring auth. Note this only works with Shopify Classic accounts & Shopify multipass configuring authentication at this time. When authentication is set to required, the app will take any unauthenticated user to the login screen where after successfully logging in the customer will return to the screen they were seeking. This requires WebBridge to be installed, more instructions below.
You can elect to hide or show a Screen Title depending on the look and feel you are seeking
If you are using a 3rd party like Klaviyo for push notifications, you can use the Screen ID to deep link to a custom screen. When configuring your push destination in yoru 3rd party marketing tool you'll use a pattern like this `/block-page/{screen_ID}` for block based or `/hybrid-page/{screen_ID}` for web based.
Add a Custom Screen to your App Navigation
Go to App Studio and select Navigation
Tap + Add New Navigation
Add an icon title for the menu item and click the link button to open up the destination menu
In the destination dropdown menu, select Custom Screen
In the secondary dropdown, select the custom screen you just created
Important Note: If authentication is required (for example: Accounts for Subscription management, Loyalty integrations, etc), then you will want to integrate with Shopify Multipass. To set this up, please follow these steps:
Go to Shopify Admin and select Settings
Navigate to Customer Accounts then Multipass
Ensure that Multipass is enabled and add your Secret to the Tapcart integration page
If you have your own multipass authentication, please contact our support team.
Adding a Loyalty URL to your Custom Screen
Pre-requisite: Web Bridge SDK and Multi-pass for authentication is enabled
Go to App Studio and select Screens
Navigate down to Custom Screens and open the Custom Screen folder
Click + Create Screen to add a screen
Add a Screen Title and display title (optional)
Toggle on 'Does this page require users to be logged in?'
Add your Loyalty web page url
Note: Common urls, if this is set up on your website, may be:
https://merchantstorename.com/pages/rewards
https://merchantstorename.com/pages/loyalty
Add a Custom Screen to your Account Page
Go to App Studio and select Screens
Click the "v" beside Home to see all your available screens in app
Navigate down to Account
Search for the Link block
Drag it into the design and select Edit
Click the link settings to open up the destination menu
Select Screen
In the Choose a Screen dropdown menu, select the custom screen you just created
Click Save
Once all changes are ready, Publish to update your app
Other ways to link to your Custom Screen
You have the option to link an image, link, video block, etc. to a custom screen! When you add a new block to your design that has a Link option, you can choose the Screen option to link to your new custom screen!
Sending Push Notifications to your Custom Screens
There is also an option to send a Push Notification to a Custom Screen within the platform. To do this, you can head to the “Engage” Tab and Select “Push Notifications”. For “Push Type”, choose “Custom”. Design your push as you’d like, and in the “send your users to” dropdown, select “Custom Screen” and then go ahead and select the custom screen you would like to send users to.
Considerations
Custom blocks are only available to Tapcart Enterprise customers.
Not on Tapcart Enterprise but want to learn more about using custom blocks or screens? You can talk to one of our mobile experts by accessing this new feature directly from your dashboard. Simply select custom blocks and choose ‘talk to a mobile expert’ to get started!
More Questions
Our team is here to help! To learn more about custom screens and how they can be a turn-key solution for your mobile app ideas, visit Tapcart Help Center or reach out to us with general questions at [email protected]!