# Wallet kartlarınızı markalayın: Logo, renkler, damga ikonu — markanız Apple ve Google Wallet’ta

> Dijital sadakat kartınızı 10 dakikada tamamen markanıza nasıl uyarlarsınız — logo yükleme, marka ve vurgu renkleri, kendi damga ikonunuz, arka plan görseli ve ödül durumunda kendi eyebrow metniniz. Apple Wallet banner’ı (480×150) ve Google Wallet dairesi (660×660) için spec açıklamasını da içerir.

Canonical: https://reloop.cards/tr/blog/wallet-custom-branding-logo-farben
Published: 2026-04-28
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'Wallet kartlarınızı markalayın: Logo, renkler, damga ikonu — markanız Apple ve Google Wallet’ta',
  description:
    'Dijital sadakat kartınızı 10 dakikada tamamen markanıza nasıl uyarlarsınız — logo yükleme, marka ve vurgu renkleri, kendi damga ikonunuz, arka plan görseli ve ödül durumunda kendi eyebrow metniniz. Apple Wallet banner’ı (480×150) ve Google Wallet dairesi (660×660) için spec açıklamasını da içerir.',
  publishedAt: '2026-04-28',
  updatedAt: '2026-08-02',
  category: 'Kılavuz',
  tags: [
    'Custom Branding',
    'Apple Wallet',
    'Google Wallet',
    'Logo',
    'Marka Renkleri',
    'Sadakat Kartı',
    'Tasarım',
  ],
  readingMinutes: 8,
};

Varsayılan reloop görünümüne sahip bir **dijital sadakat kartı** teknik olarak çalışır — ama bu bir pazarlama israfıdır. Bir müşteri kartı Apple Wallet veya Google Wallet’ta her açtığında markanızı görebilir: logonuzu, marka renklerinizi, arka plan görselinizi. Bu kılavuz, bir Wallet kartını **10 dakikada** işletmenize nasıl tamamen uyarlayacağınızı gösterir — ve logonuzun Wallet’ın yerleşik maskeleri tarafından kırpılmaması için bilmeniz gereken Apple/Google spec’lerini anlatır.

<Callout tone="info" title="Neye ihtiyacınız var">
- Bir reloop hesabı (custom branding tüm tarifelere dahildir: marka renkleri, logo, damga ikonu, arka plan görseli ve ayrıca ödül durumundaki custom eyebrow ile hero görseli).
- Logonuz PNG, JPG veya SVG olarak (maks. 10 MB)
- İsteğe bağlı: marka renkleri hex kodları olarak (aksi hâlde color picker’ı kullanın)
- İsteğe bağlı: kart için bir arka plan görseli (uzun kenarı 1280 px önerilir)
</Callout>

## Apple Wallet ve Google Wallet’ın her birinin farklı yaptığı şeyler

Bir şey yüklemeden önce şunu anlamak önemli: Apple ve Google logonuzu **tamamen farklı** render eder.

### Apple Wallet

- Logonuz, marka rengi arka planının üzerinde **sol üstte** görünür
- Format: **dikdörtgen banner** (maks. 160 × 50 pt, yani 480 × 150 px @ 3× Retina)
- En-boy oranı: yaklaşık 3.2 : 1 (yatay)
- Apple logoyu maske olmadan **olduğu gibi** gösterir — kare bir logo verirseniz küçük ve cılız görünür

### Google Wallet

- Logonuz **sol üstte** bir **daire** içinde görünür
- Format: **kare** (en az 660 × 660 px)
- Google onu otomatik olarak daireye maskeler, kenar çevresinde %15 safe area ile
- Yatay bir banner logosu verirseniz ya sıkışır ya da üst/alttan kırpılır

**İkilem**: tek bir logo aynı anda hem Apple banner’ı HEM DE Google dairesi olamaz.

**reloop’taki çözüm**: Orijinalinizi yüklersiniz (mümkünse kare veya hafif dikdörtgen, en az 660 × 660 px). Sunucu bunu 1024 × 1024’e normalleştirir ve kaydettiğinizde **otomatik olarak üç platform varyantı** üretir:

- `logo-apple.png` — 480 × 150 PNG, şeffaf bir canvas üzerinde fits-inside (PassKit için)
- `logo-google.png` — 660 × 660 kare PNG, %15 safe area ile (Google Wallet API için)
- `logo-thumb.webp` — panelde UI gösterimi için 64 × 64 WebP

Yani iki dünya arasında seçim yapmak **zorunda değilsiniz**. İyi bir kare yükleyin, gerisi otomatik olur.

## Adım adım: kartınızı markanıza uyarlama

### 1. Programı açın + Branding sekmesi

Panelde: **Programlar** → programı seçin → **Branding** sekmesi (veya editörde soldaki "Branding" sekmesine tıklayın).

### 2. Logonuzu yükleyin

Logo yuvasına sürükleyip bırakın ya da tıklayıp file picker’ı açın. Yükleme sırasında üç şey paralel olarak gerçekleşir:

1. **Client-side yeniden boyutlandırma** maks. 1024 × 1024’e (depolama byte’ı + yükleme bant genişliği tasarrufu)
2. **EXIF verileri kaldırılır** (yanlışlıkla geo-tag sızıntısı olmaz)
3. **Sunucu 3 platform varyantını üretir** ve bunları ayrı depolama dosyaları olarak kaydeder

Sağdaki canlı wallet simülatöründe logonun Apple Wallet’ta (banner, sol üst) ve Google Wallet’ta (daire, sol üst) nasıl göründüğünü **anında** görürsünüz. Logonuz çok genişse ve Google dairesinde kırpılmış görünüyorsa: logoyu **kare** bir düzende yeniden export edip tekrar yükleyin.

**Logo ipuçları**:

- **Şeffaf arka plan** her zaman daha iyidir. Logonun arkasındaki marka rengi geçmelidir.
- **Logo kenarına en az %10 margin**. Hem Apple hem Google’ın daha yumuşak veya daha sert maske kenarları vardır; margin olmadan dış kenarlar kırpılır.
- **SVG de olur** ve bizde sunucu tarafında PNG’ye rasterize edilir (3× density ile).
- **Açık marka renklerinde koyu logolar** ve tersi — kontrastın uygun olduğundan emin olun. Koyu kırmızı bir marka arka planı üzerindeki siyah logo okunmaz.

### 3. Marka rengi + vurgu rengi seçin

İki color picker:

- **Marka rengi** (`brandColor`): Wallet kartınızın arka planı. Apple Wallet’ta bu, üst yarının tamamıdır. Google Wallet’ta kartın tamamıdır. Varsayılan: `#55182c` (Stempelkarte şarap rengi).
- **Vurgu rengi** (`accentColor`): **dolu damga dairelerinin**, hedef işareti yıldızının ve (bazı Wallet sürümlerinde) ödül şerit animasyonunun rengi. Varsayılan: `#f8b627` (Stempelkarte altın rengi).

**En iyi uygulama**: marka rengi = ana markanız (logo arka planı), vurgu rengi = **kontrast oluşturan** bir tamamlayıcı. Örneğin markanız koyu maviyse, vurgu olarak altın veya sıcak bir turuncu seçin — "aynı mavi tonu, biraz daha açık" değil.

### 4. Damga ikonunu yapılandırın (isteğe bağlı)

Varsayılan basit bir yıldızdır. Üç alternatifiniz var:

1. **Kendi damga ikonunuzu yükleyin** (logo ile aynı yükleme yolu). PNG/JPG/SVG, maks. 10 MB. 256×256’ya normalleştirilir.
2. **Damga olarak emoji** — tek bir emoji girin (ör. kafe için ☕, fırın için 🥐, kuaför için ✂️). Renderer, Pango + Noto Color Emoji kullanır.
3. Henüz bir konseptiniz yoksa **varsayılan yıldızı** bırakın.

**İpucu**: yüksek kontrastlı custom ikonlar daha iyi çalışır. İnce bir çizgi çizimi damga, küçük kart ekranında kaybolur; kalın ve dolu bir şekil ise iyi okunur.

### 5. Damga gösterim modunu seçin

İki seçenek:

- **`circle-number`** (varsayılan): içinde ikon olan damga dairesi, kullanılmamış için boş daire. Klasik.
- **`image-only`**: dolu damga olarak tam ikon, boş için gri tonlamalı varyant. Modern, markaya uygun, yalnızca ikonunuz görsel olarak güçlüyse mantıklı.

Canlı simülatör her iki modu anında gösterir.

### 6. Arka plan görseli (isteğe bağlı)

**Şerit alanı** için (damgaların bulunduğu yer) bir arka plan görseli yükleyebilirsiniz — örneğin ince bir desen veya kafenizin bulanık bir fotoğrafı. Format: JPG / PNG / WebP, uzun kenar maks. 1280 px.

**Overlay modu** + **overlay yoğunluğu** (%0-80) marka renginizin görselin üzerinde ne kadar güçlü durduğunu ayarlar:

- `none`: görsel tamamen görünür (çok ince desenler için iyi)
- `darken`: görsel marka rengiyle karartılır (açık fotoğraflar için iyi)
- `lighten`: görsel açılır (koyu fotoğraflar için iyi)
- `brand-tint` (varsayılan): görsel marka rengi tonu alır

### 7. Ödül durumunu özelleştirin

Kart dolduğunda ve müşteri ödülünü alabildiğinde görsel olarak ne olur?

- **Kendi ödül arka plan görseliniz** (ör. bir konfeti fotoğrafı veya "ücretsiz cappuccino" gibi ödül ürününüzün bir fotoğrafı)
- **Ödül arka plan rengi** (görsel yerine düz bir renk, varsayılan marka gradyanını geçersiz kılar)
- **Custom eyebrow metni** — varsayılan "ÖDÜL MEVCUT" yerine → "KAHVENİZ SİZİ BEKLİYOR" gibi kendi sloganınız
- **Custom ödül başlığı** — programa özgü ödül yerine → kendi pazarlama metniniz
- **Sunburst + konfeti animasyonu** açık/kapalı
- **Eyebrow rengi, başlık boyutu, konum** — her eksen için ayrı ayrı ayarlanabilir

Bu, "kart dolu" ile "kart müşteriyle birlikte kutluyor" arasındaki farkı yaratır.

### 8. Filigranı kapatın (yalnızca Premium)

Varsayılan olarak kartınız sağ altta küçük bir „reloop" filigranı gösterir. **Filigran anahtarıyla** (`hideWatermark`) bunu gizlersiniz — markamız olmadan white-label bir kart. Yalnızca Premium tarifesinde kullanılabilir.

## Önizleme ve canlı test

**Editörde**:
- Canlı simülatör Apple ve Google çerçevesini yan yana gösterir (veya bir toggle ile)
- 0’dan maksimuma bir damga scrubber’ı → kartın damgalandıkça nasıl geliştiğini görürsünüz
- Bir ödül durumu toggle’ı → kartın dolu hâlde nasıl göründüğünü görürsünüz

**Gerçek bir telefonda**:
1. Programı kaydedin
2. Bir test kartı oluşturun (Kartlar sekmesinde → "Yeni kart")
3. QR kodunu iPhone’unuzla (veya Android’le) tarayın
4. "Wallet’a ekle"ye dokunun
5. Kartı Wallet uygulamasında açın → müşterilerinizin göreceği şey tam olarak budur

Simülatörden farklı görünen bir şey olursa: support@reloop.cards adresine bir hata bildirin — hemen kontrol ederiz, çünkü sözümüz "önizleme ile pass arasında pixel-identical".

## Yaygın markalama hataları

- **Logoyu çok küçük yüklemek** (200 × 200 px). Sunucu büyütmek zorunda kalır → bulanık logo. En az 660 × 660 px.
- **Kare bir logo seçmek ama Apple banner’ının minik görünmesi**. Bu bir hata değil — Apple banner’ı 3.2:1’dir, bir kare onu dikey olarak doldurur ama yatay alanın %75’ini boş bırakır. Apple’ı önceliklendiriyorsanız daha geniş bir logo yapın.
- **Marka rengi vurgu rengiyle aynı**. O zaman damgalar görünmez. Vurgu kontrast oluşturmalıdır.
- **Arka plan görseli çok yoğun**. Damgaların üzeri örtülür, kart karmaşık görünür. Bir desen veya bir görsel + %50 overlay kullanın.

## Custom branding’e NE ZAMAN ihtiyacınız YOK

Eğer:
- Hizmeti henüz deniyorsanız (varsayılan zaten şık)
- Lansmanda zaman baskısı altındaysanız ve markalamayı sonraya bırakmak istiyorsanız
- Henüz yerleşik bir marka kimliğiniz yoksa (o durumda varsayılan markalama kimseye zarar vermez)

Markalama iteratif olarak iyileştirilebilir — 5 dakikada bir logo + 2 renk ekleyebilirsiniz ve bu anında tam yapılandırılmış bir programın %80’i kadar iyi görünür.

<Callout tone="success" title="Sonraki adımlar">
- [Tüm panel özelliklerinin tam genel görünümü →](/funktionen/dashboard)
- [Push yayınlarını 5 dakikada gönderin →](/blog/wallet-push-broadcasts-anleitung)
- [Reporting’i anlama — hangi metrikler önemli →](/blog/loyalty-reporting-metriken)
- [6 sektörden örnekler →](/beispiele)
- [Ücretsiz başlayın →](/signup)
</Callout>