Skip to main content
All CollectionsBuilding Your App
Add promo banner to promote your app on your website.
Add promo banner to promote your app on your website.

This guide will help you add a promo banner anywhere in your Shopify theme. The banner only appears in Non-Safari browsers on iOS devices and all browsers Android devices.

R
Written by Reactiv App
Updated over 2 months ago

Promo banner is a Shopify theme extension built by Reactiv to help you promote your mobile app seamlessly on Non-Safari browsers. This banner provides a direct link to experience the clip(iOS only) or download the app from the App Store or Play store when a user visits your website on their mobile device.

To promote your Mobile App in Safari browser add smart banners to your Shopify store.

The banner is fully customizable from your Shopify theme editor and works on Shopify theme 2.0.

Prerequisites

  • Access to the Shopify Theme Editor.

  • Your clip URL provided by Reactiv.

Steps to add the banner to your website

Open the Shopify Theme Editor

  1. Log in to your Shopify Admin.

  2. Navigate to Online Store > Themes.

  3. Click on the Customize button in your current theme.

Add the Promo Section to your website header

  1. Click on Add section in the Header of the site.

  2. Switch to the Apps tab in the callout card

  3. Select "App Promo Banner" by Reactiv.

  4. Drag and drop the newly added section to the desired position.

Customize the banner

  1. App Icon: Add an icon that matches the app icon in your App store and Play store listing.

  2. Heading: Add an optional heading, it can be the app name or anything short to grab attention.

  3. Description: Explain why your customers should install the app.

  4. CTA button links: Add the App store and Play store links in the respective fields. The banner will automatically show the right button based on user's device.

  5. Visibility: Choose all the pages you want to show the banner. Eg, Home, Collection and Product.

    1. You can also choose specific collections and products.

  6. Branding: Customize the text and color of the CTA button as per your brand.

Save Your Changes

  1. Click the Save button to apply your changes.

Test the banner

  1. Open your website in a Non-Safari browser on your phone.

  2. Visit the pages your have configured in the settings to see the banner in action.

  3. The CTA button should redirect you to the App store or Play store where you can install your app.

If you face issues, reach out to us at [email protected]

Did this answer your question?