---
title: "Tüm planları bir bottom sheet'te göster"
description: "Tek bir CTA, 'Tüm planları göster' bağlantısı ve ürün listesinin tamamını ortaya çıkaran bir bottom sheet içeren bir hero paywall oluşturun."
---

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 \{#before-you-start\}

- Adapty Kontrol Paneli'nde [ürün oluşturun](create-product).
- [Adapty'yi App Store ve Google Play'e bağlayın](integrate-payments).
## 1. Ekran düzenini ayarlayın \{#set-up-the-screen-layout\}

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ı](paywall-layout-and-products#screen-settings).

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 \{#add-the-cta-heading\}

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 \{#add-the-bottom-sheet-and-its-title\}

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](builder-elements#layout).

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 \{#4-add-the-product-list-inside-the-bottom-sheet\}

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](paywall-product-block) 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 \{#add-the-purchase-button-inside-the-bottom-sheet\}

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 \{#add-the-footer-links-inside-the-bottom-sheet\}

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 \{#hide-the-bottom-sheet\}

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 \{#add-the-main-subscribe-button\}

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. Variable icon 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 \{#add-the-show-all-plans-link\}

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](onboarding-actions#showhide-elements).

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 \{#next-steps\}

- [Flow'unuzu kaydedin ve yayınlayın](builder-save-publish).
- Kullanıcılara göstermeye başlamak için [flow'u bir placement'a ekleyin](create-placement).