Your e-commerce website gets mobile traffic from users who have your app installed but landed on the website from a search result, social link, or email. A smart banner detects the mobile visitor and offers to open the same product in your app, where the shopping experience is better and conversion rates are higher.
For the general smart banner guide, see Smart App Banners: Beyond Apple's Default. For e-commerce deep linking, see Deep Linking for E-Commerce Apps. For smart banner implementation strategies, see Smart Banners for E-Commerce.
Why E-Commerce Smart Banners Work
The typical scenario:
- User searches "running shoes" on Google
- Google shows your website in results
- User taps the result, lands on your mobile web product page
- User has your app installed but the website doesn't know that
Without a smart banner, the user browses on mobile web, where conversion rates are 1-2%. With a smart banner that deep links to the same product in the app, the user switches to the app where conversion rates are 3-5x higher.
The key: the banner must deep link to the same product the user is viewing, not just the app's home screen. A generic "Open in App" banner that drops users on the home screen adds friction instead of removing it.
Product-Aware Banners
Passing Product Context
Your smart banner should read the current page and pass product data to the app:
<!-- On product page: /products/running-shoes-v2 -->
<script>
Tolinku.banner({
message: 'View in App for exclusive deals',
buttonText: 'Open in App',
deepLink: 'https://go.yourapp.com/product/running-shoes-v2',
});
</script>
When the user taps "Open in App", they land on the exact same product in the app.
Dynamic Deep Links from Page Data
Instead of hardcoding the deep link, extract the product identifier from the page:
// Extract product handle from the current URL
const pathParts = window.location.pathname.split('/');
const productHandle = pathParts[pathParts.indexOf('products') + 1];
if (productHandle) {
Tolinku.banner({
message: 'Better prices in our app',
buttonText: 'View in App',
deepLink: `https://go.yourapp.com/product/${productHandle}`,
});
}
Collection Page Banners
On collection/category pages, link to the same collection in the app:
const collectionHandle = pathParts[pathParts.indexOf('collections') + 1];
if (collectionHandle) {
Tolinku.banner({
message: 'Shop this collection in our app',
buttonText: 'Open in App',
deepLink: `https://go.yourapp.com/collection/${collectionHandle}`,
});
}
Cart Page Banners
On the cart page, the banner should transfer the cart to the app:
// Get cart items from the page
const cartItems = getCartItems(); // Your implementation
const itemsParam = cartItems.map(i => `${i.variantId}:${i.quantity}`).join(',');
Tolinku.banner({
message: 'Complete your order in the app for free shipping',
buttonText: 'Open Cart in App',
deepLink: `https://go.yourapp.com/cart/add?items=${itemsParam}`,
});
Banner Display Rules
When to Show
- Product pages: Always show (highest intent)
- Collection pages: Show after 5 seconds (let user browse first)
- Cart page: Always show (high conversion potential)
- Homepage: Show only if user has viewed 2+ pages (some engagement threshold)
- Checkout: Don't show (don't interrupt the purchase flow)
When NOT to Show
- Desktop visitors: Smart banners are mobile-only
- In-app browsers: If the user is already in your app's web view, don't show a banner to "open in app"
- After dismissal: If the user closed the banner, don't show it again for 24-48 hours
Display Timing
Tolinku.banner({
// Wait 3 seconds before showing on product pages
delay: 3000,
// Don't show again for 24 hours after dismissal
dismissDuration: 86400000, // 24 hours in ms
// Only show on mobile devices
mobileOnly: true,
});
Measuring Smart Banner Performance
Key Metrics
| Metric | Formula | Good Benchmark |
|---|---|---|
| Banner impression rate | Banner views / Mobile page views | 80%+ |
| Banner tap rate | Taps / Banner views | 5-15% |
| App open rate | App opens / Taps | 60-80% |
| Conversion lift | App conversion rate – Web conversion rate | 2-5x |
| Revenue per banner tap | Revenue from app opens via banner / Total taps | Varies |
Attribution
Tag the deep link with the banner source:
https://go.yourapp.com/product/running-shoes-v2?utm_source=smart_banner&utm_medium=web
This lets you measure how much revenue the smart banner drives compared to users who stay on web.
A/B Testing
Test banner variations. For design and layout guidance, see Banner Design Best Practices for Mobile Deep Linking. For conversion optimization techniques, see Web-to-App Conversion Banners.
- Message copy: "Open in App" vs. "Get 10% Off in App" vs. "Free Shipping in App"
- Timing: Immediate vs. 3-second delay vs. on scroll
- Position: Top of page vs. bottom vs. floating
- Incentive: With app-exclusive discount vs. without
Incentivizing the App Switch
An "Open in App" banner converts better when there's a reason to switch:
App-Exclusive Discounts
Tolinku.banner({
message: 'Get 10% off when you shop in our app',
buttonText: 'Shop in App',
deepLink: 'https://go.yourapp.com/product/running-shoes-v2?promo=APP10',
});
The promo code auto-applies when the app opens.
Free Shipping
Tolinku.banner({
message: 'Free shipping on all app orders',
buttonText: 'Open in App',
deepLink: 'https://go.yourapp.com/product/running-shoes-v2?free_ship=true',
});
Loyalty Points
Tolinku.banner({
message: 'Earn 2x loyalty points when you order in the app',
buttonText: 'Open in App',
deepLink: 'https://go.yourapp.com/product/running-shoes-v2?loyalty_boost=true',
});
Implementation with Tolinku
Using the Tolinku Web SDK:
<script src="https://cdn.tolinku.com/banner.js"></script>
<script>
Tolinku.init({
apiKey: 'tolk_pub_your_key',
banner: {
enabled: true,
position: 'top',
theme: 'light',
},
});
</script>
The SDK detects mobile visitors, generates product-aware deep links based on the current page, and displays the banner. See the smart banner documentation and smart banner features for configuration options.
For e-commerce use cases, see the e-commerce documentation.
Get deep linking tips in your inbox
One email per week. No spam.
