Custom screens let you build experiences in your app beyond the default screens that come out of the box. There are two types — block-based screens built with design blocks, and web-based screens that pull an existing web page into your app. Whatever your use case, custom screens are a powerful and flexible 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
1.Block Based Custom Screens: Build a screen using any combination of design blocks — including your own custom blocks if you're on Enterprise. Block-based screens are great for creating app-specific experiences that don't exist on your website, or where you want the in-app experience to be distinct from your web experience.
2.Web Based Custom Screens: Pull an existing web page into your app using a URL. The experience renders inside the app so it feels native to the customer. Web-based screens are ideal for reusing experiences you've already built on your website — loyalty portals, subscription management pages, blog content, and more.
For the best web-based screen experience, install the WebBridge SDK on your website. The WebBridge SDK automatically removes your website's header and footer inside the app and handles authentication passthrough for stores using Shopify Classic Accounts. See the WebBridge SDK documentation for setup instructions.
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
Give your screen a title
Under Settings, toggle between Block-Based and Web-Based
For web-based screens, paste in your URL
For block-based screens, add and configure blocks from the left rail
When ready, click Publish — or use Schedule to set a future go-live date
Screen Settings
Like all screens in Tapcart, custom screens have settings under the Settings tab in the right rail — including presentation style, screen transitions, snap points, and a toggle to require users to be logged in. For a full breakdown see Screen Settings: Presentation Style, Transitions & Snap Points.
Authentication on Web-Based Screens
If your web-based custom screen requires customers to be logged in, enable the Require users to be logged in toggle in the Settings tab. What happens next depends on which account system your store uses:
New Customer Accounts — authentication is passed through automatically. No additional setup needed.
Classic Customer Accounts — you'll need to set up Multipass to pass authentication from the app into the web page:
In your Shopify admin, go to Settings → Customer Accounts → Multipass
Enable Multipass and copy your secret key
Add your Multipass secret to the Tapcart Multipass integration page
For more on the difference between account types, see Classic vs. New Customer Accounts.
If you have a custom authentication setup outside of Shopify, contact us at [email protected] and we can help troubleshoot.
Common use case: Loyalty portals If your loyalty provider has a web-based portal (e.g., LoyaltyLion, Smile.io, Rivo), you can embed it as a web-based custom screen. Typical URLs look like:
Enable Require users to be logged in and set up Multipass (Classic Accounts) so customers are authenticated automatically when they land on the page.
Linking to Your Custom Screen
Once your screen is created you can link to it from anywhere in the app that has a destination option — image blocks, link blocks, video blocks, navigation items, and more. Just select Screen from the destination dropdown and choose your custom screen.
Adding to Bottom Navigation:
Go to App Studio → Navigation
Click + Add New Navigation Item
Add a title and icon
Set the destination to Custom Screen and select your screen
Adding to your Account Page:
Go to App Studio → Screens → Account
Search for the Link block and drag it into the layout
Click Edit and set the destination to Screen
Select your custom screen and click Save
Publish when ready
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!
Deep Linking to Custom Screens
If you use a third-party push notification provider like Klaviyo, you can deep link directly to a custom screen using the Screen ID. Use the following URL patterns:
Block-based screens:
/block-page/{screen_ID}Web-based screens:
/hybrid-page/{screen_ID}
You can find your Screen ID in the Settings tab of the custom screen.
Sending Push Notifications to your Custom Screens
You can also send push notifications directly to a custom screen from within Tapcart. Go to Engage → Push Notifications, set the Push Type to Custom, design your push, and in the Send your users to dropdown select Custom Screen, then choose your screen.
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]!