Membership Card Design Editor (Colors by Rank, Logo, Live Preview)

Apple Wallet Google Wallet Membership Card Design Rank Logo Live Preview Membership Rank

You can design your Wallet membership card from the design editor in the store admin screen, editing the background color, logo, and text color per rank while watching a live preview. There's no need to redo the whole design like a plastic card — once you change the design, it's reflected on both Apple Wallet and Google Wallet right away.

This article covers how to use the design editor, managing designs per rank, recommended image specs, and how changes are reflected on existing cards once published.

Opening the editor

From the store admin screen, open "Store App" → "Membership Card" → "Design Editor." The color and image settings panel appears on the left, with live previews for Apple Wallet and Google Wallet side by side on the right.

What you can edit

  • Background color — the card's main color. Set your store's brand color
  • Text color — the color for text such as the store name, member number, and rank name. Make sure it contrasts well with the background color
  • Label color — the color of small label text like "Member Number" and "Rank." Can be set independently of the body text
  • Logo image — your store's logo shown at the top-left of the card (see the recommended specs below)
  • Strip image (optional) — a wide banner image shown at the top of the card. Useful for storefront photos or campaign visuals
  • Icon — a small icon shown in notifications and the Wallet list. You can reuse the same image as your logo

Separate designs per rank

You can configure a different design for each membership rank (e.g. Regular, Silver, Gold, Platinum). As a customer's rank increases, their Wallet membership card design automatically switches too.

Typical design examples:

  • Regular — your store's brand color (e.g. black text on a white background)
  • Silver — silver or light gray
  • Gold — deep gold text on a gold background (e.g. #D4AF37)
  • Platinum — gold accents on a black background

Giving each rank a "special feel" motivates customers to want to level up.

Live preview

The preview on the right updates instantly as you change settings. Since you can compare Apple Wallet and Google Wallet side by side, you can achieve a consistent look across both platforms.

The preview shows the customer's name and member number as sample data. When actually issued, the customer's registered information is inserted.

Recommended specs for the logo and images

  • Logo image
    • Recommended size: 480×150 px (3.2:1 aspect ratio)
    • Format: PNG (transparent background recommended) or JPEG
    • File size: 1 MB or less
  • Strip image
    • Recommended size: 1125×432 px (2.6:1 aspect ratio)
    • Format: PNG or JPEG
    • File size: 2 MB or less
  • Icon
    • Recommended size: 87×87 px or larger (square)
    • Format: PNG (transparent background recommended)
    • File size: 500 KB or less

If you upload a higher-resolution image, the relay router automatically resizes and optimizes it. The original image is kept as-is, so you can regenerate it later if needed.

Color design tips

  • Make sure the background and text colors contrast well — ensure the member number is easy to read even outdoors or in a dim store
  • Choose a logo that contrasts with the card's background color — a white logo pairs well with a dark background, and a dark logo pairs well with a light background
  • Create a "visual jump" between ranks — if Regular and Gold look too similar, the sense of achievement from ranking up gets lost
  • Base it on your store's brand color — matching it with your existing signage, logo, and packaging helps customers recognize it as "the same store"

Publishing changes

Once you've finished editing, click the "Publish" button in the top-right of the screen. When published:

  • Newly issued membership cards are issued with the new design right away
  • Membership cards already in existing customers' Wallet are also automatically updated to the new design (pushed via Apple's / Google's servers)

Updating existing membership cards can take anywhere from a few minutes to tens of minutes (depending on Apple's / Google's push delivery timing).

Saving as a draft

Edits made before clicking "Publish" are automatically saved as a draft. This lets you continue editing later, and any design experiments won't affect existing customers' membership cards.

Getting started

  1. From the store admin screen, open "Store App" → "Membership Card" → "Design Editor"
  2. Select the rank you want to edit from the tab on the left
  3. Set the background color, text color, and label color (using the color picker or a HEX value)
  4. Upload the logo image and, optionally, a strip image
  5. Check how it looks in both Apple Wallet and Google Wallet in the preview on the right
  6. Edit other ranks the same way
  7. Click "Publish" to apply the changes

Related help

Published: 2026-05-25 Updated: 2026-07-02
Related articles