---
title: "İndirim rozeti ile üzeri çizili fiyat gösterme"
description: "Yıllık planın aylık fiyatının yanında, aylık planın fiyatını üzeri çizili olarak göstererek indirimi tek bakışta fark edilir hale getirin."
---

Gerçek fiyatın yanındaki üzeri çizili fiyat, indirimi tek bakışta görünür kılar. Bu rehber, yıllık ürün kartını; aylık plandaki abonelik maliyetini üzeri çizili biçimde, yıllık planın etkin aylık fiyatının yanında ve üstünde bir indirim rozetiyle gösterecek şekilde yeniden düzenler.
Üstü çizili biçimlendirme, metnin tamamına uygulanır; bir değişkeni büyük bir metin öğesinin içinde çizemezsiniz. Bu yüzden üstü çizili fiyat, indirimli fiyatla yan yana, yatay bir kapsayıcı içinde kendi metin öğesinde yer alır.

## Başlamadan önce \{#before-you-start\}

- Ürünler içeren bir paywall ekranı oluşturun — örneğin [Temel bir paywall ekranı oluşturma](basic-paywall-screen) adımlarını takip edebilirsiniz. Bu örnekte paywall'ın yıllık ve aylık bir ürün sunduğu varsayılmaktadır.
## 1. Fiyat satırlarını üst üste koy \{#stack-the-price-rows\}

Yıllık kart, tek bir fiyat satırıyla başlar — yıllık ürünün `prod_price` değişkeni ve ardından gelen `/year` ifadesi, örneğin `$29.99/year` şeklinde görüntülenir. Bunun üstüne aylık fiyatlandırma için ikinci bir satır ekle.
1. **Layers** panelinde, yıllık ürün kartının içindeki fiyat metnini seçin. Metin zaten kartın dikey container'ında yer aldığından, kopya onun altına yerleşecek.
2. Katmandaki üç nokta menüsüne Context menu tıklayın ve **Duplicate**'i seçin. Kopya, orijinalin altında görünür. Bir sonraki adımda, üstteki metin aylık fiyat satırı olacak; alttaki ise yıllık fiyatı koruyacak.

## 2. Aylık satırını iki fiyata bölün \{#2-split-the-monthly-row-into-two-prices\}

Aylık satırı iki metin öğesi içerir: üzeri çizili aylık plan fiyatı ve yıllık planın aylık başına fiyatı.

:::important
Değişken seçici yalnızca bir flow ekranında mevcut olan ürünlerin fiyatlarını sunar. Flow'da bulunmayan bir ürüne başvurmak için boş bir ekran oluşturun, oraya bir **Products** öğesi ekleyin ve ürünü buna atayın. Hiçbir gezinme eyleminin o ekrana yönlendirmediğinden emin olun.
:::
1. Üstteki metin öğesini seçin, üç nokta menüsüne tıklayın ve **Wrap** > **Wrap in Horizontal Container** seçeneğini belirleyin.
2. Yeni container içindeki metin katmanının üç nokta menüsüne tıklayın ve **Duplicate** seçeneğini belirleyin.

   
3. İlk metin öğesini seçin ve **Content** alanını temizleyin. Değişken simgesine Variable icon tıklayın, aylık ürünü seçin, ardından `prod_price_per_month` özelliğini seçin. Değişkenin ardından `/month` yazın.
4. **Design** sekmesinde, **Typography** altında **Decoration** seçeneğini **Strikethrough** Strikethrough olarak ayarlayın (bkz. [Öğe stili — Decoration](builder-styling#decoration)).
5. İkinci metin öğesini seçin ve içeriğini aynı şekilde değiştirin; ancak bu sefer yıllık ürünün `prod_price_per_month` özelliğini seçin. Değişkenin ardından `/month` yazın.

## 3. Yıllık fiyatı daha az belirgin yapın \{#tone-down-the-yearly-price\}

Kopyalanan aylık fiyatlar, orijinal fiyat stilini miras aldığından şu anda üç fiyat da aynı boyut ve kalınlığı paylaşıyor. Yıllık fiyatı daha ince bir görünüme kavuşturun; böylece aylık satır öne çıkar.

1. Tuvalde, alt metin öğesini seçin — yıllık fiyat.
2. Öğenin üzerindeki araç çubuğunda metin stili açılır menüsünü açın ve daha ince bir stil seçin — örneğin **Caption**. Ya da **Design** sekmesinde **Typography** altından farklı bir stil belirleyebilirsiniz.

## 4. İndirim rozetini ekle \{#add-the-discount-badge\}

Rozet, fiyatların yanında tasarrufu vurgular.

1. **+** > **Badge** seçeneğine tıkla.
2. **Layers** panelinde rozeti yıllık ürünün içine, fiyatların bulunduğu dikey container ile radyo düğmesi arasına sürükle.
3. Rozetin metin katmanını seç ve **Content** alanını düzenle — örneğin `%75 Tasarruf Et`.

İndirim yüzdesi için bir değişken bulunmuyor — hesaplamayı kendi fiyatlarından yapıp sabit metin olarak gir.

Artık yıllık kart, fiyatını aylık plana göre konumlandırıyor: üstü çizili aylık fiyat, yıllık planın aylık bazda efektif fiyatı ve indirim rozeti tek bir satırda yer alıyor; tam yıllık fiyat ise bunların altında gösteriliyor.

## 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).