Membership Card Design Editor (Colors by Rank, Logo, Live Preview)
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
- From the store admin screen, open "Store App" → "Membership Card" → "Design Editor"
- Select the rank you want to edit from the tab on the left
- Set the background color, text color, and label color (using the color picker or a HEX value)
- Upload the logo image and, optionally, a strip image
- Check how it looks in both Apple Wallet and Google Wallet in the preview on the right
- Edit other ranks the same way
- Click "Publish" to apply the changes
Related help
-
Smaregi x ReceiptRoller — Digital Receipts, Customer Management, and Sales Analysis in One AppLearn how ReceiptRoller Link connects with Smaregi checkouts to unify automatic digital receipt issuance, member management, sales analysis with AI advice, Apple/Google Wallet membership cards, SNS integration, and flyer distribution. Install "ReceiptRoller Link" from the Smaregi App Marketplace to get started today with no complicated API setup required.
-
What Is the Store App Platform?The Store App Platform lets you publish your own branded app across four channels — Web, iOS, Android, and the LINE mini app — for every store. This article covers the overview, available channels, and how to get started.
-
Overview of Apple Wallet / Google Wallet Membership CardsThe relay router's store app platform can issue your store's original membership card on both Apple Wallet (iPhone) and Google Wallet (Android). This article covers what a Wallet membership card is, the benefits for customers and stores, what's displayed, POS integration, and the setup flow.
-
Store Help Index (Store DX, Digital Receipts, Reservation Management, Retail Media)This is the ReceiptRoller store help index. It organizes every help article you need for store DX into three categories: customer touchpoints (store app platform, digital receipts, reservation management, retail media including media displays, coupons, CRM, social media management, and AI agent integration), store operations (store data, product management, e-commerce integration, OMS, WMS, shelf analytics, sales analytics, and staff), and account & extensions (getting started, roles and permissions, and the developer API).
-
Setting Up Location NotificationsYou can set up location notifications for your Wallet membership card. This article covers how location notifications work, how Apple Wallet and Google Wallet each behave, setup steps, tips for writing the notification message, permissions the customer needs, and usage notes.