Skip to content
English - Canada
Contact us
  • There are no suggestions because the search field is empty.

2. Add Apple's Smart Banner to your Shopify Store | Reactiv Support Center

Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1.Copyright (c) 2023, Intercom, Inc. ([email protected]) with Reserved Font Name "Inter". This Font Software is licensed under the SIL Open Font License, Version 1.1. Table of contents 2. Add Apple's Smart Banner to your Shopify Store

2. Add Apple's Smart Banner to your Shopify Store

Enable customers to launch your Reactiv Clips experience when visiting from the Safari browser on an iOS device

Written by Reactiv App
Updated over 9 months agoReactiv App Table of contents

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

  1. Log in to your Shopify Admin.

  2. Navigate to Online Store > Themes.

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

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

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

  2. Open 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

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.

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.

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.

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

  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.

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.

Did this answer your question?😞😐😃