Skip to main content
All CollectionsBuilding Your App ClipsBackend Setup
Add Apple Smart Banners to your Shopify Online Store
Add Apple Smart Banners to your Shopify Online Store

This guide will help you add an Apple Smart Banner <meta> tag to specific product pages in a Shopify theme. The banner will only display on the selected product pages based on their product IDs.

R
Written by Reactiv App
Updated over 2 months ago

Apple Smart Banners are a feature provided by iOS that allow website owners to promote their mobile app directly in the Safari browser. When a user visits a webpage on an iPhone or iPad, a Smart Banner appears at the top of the page. This banner provides a direct link to download the app from the App Store or open the app if it’s already installed on the user’s device. They can also be used to open up App Clips.

Smart Banners improve user experience by seamlessly bridging the gap between the web and mobile apps, helping drive app downloads and encouraging app usage.

Prerequisites

• Access to the Shopify Admin panel.

• Basic understanding of Shopify Liquid templating language.
​

Steps to Add Apple Smart Banners

Open the Shopify Theme Editor

  1. Log in to your Shopify Admin.

  2. Navigate to Online Store > Themes.

  3. Find the active theme and click Actions or (...) > Edit Code.

Locate the theme.liquid File

  1. In the file editor, find the Layout section on the left sidebar.

  2. Open the theme.liquid file.

Find the <head> Section

Scroll through the theme.liquid file to locate the <head> section. This is where <meta> tags are typically defined.

Insert the Conditional Logic

Add the following Liquid code inside the <head> section. 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.

Save Your Changes

Click the Save button to apply your changes.

Test Your Implementation

  1. Visit the product pages that match the specified product IDs.

  2. Open the browser’s developer tools (usually accessible via F12 or right-click > Inspect).

  3. Verify that the <meta> tag is present in the <head> section of the page source.


If you face issues, consult Shopify’s Liquid documentation.

Did this answer your question?