Overview
Webview Relay is a Shopify theme extension that connects your online store pages to your React Native mobile app.
Its main purpose is to display a Home page or Landing page inside the app’s webview and relay user actions (like link clicks) back to the app for native navigation.
When active, it hides unnecessary storefront elements (like headers, footers, or popups) and ensures that navigation happens through the app’s native screens for a seamless in-app experience.
How It Works
Where It Runs
The Webview Relay runs when embedded in a React Native app’s webview on these types of pages:
Home page — /
Landing page — /pages/landing-page (or another path you specify)
When It Activates
The script activates only when:
The page is opened inside the React Native app’s webview (detected via the user agent).
The store name in the user agent matches the store the block is configured for.
The current page path matches one of your configured activation paths (e.g., / or /pages/landing-page).
If someone visits the same page in a regular browser, the script does nothing.
What It Does When Active
1. Hide Unnecessary Elements
Specify CSS selectors for elements to hide, such as:
Shopify theme sections like the header or footer.
Third-party widgets or popups that load later.
The script continuously monitors and hides these elements if they reappear due to dynamic content.
2. Intercept Navigation
Define interceptor paths (e.g., /products/*, /collections/*, /pages/*) to capture in-app navigation events.
The relay intercepts:
Link clicks (e.g., a product link)
Form submissions (e.g., search forms)
Browser history changes (e.g., forward/back or in-page routing)
When an intercepted path is triggered, storefront navigation stops, and the action is sent to the app instead.
3. Relay User Intent to the App
When a navigation event is intercepted, the relay sends a message to the app via ReactNativeWebView.postMessage containing:
The intended path
The content type (product, collection, page, blog, search, cart, or other)
Additional context (e.g., product handle, variant ID, collection handle)
Example event types:
PRODUCT_CLICKED — includes product handle and variant ID (if present)
COLLECTION_CLICKED — includes collection handle
PAGE_CLICKED, STORE_LOCATOR_CLICKED, BLOG_CLICKED, SEARCH_CLICKED, CART_CLICKED, OTHER_CLICKED
This allows the React Native app to open the corresponding native screen—for example, a native product page or collection view—creating a consistent app-native experience.
Typical Use Cases
Display the Home Page in the App
Add / to your activation paths.
Hide the storefront header/footer so the app can use its own native header.
Intercept links to products or collections to open native product or collection screens.
Display a Landing Page in the App
Add your landing page path (e.g., /pages/holiday-sale) to activation paths.
Hide marketing popups or third-party banners that clash with app UI.
Intercept buttons or links for products, collections, the store locator, cart, or search—then hand them off to native navigation.
Configuration
Steps to Enable the Extension:
From your Shopify admin, go to Online Store > Themes.
Find your active theme, then click Customize to open the Theme Editor.
In the Theme Editor sidebar, click the App embeds icon (the puzzle piece icon).
Scroll through the list of available app embeds and locate Reactiv Webview Relay.
Toggle the switch to enable the Reactiv Webview Relay extension.
Click Save in the top-right corner to apply your changes.
Once saved, the Webview Relay is active and ready to connect Reactiv features with your storefront.
📝 Please make sure that you enable this every time you switch your theme.
Activation
Enable the Webview Relay on specific pages:
Add one path per line under “Enable the Webview Relay script on specific paths.”
Examples:
/ — Home page
/pages/landing-page — Landing page
Navigation Interceptors
Define which paths the app should take over:
Add one path pattern per line. Wildcards (*) are supported.
Common patterns:
/products/* — Product pages
/collections/* — Collection pages
/pages/* — Standard pages
/cart, /search — Optional additions
Element Interceptor
Hide elements that shouldn’t appear inside the app:
Theme elements: e.g., #shopify-section-header, #footer
Third-party widgets: e.g., #atlwdg-trigger
The relay continuously hides these elements if they reappear dynamically.
Native Navigation Handoff
When the relay detects an intercepted navigation:
It stops the normal web navigation.
Sends a message to the React Native app through ReactNativeWebView.postMessage.
The app reads the event type and context (like a product handle) and navigates to the corresponding native screen.
Result: Users interact with web content but experience native navigation and native UI.
Behavior Details and Safeguards
Locale-friendly: Handles locale-prefixed URLs (e.g., /en/products/…, /fr-ca/products/...) correctly.
Exact activation: Runs only on exact activation paths you define.
App-only: Checks user agent and store name to avoid running in normal browsers.
Graceful hiding: Ignores invalid CSS selectors; dynamically hides elements that reappear.
Safe messaging: Only posts messages if the webview bridge is available.
Privacy: Sends only navigation context (no personal data).
Once the above is all completed don't forget to save to activate the relay on your theme. Always reach out to our Support team if you need any guidance.