Compatibility: All Shopify themes
This guide will walk you through creating a smart banner that appears on your mobile Shopify websites, encouraging users to install your app.
What is a Smart Banner?
A smart banner is a promotional message that automatically detects if a user is viewing your website on a mobile device. It typically displays an app icon, a short description of your app's benefits, and buttons for users to download the app from the relevant app store (Google Play Store or Apple App Store).
Benefits of Using Smart Banners
- Increased App Installs: Smart banners provide a convenient way for users to discover and install your app directly from your website.
- Improved User Experience: They offer a seamless transition from website to app, keeping users engaged.
Steps on how to add Smart Banner in your Shopify store
Step 1. Open your code editor
From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code
Step 2. Create a section
Under the Sections folder, create a new section. Delete the code and replace it with the code below.
{% style %}
.app__installation--banner {
display: none;
}
@media only screen and (max-width: 768px) {
.app__installation--banner {
width: 100%;
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
display: grid;
grid-template-columns: 10px 60px 1fr 70px;
gap: 5px;
align-items: center;
justify-items: center;
padding: 5px;
font-size: 8px;
line-height: 1.2;
}
svg.icon.icon-close {
width: 15px;
}
.app__installation--button {
width: 100%;
border: 1px solid;
padding: 7px 5px;
border-radius: 7px;
font-size: 12px;
}
.app__installation--button.app__installation--android {
display: none;
}
.app__installation--button.app__installation--apple {
display: none;
}
}
@supports (-webkit-touch-callout: none) {
@media only screen and (max-width: 768px) {
.app__installation--button.app__installation--apple {
display: block;
}
}
}
@supports not (-webkit-touch-callout: none) {
@media only screen and (max-width: 768px) {
.app__installation--button.app__installation--android {
display: block;
}
}
}
{% endstyle %}
<smart-banner>
<!-- Smart banner written by https://made4uo.com -->
<div class="app__installation--banner" id="installation-banner">
<button>{% render 'icon', icon: 'close' %}</button>
<div class="app__installation--image">
{{ section.settings.image | image_url: width: 500 | image_tag: alt: section.settings.image }}
</div>
<div class="app__installation--text">
{{ section.settings.text }}
</div>
<div class="app__installation--buttons">
<a href="{{ section.settings.button_link_android }}" class="app__installation--button app__installation--android"
aria-label="Google Play Store">
{{ section.settings.button_label }}
</a>
<a href="{{ section.settings.button_link_apple }}" class="app__installation--button app__installation--apple"
aria-label="Apple Play Store">
{{ section.settings.button_label }}
</a>
</div>
</div>
</smart-banner>
<script>
class SmartBanner extends HTMLElement {
constructor() {
super();
this.closeButton = this.querySelector("button");
this.closeButton.addEventListener("click", this.closeBtnListener.bind(this));
this.addAppBtns = this.querySelectorAll('a');
this.addAppBtns.forEach(btn => btn.addEventListener("click", this.addAppBtnListener.bind(this)));
this.deferredPrompt = null;
}
connectedCallback() {
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
this.deferredPrompt = e;
this.style.display = 'block';
});
}
closeBtnListener() {
this.style.display = "none";
}
addAppBtnListener(e) {
e.preventDefault();
if (this.deferredPrompt) {
this.deferredPrompt.prompt();
this.deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
this.closeBtnListener();
}
this.deferredPrompt = null;
});
} else {
window.location.href = e.currentTarget.href;
}
}
}
customElements.define('smart-banner', SmartBanner);
</script>
{% schema %}
{
"name": "Smart banner",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Logo image"
},
{
"type": "richtext",
"id": "text",
"label": "Text content"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "button_link_android",
"label": "Button android link",
"info": "Sample link: https://play.google.com/store/apps/details?id=com.sample.app"
},
{
"type": "text",
"id": "button_link_apple",
"label": "Button apple link",
"info": "Sample link: https://itunes.apple.com/in/app/sample-app/id1234567890"
}
],
"presets": [
{
"name": "Smart banner"
}
]
}
{% endschema %}
|
Step #3. Save the changes
Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.
Step #4. Customize theme
Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add a section named "Smart banner" in your header group. Make sure to SAVE once you are done customizing.
Conclusion
By following these steps and customizing the code, you can create an effective smart banner to promote your app and increase user engagement on your mobile website.
0 comments