Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
This snippet detects if a visitor is on iOS or Android and automatically redirects them to the correct app store.
How it Works
This guide will help you create a smart redirect page that automatically sends your visitors to the correct app store (Google Play or Apple App Store), depending on their device.
You do not need to be a developer to use this, we’ve written this guide to walk you through the steps, even if you have very limited experience editing code.
Creating a custom redirect page on your own website gives you full control over the download experience — and unlocks key benefits for your marketing and analytics efforts.
What Is This For?
Many platforms and ad tools limit your visibility when you send users directly to the App Store or Play Store. By creating a simple redirect page on your own domain, you solve two major problems:
- Branded Experience
You own the page (e.g.yourdomain.com/stores-redirect), so users see your domain in all marketing materials — not a third-party link. This builds trust and improves click-through rates, especially on QR codes and paid ads. - Track Everything
Since the redirect page lives on your website, you can add Google Analytics, Meta Pixel, UTM tags, or any other tracking tool — giving you complete visibility into how users are arriving and where they go next. This is essential for campaign measurement and A/B testing.
This approach is ideal for customers who want more control, deeper insights, and a seamless experience across web and app.
The URL should look like this, where the app store links are passed as URL parameters:
https://yourdomain.com/stores-redirect/?android=https://play.google.com&ios=https://apps.apple.com
Here is our own implementation of this:
https://redirect.vendrux.com/?android=https://play.google.com&ios=https://apps.apple.com
How to implement
If you’re using a CMS (like Shopify, Webflow, Squarespace, or WordPress), look for a way to add a new page and edit the HTML content directly. You should be able to paste in the code provided below.
You’ll find specific guides for each at the bottom of this page
Option 1: Automatic Redirect (JavaScript Only)
Best for: Users should be taken to the correct store instantly, without seeing any message or UI.
How to use:
- Paste the JavaScript snippet (see below) right before
on your page.
Option 2: User-Friendly UI (HTML + CSS + JavaScript)
Best for: You want to show a “Redirecting…” message, and if the redirect fails, display download badges (buttons) for each store.
How to use:
- Add the HTML + CSS snippet inside your
, near the top of your page..- Add the JavaScript snippet right before
- Add the JavaScript snippet right before
- Users will see a loading message. If the redirect fails (or links are missing), fallback download badges are shown.
JavaScript Snippet (Required for Both Options)
Paste at the end of your page, before :
function getMobileOS() {
const userAgent = navigator.userAgent.toLowerCase();
if (/windows phone/i.test(userAgent)) return "windows";
if (/android/i.test(userAgent)) return "android";
if (/ipad|iphone|ipod/.test(userAgent) && !window.MSStream) return "ios";
return "desktop";
}
document.addEventListener("DOMContentLoaded", function() {
const urlParams = new URLSearchParams(window.location.search);
const iosUrl = urlParams.get('ios');
const androidUrl = urlParams.get('android');
const platform = getMobileOS();
const downloadMsg = document.getElementById("downloadMsg");
const redirectingMsg = document.getElementById("redirectingMsg");
const errorMsg = document.getElementById("errorMsg");
const iosBadge = document.getElementById("iosBadge");
const androidBadge = document.getElementById("androidBadge");
const isValidUrl = url => /^https?:\/\//.test(url);
function showBadges() {
if (![iosUrl, androidUrl].some(isValidUrl)) {
errorMsg?.classList.remove('hidden');
redirectingMsg?.classList.add('hidden');
return;
}
redirectingMsg?.classList.add('hidden');
downloadMsg?.classList.remove('hidden');
if (isValidUrl(iosUrl)) {
iosBadge?.classList.remove("hidden");
iosBadge.href = iosUrl;
}
if (isValidUrl(androidUrl)) {
androidBadge?.classList.remove("hidden");
androidBadge.href = androidUrl;
}
}
if (platform === "android" && isValidUrl(androidUrl)) {
window.location.href = androidUrl;
} else if (platform === "ios" && isValidUrl(iosUrl)) {
window.location.href = iosUrl;
} else {
showBadges();
}
});
HTML + Minified CSS (Only for Option 2)
Paste before the JavaScript snippet.
This shows the UI for “Redirecting…” and fallback badges.
style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}a,a:visited,a:active{color:unset;text-decoration:none}.loader{width:35px;height:35px;border:5px solid #047857;border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}html{overflow:hidden}.wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:1em;background-color:#f0f0f0;overflow:hidden}.content{text-align:center}.content h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;margin:1em;font-weight:500;color:#222}.hidden{display:none !important}.iconMsg{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1rem;color:#222;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif}.iconMsg h2{font-size:1.2rem;font-weight:600}.badges{margin-top:16px}.badges a{display:block;margin-bottom:0.8em;font-weight:500}#iconMsg .download-icon path{fill:#047857}.ml-button{border-radius:10px;padding:1em 2em;background-color:black;color:white !important;width:100%}style>
div class="wrapper">
div class="content" id="redirectingMsg">
h2>Redirecting...h2>
span class="loader">span>
div>
div id="downloadMsg" class="iconMsg hidden">
svg class="download-icon" width="20" height="20" viewBox="0 0 24 24">path d="M7.70711 10.2929L11 13.5858V3a1 1 0 0 1 2 0v10.5858l3.2929-3.2929a1 1 0 1 1 1.4142 1.4142l-5 5a1 1 0 0 1-1.4142 0l-5-5a1 1 0 0 1 1.4142-1.4142Z" fill="#000"/>path d="M4 22a1 1 0 0 1 0-2h16a1 1 0 0 1 0 2H4Z" fill="#000"/>svg>
h2>Download Nowh2>
p>Get the app from available storesp>
div class="badges">
a class="hidden" id="androidBadge" href="">img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" width="120">a>
a class="hidden" id="iosBadge" href="">img src="https://developer.apple.com/assets/elements/badges/download-on-the-app-store.svg" width="120">a>
div>
div>
div id="errorMsg" class="iconMsg hidden">
svg width="20" height="20" fill="#047857" viewBox="0 0 512 512">path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>svg>
p>There was an error while trying to redirectp>
div>
div>
Step-by-Step Instructions by Platform
Shopify
Click here for a detailed step by step guide
- Go to your Shopify Admin
- Navigate to Online Store > Pages
- Click “Add page”
- Set a Title like:
stores-redirect - Click the “Show HTML” button (
) in the editor toolbar - Paste the full HTML + JavaScript code provided (Option 1 or 2)
- Click Save
- Your redirect page will be available at a URL like
https://yourstore.com/pages/stores-redirect
WordPress (Classic Editor or Gutenberg)
Option A: Using a Custom Page
- In WordPress admin, go to Pages > Add New
- Title your page:
stores-edirect - In the editor, switch to Text/HTML view (Classic Editor) or use a Custom HTML block (Gutenberg)
- Paste the full code (Option 1 or 2)
- Click Publish
Option B: Using a Plugin (for advanced users)
You can use plugins like Insert Headers and Footers or WPCode to insert JavaScript into your site if needed.
Webflow
- In your Webflow Dashboard, open your project
- Go to Pages and click “+ New Page”
- Name it something like
stores-redirect - Open the Page Settings
- Scroll to Before tag and paste the JavaScript snippet
- Use a Custom Code Embed block at the top of your page to paste the HTML + CSS (for Option 2)
- Save and publish
✅ Make sure “Custom Code” is enabled in your site settings (requires paid plan).
Squarespace
Squarespace doesn’t support full JavaScript execution in content blocks on all plans, so Option 2 (with fallback UI) is recommended only if your plan supports code injection.
- Go to Pages > Add a new Blank Page
- Name it something like
stores-redirect - Open the Edit mode
- Click “+” and choose “Code”
- In the Code Block, paste the full HTML + JavaScript
- Check “Display Source” OFF
- Save the page
✅ Note: Full code blocks only work on Business or Commerce plans.
Leave a Reply