How to Enable the Promo Banner in Your Shopify Theme
Log in to your Shopify admin.
In the left sidebar, click the Sales channels and search for Online Store.
Online Store will appear in the left bar, then select Themes right under.
In the main window, under your current theme, click the Customize button.
In the theme editor, you should already be in the Sections area of the theme. If not, click the Sections icon → Add Section → Apps
Note that you can add this banner to your desired page, not just Home.
In the new window, navigate to the right tab called Apps, then select App Install Promo.
Important: If you change or update your Shopify theme, you’ll need to re-enable the App Install Promo Banner using these same steps. Shopify doesn’t automatically carry over app customizations to new themes unless the theme is duplicated from an existing one.
Customize the App Promo Content
Once you’ve enabled the App Install Promo banner in your Shopify theme editor, you can personalize its design and behavior using the App embed settings panel.
Banner Content
Customize the visual and text elements that appear in the promo banner.
App Icon – Upload an image to represent your app. This icon appears alongside your text content.
Add heading – Write a short, attention-grabbing title (e.g., “Download the App”).
App desktop description – Shown to desktop users. Highlight benefits like convenience, deals, or order tracking.
App mobile description – A shorter message for mobile visitors (e.g., “Open in the Reactiv App”).
App & App Clip Links
Link your banner to your actual app downloads.
App Clip Link – (iOS only) Paste your Apple App Clip link.
iOS App Store ID – Add your iOS App Store numeric ID (e.g., 6479920683).
Android Play Store Bundle ID – Enter your app's package name (e.g., com.reactivmerch.app).
Visibility Settings
Control where and how the App Install Promo appears in your storefront. Reactiv gives you two flexible display options: Banner and CTA.
Call-to-Action Location
Banner
Displays a full-width banner at the top of your storefront.
When clicked, it opens a QR code modal for easy app download.
CTA (Call-to-Action)
A smaller floating button appears in the bottom-left corner of the page.
Tapping it also launches a QR modal with the app download QR code.
💡 Use CTA mode for a subtler presence, or Banner mode for prominent visibility on high-traffic pages.
Page Display Options
Use the toggles to control where your promo appears:
Show on Home Page – Display on your homepage.
Show on Collection Pages – Enable this option and click Choose Collections to target specific ones.
Show on Product Pages – Enable this option and click Choose Products to select individual items.
Call-to-Action Button
Customize the CTA button inside your banner or modal.
Button label – Enter your call-to-action (e.g., “Download the Reactiv App”).
Button Background Color – Choose a background color (e.g., #121212).
Button Text Color – Set the text color (e.g., #FFFFFF).
QR Code Modal
Enable and style a popup that displays a scannable QR code for easy app download.
QR Modal Title – The main heading in the modal (e.g., “Get the App”).
QR Modal Description – Describe the app’s benefits.
QR Modal Subtext – Add a line explaining the QR scan action (e.g., “Scan the QR code to download the app”).
Enable QR Gradient Color – Toggle to use a gradient background for the QR area.
Start Color – Set the start color (e.g., #121212).
End Color – Set the gradient end color (e.g., #45C0B6).
Analytics
Track performance and enable advanced targeting with these unique identifiers:
App UUID – Unique ID for your app (e.g., 426ba0c5-...).
Store UUID – Unique ID for your Shopify store (e.g., f0c13d03-...).
Don't forget to Save all the changes in your theme, so they reflect on your storefront.
💡 Need Help?
We’re here for you! Visitwww.reactivapp.com or reach out to our support team anytime for tips, troubleshooting, or personalized guidance.