Bu şablon, farklı planlar için farklı özellik listelerini vurgulamak amacıyla koşullu görünürlük kullanır. Ekranda iki ürün gösterilir — örneğin Pro ve Pro+ — ve kullanıcının seçtiği ürüne bağlı olarak farklı bir özellik listesi görünür. Ürünlerden biri varsayılan olarak işaretlendiğinden, ekran ilk yüklendiğinde o ürünün özellik listesi görünür olur.

Başlamadan önce

• Adapty Kontrol Paneli’nde ürün oluşturun.
• Adapty’yi App Store ve Google Play’e bağlayın.

1. Ekran düzenini ayarlayın

Ekran, eklediğiniz her şeyin bir kapsayıcısı olarak işlev görür. Bu örnekte arka plan bir resimdir, ancak düz renk veya gradyan da aynı şekilde çalışır.

Ekran özelliklerinin tam listesi için bkz. Ekranlar ve katmanlar — Ekran ayarları.

Ekranı yapılandırmak için:

1. Tuvalde boş bir alana tıklayarak ekranı seçin.
2. System UI altında, arka planın ekran kenarlarına kadar uzanması için Safe area seçeneğini devre dışı bırakın.
3. Fill altında bir arka plan türü seçin ve yapılandırın. Bu örnekte Image kullanılmaktadır; düz renk veya gradyan da aynı şekilde çalışır.
4. Layout altında yönü Vertical olarak ayarlayın; öğelerin üstten alta dizilmesi ve içeriğin kalan alanı doldurması için boşluk ve hizalama ayarlarını yapılandırın.

2. Kapat düğmesini ekleyin

Kapat düğmesi paywallı kapatır. Close hazır ayarı önceden yapılandırılmıştır — herhangi bir işlem kurulumu gerekmez.

1. Tuval üzerinde + simgesine tıklayın.
2. Buttons > Close seçeneğini seçin.

3. Başlığı ekle ve kapat düğmesiyle eşleştir

Başlık, ekranın üst kısmındaki kapat düğmesinin yanında yer alır. İkisini yatay olarak hizalamak için her ikisini de yatay bir kapsayıcıya sarmalayın.

Başlığı eklemek için:

1. + > Text > H1 seçeneğine tıklayın.
2. H1 seçiliyken Design sekmesini açın ve Content alanındaki metni düzenleyin.

Başlığı kapat düğmesiyle gruplamak için:

1. Layers panelinde, kapat düğmesi katmanındaki üç nokta menüsüne tıklayın ve Wrap > Wrap in Horizontal Container seçeneğini seçin.

2. H1 katmanını yeni yatay container’ın içine sürükleyin.

İki öğeyi hizalamak için:

1. Kapat düğmesinin boyutunu ve H1 yazı tipi boyutunu aynı satırda rahatça yer alacak şekilde ayarlayın.
2. Yatay kapsayıcı seçiliyken, sağ paneldeki hizalama ve dağılım ayarlarını öğeler doğru şekilde sıralanacak biçimde yapılandırın.

4. Ürün listesini ekle

Kullanıcının seçebileceği ürünleri ekle. Ekran ilk yüklendiğinde anlamlı bir durumda açılması için bunlardan birini varsayılan olarak işaretle.

Ürünleri yönetme hakkında daha fazla bilgi için bkz. Satın almaları ayarla.

Ürün eklemek ve yapılandırmak için:

1. + > Products seçeneğine tıklayın ve bir düzen şablonu seçin. Bu şablon için Dikey Liste iyi çalışır.
2. Tuvaldeki her ürün kartını seçin ve Design sekmesindeki açılır menüden bir ürün seçin.
3. Varsayılan olarak seçili olmasını istediğiniz kartı seçin — örneğin Pro+ — ve Design sekmesinde Set as default product seçeneğini etkinleştirin.

5. İlk ürün için özellik listesi ekleme

İlk özellik listesi varsayılan ürünü açıklar. Yalnızca kullanıcı birinci ürünü seçtiğinde görünür.

Koşullu görünürlük hakkında daha fazla bilgi için bkz. Koşullu görünürlük.

Özellik listesini eklemek ve yapılandırmak için:

1. + > List seçeneğine tıklayın ve kompakt bir liste şablonu seçin. İkon listesi paywall’lar için iyi çalışır.
2. Her satır seçiliyken, Content alanındaki başlığı düzenleyerek ilk ürünün özelliklerini tanımlayın.
3. Liste seçiliyken Design sekmesini açın. Visibility altında Conditional seçeneğini seçin.
4. Koşulu, liste yalnızca ilk ürün seçili olan ürün olduğunda gösterilecek şekilde ayarlayın. products.selectedProduct.prod_title değişkeniyle eşleştirin. Value için değişken simgesine {} tıklayın, ilk ürün kartını seçin, ardından prod_title özniteliğini seçin — karşılaştırma, o ürünün başlığına karşılık gelir.

6. İkinci ürün için özellik listesi ekleme

İkinci ürün için de aynı adımları tekrarlayın. İki liste birbirini dışlar; yani aynı anda yalnızca biri görünür — hangisinin görüneceği seçili ürüne göre belirlenir.

İkinci özellik listesini eklemek için:

1. + > List düğmesine tıklayın ve görsel tutarlılık için aynı kompakt ön ayarı seçin.
2. İkinci ürünün özelliklerini tanımlamak için her satırı düzenleyin.
3. Visibility altında Conditional seçeneğini seçin ve 5. adımdakiyle aynı koşulu ayarlayın; ancak Value değişken seçicisini ikinci ürün kartının prod_title alanına yönlendirin.

7. Satın Alma Düğmesini Ekle

Satın alma düğmesi, kullanıcının seçtiği ürün için uygulama içi satın alma işlemini başlatır. Etiketinde seçili ürünün fiyatı gösterildiğinden, kullanıcı planlar arasında geçiş yaptıkça otomatik olarak güncellenir.

Satın Alma eylemi hakkında daha fazla bilgi için bkz. Eylemler — Satın Alma.

Satın alma düğmesini eklemek ve yapılandırmak için:

1. + > Buttons seçeneğine tıklayın ve bir buton ön ayarı seçin.
2. Butonu seçtikten sonra Design sekmesini açın ve imleci Content alanına getirin. Değişken simgesine tıklayın, products.selectedProduct öğesini, ardından prod_price özniteliğini seçin — tam değişken products.selectedProduct.prod_price olarak çözümlenir. Etiketin geri kalanıyla çevreleyerek tamamlayın — örneğin, Subscribe for {prod_price}.

3. Interactions sekmesine geçin ve Add trigger > On tap > Add action seçeneğine tıklayın.
4. Action değerini Purchase, Product değerini products.selectedProduct olarak ayarlayın.

8. Alt bölüm bağlantılarını ekleyin

Kullanım koşulları, gizlilik politikası ve satın almaları geri yükleme seçenekleri ana içeriğin altında yer alır.

Alt bölüm bağlantılarını eklemek için:

1. + > Buttons > Links seçeneğine tıklayın. Bu adım, katman ağacının sonuna Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler.
2. Layers panelinde Terms of Use düğmesini seçin. Interactions sekmesini açın ve koşullar URL’nizi Open URL alanına yapıştırın.
3. Gizlilik URL’niz için Privacy Policy düğmesiyle aynı adımı tekrarlayın.
4. Restore Purchases bağlantısını olduğu gibi bırakın. Bu bağlantının eylemi önceden yapılandırılmıştır.

Sonraki adımlar

• Flow’unuzu kaydedin ve yayınlayın.
• Kullanıcılara göstermeye başlamak için flow’u bir placement’a ekleyin.