Bu şablon, önce tek bir öne çıkan teklifi gösterir ve tam plan listesine giden küçük bir bağlantı sunar. Show all plans öğesine dokunulduğunda, diğer ürünleri, bir satın alma düğmesini ve footer bağlantılarını içeren bir bottom sheet yukarı kayar. Bir plan orantısız biçimde iyi dönüşüm sağladığında kullanın — alt sayfa, alternatifleri ana ekranı kalabalıklaştırmadan tek bir dokunuş uzağında tutar.

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

Hero görseli ekranın arka planı olarak kullanın ve geri kalan içeriği altta gruplandırın; böylece görsel ekranın üst kısmını dolduracaktır.

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

Ekranı yapılandırmak için:

1. Canvas’ın boş bir alanına tıklayarak ekranı seçin.
2. System UI altında, hero görselinin ekran kenarlarına kadar uzanması için Safe area seçeneğini devre dışı bırakın.
3. Fill altında Image Image seçeneğini belirleyin ve hero görselinizi yükleyin.
4. Layout altında, içeriği istediğiniz yere sabitlemek için yön, boşluk ve hizalama ayarlarını yapılandırın. Bu şablon için, küçük bir boşluk ve bottom-middle hizalamasıyla Vertical Vertical yönü; başlık ve düğmeleri ekranın alt kısmında gruplar.

2. CTA başlığı ekle

Başlık, ekranın alt kısmında, abone ol butonunun hemen üzerinde yer alır. Hero görseli ise üstteki alanı kaplar.

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

3. Alt sayfa ve başlığını ekleme

Alt sayfa, ekranın altından yukarı kayan bir düzen kapsayıcısıdır. Şimdilik görünür olarak ekleyin; sonraki birkaç adımda içeriğini dolduracak ve her şey yerli yerinde olduğunda gizleyeceksiniz. Gizli öğeler düzenlenemez, bu yüzden içeriği tamamlanana kadar sayfa görünür kalmalıdır.

Alt sayfalar ve diğer düzen kapsayıcıları hakkında daha fazla bilgi için bkz. Öğeler — Düzen.

Alt sayfayı ve başlığını eklemek için:

1. + > Layout > Bottom Sheet seçeneğine tıklayın.
2. Layers panelinde bottom sheet’i genişletin, Title katmanını seçin ve Design sekmesindeki Content alanını düzenleyin — örneğin Choose your plan.

4. Ürün listesini alt sayfanın içine ekleyin

Tüm ürünleri alt sayfanın içine yerleştirin. Bunlardan biri, ana CTA düğmesinde gösterilen fiyatı da belirleyecek.

Ürün yönetimi hakkında daha fazla bilgi için Satın almaları yapılandırın bölümüne bakın.

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

1. + > Products seçeneğine tıklayın ve bir düzen şablonu seçin. Dikey Liste çoğu durumda iyi çalışır. Öğe, alt sayfanın dışında ekranda görünür.
2. Layers panelinde, Products katmanını alt sayfanın içindeki Content kapsayıcısına sürükleyin.
3. Tuval üzerindeki her ürün kartını seçin ve Design sekmesindeki açılır menüden bir ürün seçin.

5. Alt sayfaya satın alma düğmesi ekleme

Alt sayfanın, kullanıcının listeden seçtiği planı satın almak için kendi satın alma düğmesine ihtiyacı var.

1. + > Buttons seçeneğine tıklayıp bir düğme ön ayarı seçin.
2. Layers panelinde, yeni düğmeyi alt sayfanın içindeki Content konteynerine sürükleyin.

3. Butonu seçili haldeyken sağ panelde Interactions sekmesini açın.
4. Add trigger > On tap seçeneğine tıklayın, ardından Add action seçeneğine tıklayın.
5. Action alanını Purchase, Product alanını products.selectedProduct olarak ayarlayın.

6. Alt sayfa içine alt bilgi bağlantılarını ekleyin

Kullanım koşulları, gizlilik politikası ve satın almaları geri yükleme seçenekleri sayfanın altında yer alır; böylece ana ekran sade kalır.

1. + > Buttons > Links seçeneğine tıklayın. Bu, Restore Purchases, Terms of Use ve Privacy Policy içeren bir satır ekler.
2. Layers panelinde, Links satırını alt sayfadaki Content container’ının içine sürükleyin.
3. Terms of Use bağlantısını seçin, Interactions sekmesini açın ve koşullar URL’nizi Open URL alanına yapıştırın.
4. Aynı işlemi gizlilik URL’niz için Privacy Policy bağlantısında tekrarlayın.
5. 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.

7. Alt sayfayı gizleyin

Sayfanın içeriği hazır olduğuna göre, varsayılan olarak ekranda görünmemesi için gizleyin. Kullanıcılar son adımda Show all plans seçeneğine dokunarak sayfayı açacak.

Layers panelinde alt sayfayı seçin ve durumunu Hide Hide olarak ayarlayın. Sayfa katman ağacında kalmaya devam eder ancak tuval üzerinde artık görüntülenmez.

8. Ana abone ol düğmesini ekleyin

Ekrandaki ana düğme, tek bir dokunuşla kullanıcıyı aylık plana abone eder. Etiketi, aylık ürünün fiyat değişkenini kullandığından düğme her zaman ürünle senkronize kalır.

1. Layers panelinde, yeni öğelerin alt sayfanın içine değil kök öğeye eklenmesi için ekrana tıklayın.
2. + > Buttons seçeneğine tıklayıp bir buton şablonu seçin.
3. Butonu seçili hâlde Design sekmesini açın ve imleci Content alanına getirin. simgesine tıklayıp ana ürün için fiyat değişkenini seçin. Değişkeni etiketin geri kalanıyla çevreleyerek tamamlayın — örneğin, Subscribe for {price}/month.

4. Interactions sekmesine geçin ve Add trigger > On tap > Add action seçeneğine tıklayın.
5. Action olarak Purchase, Product olarak ihtiyaç duyduğunuz ürünü seçin. Alt sayfa butonunun aksine, bu buton products.selectedProduct yerine belirli bir ürünü hedefler.

9. ‘Tüm planları göster’ bağlantısını ekleme

Abone ol butonunun altındaki bir metin bağlantısı, dokunulduğunda alt sayfayı açar. Bunu Button Label stiliyle bir metin öğesi olarak eklemek, görünümü sade tutarken yine de bir aksiyon atamanıza olanak tanır.

Göster/Gizle aksiyonu hakkında daha fazla bilgi için bkz. Aksiyonlar — Öğeleri göster/gizle.

Bağlantıyı eklemek için:

1. Layers panelinde ekran seçiliyken + > Text > Button Label seçeneğine tıklayın.
2. Metin öğesi seçiliyken Content alanını Show all plans olarak düzenleyin.
3. Interactions sekmesini açın ve Add trigger > On tap > Add action seçeneğine tıklayın.
4. Action değerini Show olarak ayarlayın ve açılır listeden bottom sheet öğesini seçin.

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.