Overview
Apple's Smart Banner enables customers to launch your Reactiv Clips experience when visiting on an iPhone or iPad and using the Safari browser.
Follow this guide to add Apple's Smart Banner to specific pages on your Shopify theme.
How it works
When a customer visits a webpage on an iPhone or iPad using the Safari browser, the Smart Banner provides a direct link to download the app from the App Store if the app is not already installed on the customer's device. If the app is already installed, it automatically launches.
When Apple Smart Banners are enabled in conjunction with Reactiv Clips, customers who don't have the app installed will get prompted to open the page in an App Clip.
Prerequisites
• Access to the Shopify Admin panel.
• Basic understanding of Shopify Liquid templating language.
Steps to Add Apple Smart Banners
1. Open the Shopify Theme Editor
Log in to your Shopify Admin.
Navigate to Online Store > Themes.
Find the active theme and click Actions or (...) > Edit Code.
2. Locate the theme.liquid File
In the file editor, find the Layout section on the left sidebar.
Open the theme.liquid file.
3. Find the <head> Section
Scroll through the theme.liquid file to locate the <head> section. This is where <meta> tags are typically defined.
4. Insert the Conditional Logic
Choose the option that you prefer and add the Liquid code below inside the <head> section.
Option 1 (RECOMMENDED): Apply Smart Banner to all of your Collection and Product pages
{%- if template == "product" or template == "collection" -%} <meta name="apple-itunes-app" content="app-id=6736528462, app-clip-bundle-id=com.reactivapp.reactivapp-merch.Clip, app-clip-display=card"> {%- endif -%}
Option 2: Apply Smart Banner to specific Collection pages
This code checks whether the current page is a collection page and whether its collection ID matches one of the specified IDs.
{%- if template == "collection.all" and collection and collection.id == 284732719244 -%} <meta name="apple-itunes-app" content="app-id=6736528462, app-clip-bundle-id=com.reactivapp.reactivapp-merch.Clip, app-clip-display=card"> {%- endif -%}
Option 3: Apply Smart Banner to specific Product pages
This code checks whether the current page is a product page and whether its product ID matches one of the specified IDs.
{%- if template == "product" and product and product.id == 7817173237933 -%}
<meta name="apple-itunes-app" content="app-id=6479920683, app-clip-bundle-id=com.reactivapp.reactivapp-merch.Clip, app-clip-display=card">
{%- endif -%}Notes:
Ensure that the app-id, app-clip-bundle-id, and app-clip-display values in the <meta> tag are correct and relevant to your app. You can find this information in your Apple App Store Connect account.
The if condition ensures the <meta> tag is only added for the specified product IDs.
5. Save Your Changes
Click the Save button to apply your changes.
6. Test Your Implementation
Visit the product pages that match the specified product IDs.
Open the browser’s developer tools (usually accessible via F12 or right-click > Inspect).
Verify that the <meta> tag is present in the <head> section of the page source.
If you face issues, consult Shopify’s Liquid documentation.