---
title: Fiyat bileşeni oluşturma
description: Ürün detay bölümü için fiyat bileşeni oluşturma.
---

<Video src="/media/ikas-studio/basic-examples/product-detail/creating-price-component.mp4" autoPlay muted loop controls />

<Callout type="info" title="Silme işlemi">
Videodaki silme işlemleri `Backspace` tuşu kullanılarak yapılmıştır.
</Callout>

## Bileşen oluşturma

**Elementler** kısmından bir **Çerçeve** ekleyin ve sağ tıklayarak **Stili Temizle** seçeneğini uygulayın. Ardından tekrar sağ tıklayarak **Bileşen Oluştur**'u seçin. Açılan modaldan bileşenin **ikonunu** ve **adını** güncelleyip **Kaydet**'e basın.

Bileşen detayına yönlendirildikten sonra içeride otomatik olarak oluşan çerçeve element'ini silin. İlk element'i seçerek aşağıdaki stil özelliklerini güncelleyin:

- `flex-wrap`
- `align-items`
- `gap`

Ardından sağ üst kısımdaki **Veri Ekle** butonuna tıklayarak `Product` verisi ekleyin.

## Yazı elementlerini ekleme

İçerisine 3 adet **Yazı** element'i ekleyin.

### İndirim yüzdesi

Birinci yazı element'ini seçin ve **İçerik** alanına `%` yazın. Ardından sağ üst köşedeki veri ikonuna basarak **Veri Bağla** kısmından `product` > `getSelectedVariant` > `getDiscountPercentage` verisini seçin. Aşağıdaki stil özelliklerini güncelleyin:

- `font-size`
- `font-weight`
- `color`
- `padding`
- `background`
- `border-radius`

### Son fiyat

İkinci yazı element'ini seçin ve **İçerik** alanına tıklayarak **Veri Bağla** kısmından `product` > `getSelectedVariant` > `getFormattedFinalPrice` verisini bağlayın. Aşağıdaki stil özelliklerini güncelleyin:

- `font-size`
- `font-weight`
- `color`

### Satış fiyatı

Üçüncü yazı element'ini seçin ve **İçerik** alanına tıklayarak **Veri Bağla** kısmından `product` > `getSelectedVariant` > `getFormattedSellPrice` verisini bağlayın. Aşağıdaki stil özelliklerini güncelleyin:

- `font-size`
- `color`
- `text-decoration`

## Bileşeni bölüme ekleme

Ürün detay sayfasına geri dönün ve en başa otomatik olarak eklenen fiyat bileşenini silin. Ardından **Ürün Detay** bölümü altından **Bileşen Ekle** diyerek fiyat bileşenini seçin. Sağ kısımdaki `product` verisine bölümden gelen `product` değerini bağlayın.