---
title: Satın Alma Butonları
description: Satın alma butonları bileşeni oluşturma.
---

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

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

## Veri ekleme ve stilleri güncelleme

Bileşen detayına yönlendirildikten sonra içeride otomatik olarak oluşan çerçeve element'ini silin. İlk element'i seçin ve sağ üst kısımdaki **Veri Ekle** butonuna tıklayarak `Product` verisi ekleyin. Ardından aşağıdaki stil özelliklerini güncelleyin:

- `flex-direction`
- `gap`

## Bileşeni bölüme ekleme

Geri diyerek sayfa görünümüne dönün ve otomatik olarak eklenen satın alma butonları bileşenini silin. Ardından **Ürün Detay** bölümü altından **Bileşen Ekle** diyerek satın alma butonları bileşenini ekleyin.

Sağ kısımdaki `product` verisine bölümden gelen `product` değerini bağlayın.

## Sonraki adımlar

<Steps>
  <Step title="Miktar girişi ekleme">
    [Miktar girişi ekleme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/buy-buttons/quantity)
  </Step>
  <Step title="Sepete ekle butonu ekleme">
    [Sepete ekle butonu ekleme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/buy-buttons/adding-add-to-cart-button)
  </Step>
  <Step title="Hemen satın al butonu ekleme">
    [Hemen satın al butonu ekleme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-detail/buy-buttons/adding-buy-it-now-button)
  </Step>
</Steps>