Customize Your Mobile Download Banner

Sahand Ansari
  • Updated

Once your app is live, you will want to prompt your mobile website visitors to download the app! With 81% of Shopify’s traffic coming from mobile, this is a great way to drive organic traffic and increase downloads. The banner will direct users directly to their App or Google Play Store to easily download the app onto their device. In this article, we will walk through the steps on how to configure your smart app banner, by displaying your app icon in the pop-up for a continued on-brand experience.

How Does it Work? 

The banner works by adding a <script> tag to your website. To set this up, you can place it within any page on your Shopify theme selectively or place this directly in your Shopify theme.liquid file. 

Here is the copy to update and fill in with your own data (ie., title of banner, App Store ID, Android bundle ID): 

<script async type="text/javascript"
src="https://cdn.tapcart.com/mobile-download-banner/banner-min.js
?marketingCopy=Download+our+App
&ctaEvent=OPEN
&title=
&androidLive=true
&iosLive=true
&appStoreId=
&playStoreId=
&shop=domain.myshopify.com">
</script>

Custom Banners

To further customize your Mobile Download Banner, you can leverage a customized <script> tag directly within your website by adding custom values to the parameters. 

Additional Parameters 

Show banner for specific locales: 

<meta name="tapcart-banner:locale” content=“CN”>
<meta name="tapcart-banner:hide" content="true" >

Move the banner to the top of the page: 

<meta name="tapcart-banner:top" content="true" >

How to Edit Your Shopify Theme? 

dfd3688f-e050-40ed-a66a-c67cf69ca817.gif

Steps  

  1. Navigate to your Shopify Dashboard 
  2. Then proceed to your Shopify Themes Editor: select ‘Actions’ > ‘Edit Code'
  3. Select the 'Action' button and pick  Edit Code from the dropdown 
  4. Click ‘theme.liquid’ in the file selector to edit your Shopify theme code
  5. Add Tapcarts' <meta> tag inside the two <head> </head> tags in the 'theme.liquid' file 

    <head>
    ...
    <meta name="tapcart-banner:top" content="true"/>
    ...
    </head>

     

    • Important Note: The first <head> will appear towards the top of the file. The second </head> with a closing tag will appear right before the <body> tag. The tags must be inside the two < head > </ head > tags. 
  6. Click ‘Save’ and you are all set! 

More Questions 

To learn more about Tapcart, visit Tapcart Academy to become a mobile app expert!

If you have additional questions about setting up the Mobile Download Banner, we’re happy to help! Please reach out to a Tapcart Team member through our LiveChat in your dashboard or you can email us at help@tapcart.co!

Related articles