How to Create an App Clip in Xcode

Oscar de la Hera Gomez
Apple's promotion for App Clip Codes.

We are proud to announce that we have launched our first App Clip as part of our Sans Hands™ experience and wanted to share our findings with you in hope that it speeds up your development or aids you in understand what it takes. To find out more about what it takes to generate a QR Code or NFC Tag for your App Clip, click the button linking to the relevant article below.

What is an App Clip?

App Store Connect's first screen for App Clip generation

You can have many App Clips for a single app.

What an App Clip can do.

App Clip's can be activated in many ways.

App Clips are a great way for users to quickly access and experience what your app has to offer. An App Clip is a small part of your app that’s discoverable at the moment it’s needed. App Clips are fast and lightweight so a user can open them quickly. Whether they’re ordering take-out from a restaurant, renting a scooter, or setting up a new connected appliance for the first time, users will be able to start and finish an experience from your app in seconds. And when they’re done, you can offer the opportunity to download your full app from the App Store.
- Apple Inc, 2021.

Ultimately, we believe that App Clips create a new paradigm of opportunities for Marketers and Creators by allowing them to offer customers functionality without having to go through the App Store. For example:

  • You're at a Starbucks and you want to order a coffee. Don't want to download the app for just one coffee? No problem. Scan the QR Code or Tap the NFC on the coffee that you want and press pay.
  • You're at a Train Station and you need to buy a train ticket ? Tap the NFC of the station you want to go to and press pay.
  • You're Nike and you're about to drop the latest Sneaker and want an exclusive, never done before way to sell your shoes? Create a map location where people can access an Sneakers App Clip to just that sneaker and turn the drop into a scavenger hunt.
  • You're a restaurant and want to offer a seamless, contactless delivery of your food to your customer. You package your restaurant App as an App Clip and replace your menu QR Code with the App Clip.
  • You're a retailer and want to offer Virtual Try On of your products to customers. You create an app clip which based on the QR Code on the product opens up a different product to try on. i.e. here'es this lipstick or there's that shoe.

Finally, it's worth noting that an App can offer multiple app clips, which can be activated in different ways!

How do you create it?

App Clips are created via Xcode, which create a target for the project and do the rest of your magic for you. When you archive the app, XCode will package your iOS app with your App Clip, and will upload the experiences as a united package. Let's walk through what that looks like.

Step One: Create your Target

How to add a target in XCode

Step Two: Make that target an App Clip

How to select a new App Clip target in XCode.

Step Three: Give it a Name

How to name a new App Clip target in XCode.

Step Four: Create the Schema

The pop up that appears when creating an app clip.

Step Five: Update your Targets

How to link files to the target.

The beauty about App Clips is they can share code, making it one codebase with many utilities.

Step 6: Create your App Clip Environment

Please note that this step is only needed if you need to seperate code that requires libraries (Firebase) that aren't needed in libraries or targets that you do not want to include in your App Clip.

How to create the app clip flag.

Start by navigating to your App Clip target’s build settings and creating a new value for the Active Compilation Condition build setting (for example, APPCLIP). Then, add a check in your shared code where needed, to exclude code you don’t want to use in your App Clip. - Apple Inc, 2021.

Step 7: Create your Pod File

Please note that this step is only needed if you want to include CocoaPods in your App Clip.

The App Clip POD file.

Run Pod Update.

Step 8: Embed Frameworks

Please note that this step is only needed if you require to embed frameworks.

What Sans Hands App Clip Embeded Frameworks looks like.

Next Steps: Make the App Clip available for download

Now that you have setup your App Clip, you must make it available to be accessed by your customers.

There are many ways to make an app clip accessible to your customers but the most common are:

  • App Clip QR Code
  • Website Smart App Banner

To learn how to make the App Clip accessible as a QR code or a Website Smart App Banner, follow the tutorials linked below.

Any Questions?

We are actively looking for feedback on how to improve this resource to help developers make App Clips better, faster. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details