Bu şablon, farklı planlar için farklı özellik listelerini öne çıkarmak amacıyla koşullu metin 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şaretlenir; böylece ekran ilk yüklendiğinde o ürünün koşullu metni 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 Image kullanılmaktadır; düz renk veya gradyan da aynı şekilde çalışır.
4. Layout altında yönü Vertical 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ığı ekleyin ve kapat düğmesiyle eşleştirin

Başlık, ekranın üst kısmında kapat düğmesinin yanında yer alır. İkisini yatay olarak hizalamak için her ikisini de yatay bir yığına sarı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 gruplandırmak için:

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

2. H1 katmanını yeni yatay stack’e sürükleyin.

İki öğeyi hizalamak için:

1. Kapat düğmesinin boyutunu ve H1 yazı tipi boyutunu, aynı satırda rahatça yan yana duracak şekilde ayarlayın.
2. Yatay yığın seçiliyken, sağ paneldeki hizalama ve dağılım ayarlarını öğeler doğru şekilde sıralanacak şekilde 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 ekleyin

İlk özellik listesi, varsayılan ürünü tanımlar. Yalnızca kullanıcı ilk ürünü seçtiğinde görünür.

Koşullu görünürlük hakkında daha fazla bilgi için Koşullu görünürlük bölümüne bakın.

Ö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 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 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 bağlantıları 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, katman ağacının sonuna Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler.
2. Terms of Use bağlantısını seçin, Interactions sekmesini açın ve Open URL alanına koşullar URL’nizi yapıştırın.
3. Privacy Policy bağlantısı için de aynı adımı tekrarlayın ve gizlilik URL’nizi ekleyin.
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.