Bu şablon, önce tek bir öne çıkan teklif sunar ve tam plan listesine giden sade bir bağlantı içerir. Show all plans bağlantısına dokunulduğunda, diğer ürünleri, bir satın alma düğmesini ve altbilgi bağlantılarını içeren bir alt sayfa yukarı kayar. Bir plan orantısız biçimde iyi dönüşüm sağladığında kullanın — alt sayfa, ana ekranı kalabalıklaştırmadan alternatifleri tek 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 içeriğin geri kalanını alt kısımda gruplayın; böylece görsel ekranın üst bölümünü dolduracaktır.

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

Ekranı yapılandırmak için:

1. Ekranı seçmek için canvas’ın boş bir alanına tıklayın.
2. System UI altında, kahraman görselinin ekran kenarlarına kadar uzanması için Safe area seçeneğini devre dışı bırakın.
3. Fill altında Image seçeneğini belirleyin ve kahraman 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 şablonda, küçük bir boşlukla Vertical yönü ve bottom-middle hizalaması, başlık ile 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 sayfayı ve başlığını ekleyin

Alt sayfa, ekranın altından yukarı doğru 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 olunca gizleyeceksiniz. Gizli öğeler düzenlenemez, bu yüzden içeriği tamamlayana kadar sayfanın görünür kalması gerekir.

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. Alt sayfanın içine ürün listesini ekleyin

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

Ürün yönetimi hakkında daha fazla bilgi için Satın alma işlemlerini ayarlama konusuna 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 konteynerine sürükleyin.
3. Tuvaldeki her ürün kartını seçin ve Design sekmesindeki açılır listeden bir ürün seçin.

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

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

1. + > Buttons seçeneğine tıklayın ve bir düğme ön ayarı seçin.
2. Layers panelinde, yeni düğmeyi alt sayfanın içindeki Content kapsayıcısına 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 butonuna tıklayın.
5. Action alanını Purchase, Product alanını products.selectedProduct olarak ayarlayın.

6. Alt sayfanın içine footer bağlantıları ekleyin

Kullanım koşulları, gizlilik politikası ve satın almaları geri yükleme seçeneği sayfanın alt kısmında yer alır; bu sayede 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 sayfanın içindeki Content kapsayıcısına sürükleyin.
3. Layers panelinde, Terms of Use butonunu seçin. Interactions sekmesini açın ve kullanım koşulları URL’nizi Open URL alanına yapıştırın.
4. Gizlilik URL’niz için Privacy Policy butonuyla aynı adımı 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 olarak ayarlayın. Sayfa katman ağacında kalmaya devam eder ancak tuval üzerinde artık görüntülenmez.

8. Ana abone olma düğmesini ekle

Ekrandaki ana düğme, kullanıcıyı tek dokunuşla aylık plana abone eder. Etiketinde aylık ürünün fiyat değişkeni kullanılır; böylece düğme her zaman ürünle senkronize kalır.

1. Layers panelinde ekrana tıklayın; böylece yeni öğeler alt sayfanın içine değil, köke eklenir.
2. + > Buttons seçeneğine tıklayın ve bir düğme ön ayarı seçin.
3. Düğme seçiliyken 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. Geri kalan etiketi çevresine ekleyin — ö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 alanını Purchase, Product alanını ise ihtiyacınız olan ürüne ayarlayın. Alt sayfa butonunun aksine bu buton, products.selectedProduct yerine belirli bir ürünü hedefler.

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

Abone ol düğmesinin altındaki bir metin bağlantısı, dokunulduğunda alt sayfayı açar. Bunu Button Label stiliyle bir metin öğesi olarak eklemek, bir aksiyon bağlamanıza olanak tanırken görünümü sade tutar.

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.