Skip to main content
All CollectionsHow to promote a Shopify mobile app
How to add an app banner to your mobile website
How to add an app banner to your mobile website

Learn how to set-up an app banner on your mobile website

Josh Gare avatar
Written by Josh Gare
Updated over 2 years ago

A native mobile app provides a much better user experience than a mobile website. As such, it's important that you direct all traffic from your mobile website to your app.

One way you can do this is by adding an app banner to your mobile website. The app banner will pop-up whenever someone visits the mobile website and will prompt users to open the app if they have it or install it if they don't.

In order to add an app banner to your mobile website, follow these steps:

1. Open the Shopify theme editor

Within your Shopify admin navigate to Online StoreThemesActionsEdit Code to launch the Shopify theme editor.

2. Open the theme.liquid file

Select theme.liquid from the list of files under ‘Layout’.

3. Add app banner code snippet

Insert the following code snippet within the head tags:

<script src="https://api.vennapps.com/deeplink-banner/banner.js?shop=SHOPIFYNAME.myshopify.com"></script>{% if product %}<meta name="apple-itunes-app" content="app-id=APPLEAPPID, app-argument=URLSCHEME://product/{{ product.id }}">{% else %}<meta name="apple-itunes-app" content="app-id=APPLEAPPID">{% endif %}

Make sure to replace all instances of the following:

  • SHOPIFYNAME = you can get this from your Shopify admin dashboard (it’s contained in the URL before ‘.myshopify.com’)

  • APPLEAPPID = you can get this from the Apple App Store URL (it's the long number that follows '/id' in the URL)

  • URLSCHEME = this is the same as your SHOPIFYNAME unless told otherwise

4. Save the theme

Save the theme when finished.

Did this answer your question?