Apple Wallet Passes (Passbook)

You can enable Apple Wallet Passes in your Shopify admin to give your customers a new way to use their gift cards: on their iOS devices in Apple Wallet. With Passes, your customers can check their gift cards' balances, redeem them easily in-store or online, and — if your store’s using Shopify POS — they’ll receive lock-screen notifications to let them know when they’re near one of your retail locations.

Tip

To use gift cards, your store must be on the Shopify plan or higher.

Enable Apple Wallet Passes

You can enable Apple Wallet Passes from the Gift Cards settings page in your Shopify admin:

  1. From your Shopify admin, click Settings, and then click Gift Cards.

  2. In the Apple Wallet section, click the checkbox beside Enable Apple Wallet Passes:

    Enable apple pass

  3. If you want to customize the appearance of your gift cards in Apple Wallet, update the available text, color, and image settings. You can change these settings later if you want.

    Customize apple pass

  4. When you're done, click Save.

After you enable Apple Wallet Passes, your store's gift card page will include an Add to Apple Wallet button:

Apple pass email

Your Gift card created notification will also be updated to include the Apple Wallet button code snippet:


{% if gift_card.pass_url %}
<a href="{{ gift_card.pass_url }}" class="apple-wallet-button">
  <img src="{{ 'gift-card/add-to-apple-wallet.png' | shopify_asset_url }}" alt="Add to Apple Wallet" width="120" height="40">
</a>
{% endif %}

Tip

If your store uses a customized theme, an unsupported theme, or a Premium Shopify theme, then you might need to update the gift_card.liquid template file before your gift card page displays an Add to Apple Wallet button.

Customize your Apple Wallet Passes

You can change the way your Apple Wallet Passes look to match your store's branding:

Any customizations you make will also affect Passes that your customers have already downloaded.

Change text and background colors

  1. From your Shopify admin, click Settings, and then click Gift Cards.

  2. In the Apple Wallet section, update the available text, color, and image settings:

    Customize apple pass

By default, your Apple Wallet Passes display the Shopify gift card icon in the header:

Gift card icon

To use a custom logo:

  1. From your Shopify admin, click Settings, and then click Gift Cards.

  2. In the Apple Wallet section, check Use a custom logo.

  3. Click Choose File to select an image file:

    Custom logo
    Make sure the image file isn't larger than 90px x 90px. Learn more ›

    Tip

    You can base your custom logo on the default icon: download a copy of it here.

  4. When you're done, click Save. The preview will update to display the new logo.

By default, your Passes display a Shopify banner under the header:

Gift card header

To use a custom banner:

  1. From your Shopify admin, click Settings, and then click Gift Cards.

  2. In the Apple Wallet section, check Use a custom banner.

  3. Click Choose File to select an image file:

    Custom banner
    Make sure the image file isn't larger than 1125px x 432px. Learn more about resizing your image files ›

    Tip

    You can base your custom banner on the default Shopify banner: download a copy of it here.

  4. When you're done, click Save. The preview will update to display the new banner.

Customize your Gift Card page

After they purchase a gift card, your customers can follow a link from their Gift card created email to download an Apple Wallet Pass. If your store uses a customized theme, an unsupported theme, or a Premium Shopify theme, then you might need to update the gift_card.liquid template file before your gift card pages display an Add to Apple Wallet button.

Tip

If your theme has the Apple Wallet Pass button already, then you don't need to add anything. You should see the snippet in your gift_card.liquid template.

To add an Add to Apple Wallet button to your gift card page:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. In the Templates directory, open the gift_card.liquid file.

  4. Copy this code snippet:

    
    {% if gift_card.pass_url %}
    <a href="{{ gift_card.pass_url }}"><img id="apple-wallet-badge" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="Add To Apple Wallet"></a>
    {% endif %}
    
    
  5. Paste the code snippet anywhere within the footer element in the gift_card.liquid file. If your file doesn't have a footer element, add this code instead:

    
    <footer role="contentinfo">
    {% if gift_card.pass_url %}<a href="{{ gift_card.pass_url }}"><img id="apple-wallet-badge" src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="Add To Apple Wallet"></a>{% endif %}
    </footer>
    
    
  6. When you're done, click Save. Your store's gift card page will now display an Add to Apple Wallet button.

Customer experience

Your customers can download Apple Wallet Passes to their iOS device from the notification email they receive upon purchase: follow the link to the gift card page, and click the Add to Apple Wallet button to open the gift card automatically in Apple Wallet (or in Passbook on older iOS devices).

Tip

To open a .PKPASS file on a device that is not iOS 6 or later, you can download a third-party .PKPASS file viewer.

The front of the Pass displays your store information, the gift card's active balance, and its unique QR code:

Apple pass front

When a customer presents a gift card using Apple Wallet, you can scan the QR code with a 2D scanner, or the camera on your iPad if you are using the Shopify POS app.

The back of the Pass displays your store's terms of service, and the option to change the notification settings.

If you're using Shopify POS at a fixed retail location, then customers who have downloaded Passes will receive lock-screen notifications when they're nearby your store:

Apple pass notification

Note

The notifications will use your store's physical address, which might be different from the address in your admin.

Customers can deactivate these notifications from within Apple Wallet on the back of your store's Pass.

Disable Apple Wallet Passes

  1. From your Shopify admin, click Settings, and then click Gift Cards.

  2. In the Apple Wallet section, uncheck Enable Apple Wallet Pass:

    Enable apple pass

Tip

If you disable Apple Wallet Passes, any existing Passes for your store can still be redeemed.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free