What is a mobile app banner?
A mobile app banner sits at the top of your mobile website, encouraging users to download your mobile app. It's the easiest way to direct more of your mobile traffic toward your app, driving more sales, a higher average order value, and easier customer engagement.
You can install the StoreLab mobile app banner here.
How to design your app banner
Step 1: Content
The first step in setting up your custom App Banner is adding your unique content.
Here, you can add your logo to the banner (we recommend SVG or PNG), display the name of your application and add a custom message to incentivise your audience to download.
Getting the messaging here right can be a crucial part of what makes your app successful. Be conscious of what sort of offering your audience will respond to and use that to drive more downloads to your app.
Step 2: Design
We've provided you with a number of design choices to ensure that your custom App Banner fits in with your existing theme.
Let's walk through these features and give you an idea of how each one impacts the look of your mobile App Banner;
Margin
The margin feature allows you to pin your mobile app banner to the top of your mobile website or keep it floating so that it stays on the top of your screen as you scroll down the mobile website.
Here you have two options:
1. Fit - Your mobile App Banner will stay pinned to the top of your mobile website. It will not be visible as a user scrolls down the page and will stay at the top of the website.
2. Float - Your mobile App Banner will stay floating at the top of your mobile website. It will follow the user as they scroll down the page, floating at the top of their mobile website. A user will have to click 'X' in order to stop seeing the banner.
Shape
The shape feature enables you to change the corner style of your mobile app banner from sharp to rounded. Selecting between these two options will change the look of your app banner as shown below;
1. Sharp - The corners of your mobile app banner and the 'action button' will be square.
2. Rounded - The corners of your mobile app banner and the action button will be rounded as the earlier screenshots.
Layout
The layout features gives you an alternative orientation for your mobile app banner in case the default setting doesn't fit well with your theme.
Here is an example of what the vertical layout option looks like;
This layout is more horizontally stretched and shorter in height than the default 'horizontal' orientation. The action button is also on the right of the text as opposed to diagonally underneath.
Please feel free to play around between these two options to decide which looks best on your mobile website!
Action Text & Button Colour
The final feature as part of this guide is the customisability over your Action Button text & button colour.
We offer you complete customisability over the colour of your Action Button itself and the colour of your Action Button text will be picked automatically. This will be based on what has the highest contrast with the colour you've chosen (between black or white).
If you want to change the Call To Action text itself, you can choose between our 3 options of View, Get or Show.
Step 3: Details
In order for us to automatically link users to download your application, you need to provide us with some details.
We will need your Play Store Bundle ID and your App Store App ID. In order to get these, please follow the steps below:
(1) Navigate to the Google Play Store listing page for your app and take your Android Bundle ID from the URL as shown in the screenshot below.
A typical Play Store Bundle ID will look something like 'app.storelab.(your company name)'.
(2) Navigate to your Apple App Store listing page for your app and take your App Store App ID from the end of the URL as shown in the screenshot below.
A typical App Store App ID will look like a string of numbers and will always be at the end of your App Store Listing URL.
(3) Fill in your Play Store Bundle ID and App Store App ID on the 'Details' section of the App Banner by StoreLab as shown below. Click 'Save Changes' once done.
Saving & Publishing
At any point throughout this process, you can save your changes and continue at a later time without losing your progress.
Once you have filled in the 3 sections for Content, Design & Details - you are ready to publish your new App Banner!
Only 'Published' changes will be reflected in your live App Banner and 'Saved' changes will be pending Publishing.
How to add your mobile app banner to your mobile website
In order for your App Banner to be visible on your mobile website, you will need to enable it in your Shopify Theme Settings.
Doing this is simple and can be completed in a few simple steps:
(1) Navigate to the 'Online Store' section of your Shopify Admin Panel.
(2) Click 'customise' underneath your active Theme.
(3) Once you have loaded up the Theme Editor, click on the icon for 'App Embeds' on the left hand side of your screen as shown below.
Once this has been completed, your app banner will be visible on your mobile website.
Need Assistance?
If you are running into any trouble completing this integration, please don't hesitate to reach out!
You can email us at [email protected] or call us on +44 20 4586 3434 / +1 719 628 5770
A member of our Implementation Team will be in touch to assist you further.