{%- comment -%} Mobile App Banner - a free, copy-paste Shopify section from Vunda (vunda.app). Shows a dismissible "get our app" bar to mobile visitors, with the correct store button (App Store on iOS, Google Play on Android). Built to drop into ANY theme: - all class names are namespaced (vapp-) to avoid collisions - defensive CSS resets so theme button/link styles do not leak in - the banner is moved to on load, so a transformed or overflow-hidden section wrapper can never trap the fixed element - everything is configurable from the theme editor (no code edits) - behaviour ships in a bundled javascript asset tag (deferred, loaded once per section type); per-instance config is read from data- attributes How to use: Online Store > Themes > Edit code > Sections > Add a new section, paste this in, then add "Mobile App Banner" to your theme and set your links. {%- endcomment -%} {%- comment -%} Per-instance colours and id need Liquid, and Liquid is NOT evaluated inside the stylesheet asset tag - so, per Shopify's own guidance, instance-specific styling stays in an inline style block. {%- endcomment -%} {% javascript %} (function () { function initBanner(banner) { var dismissDays = parseInt(banner.getAttribute('data-vapp-dismiss-days'), 10) || 30; var STORAGE_KEY = 'vapp-banner-dismissed-' + banner.id; function isMobile() { var hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0; return hasTouch && window.matchMedia('(max-width: 767px)').matches; } function detectPlatform() { var ua = navigator.userAgent || navigator.vendor || ''; if (/iPad|iPhone|iPod/.test(ua) && !window.MSStream) return 'ios'; if (/android/i.test(ua)) return 'android'; return null; } function isDismissed() { try { var raw = localStorage.getItem(STORAGE_KEY); if (!raw) return false; if (Date.now() > JSON.parse(raw).expiry) { localStorage.removeItem(STORAGE_KEY); return false; } return true; } catch (e) { return false; } } function setDismissed() { try { localStorage.setItem( STORAGE_KEY, JSON.stringify({ expiry: Date.now() + dismissDays * 86400000 }) ); } catch (e) {} } if (isDismissed() || !isMobile()) return; var platform = detectPlatform(); if (!platform) return; var target = banner.querySelector('.vapp-banner__button[data-vapp-platform="' + platform + '"]'); if (!target) return; // no app link configured for this visitor's platform var buttons = banner.querySelectorAll('.vapp-banner__button'); for (var i = 0; i < buttons.length; i++) { if (buttons[i].getAttribute('data-vapp-platform') !== platform) { buttons[i].style.display = 'none'; } } // Escape any transformed / overflow-hidden section wrapper so position:fixed works. if (banner.parentNode !== document.body) document.body.appendChild(banner); banner.hidden = false; banner.classList.add('vapp-is-open'); var closeBtn = banner.querySelector('[data-vapp-close]'); if (closeBtn) { closeBtn.addEventListener('click', function () { banner.classList.remove('vapp-is-open'); banner.classList.add('vapp-is-closing'); setDismissed(); setTimeout(function () { banner.remove(); }, 300); }); } target.addEventListener('click', setDismissed); } // This script is bundled and deferred (one copy per section type), so the DOM is // ready and a single pass initialises every Mobile App Banner on the page. var banners = document.querySelectorAll('.vapp-banner'); for (var b = 0; b < banners.length; b++) initBanner(banners[b]); })(); {% endjavascript %} {% schema %} { "name": "Mobile App Banner", "tag": "section", "settings": [ { "type": "header", "content": "App links" }, { "type": "image_picker", "id": "app_icon", "label": "App icon (square, e.g. 512x512)" }, { "type": "url", "id": "ios_url", "label": "App Store (iOS) link" }, { "type": "url", "id": "android_url", "label": "Google Play (Android) link" }, { "type": "header", "content": "Copy" }, { "type": "text", "id": "heading", "label": "Heading", "default": "Get our app" }, { "type": "text", "id": "text", "label": "Subtext", "default": "Shop faster with app-only deals and instant order updates." }, { "type": "text", "id": "ios_text", "label": "iOS button text", "default": "App Store", "visible_if": "{{ section.settings.ios_url != blank }}" }, { "type": "text", "id": "android_text", "label": "Android button text", "default": "Google Play", "visible_if": "{{ section.settings.android_url != blank }}" }, { "type": "header", "content": "Appearance" }, { "type": "color", "id": "background_color", "label": "Background", "default": "#ffffff" }, { "type": "color", "id": "text_color", "label": "Text", "default": "#1a1a1a" }, { "type": "color", "id": "button_color", "label": "Button", "default": "#000000" }, { "type": "color", "id": "button_text_color", "label": "Button text", "default": "#ffffff" }, { "type": "header", "content": "Behaviour" }, { "type": "range", "id": "dismiss_days", "min": 1, "max": 90, "step": 1, "unit": "d", "label": "Stay hidden after dismiss", "default": 30 }, { "type": "header", "content": "Credit" }, { "type": "checkbox", "id": "show_credit", "label": "Show \"Powered by Vunda\" credit", "default": true, "info": "Keeps this free section free. Untick to remove the small credit link." } ], "presets": [ { "name": "Mobile App Banner" } ] } {% endschema %}