---
title: Bileşen oluşturma ve varyant tiplerini listeleme
description: Varyant seçici bileşenini oluşturma ve varyant tip listesini bağlama.
---
## Bileşen oluşturma
**Elementler** kısmından bir **Çerçeve** element'i 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 ilk element'i seçin ve sağ üst kısımdaki **Veri Ekle** butonuna tıklayarak `Product` verisi ekleyin. Ardından `flex-direction` ve `padding` stilini güncelleyin.
## Varyant tiplerini listeleme
İçteki çerçeve element'ini seçerek `flex-direction` ve `gap` stillerini güncelleyin. Ardından bu element'e sağ tıklayarak **Veri Bağla** kısmından `product` > `getDisplayedVariantTypes` verisini seçin. Açılan modalda **List Component Name** alanına `DisplayedVariantTypesList` yazın ve **Kaydet**'e basın.
Burada bağlamış olduğunuz liste, Renk ve Beden gibi tiplere karşılık gelmektedir. Ürün varyant değerlerinden önce varyant tiplerini listelediğimiz yapıyı hazır etmiş olduk.
## Bileşeni bölüme ekleme
Geri diyerek sayfa görünümüne dönün ve ilk kısma otomatik olarak eklenen varyant seçici bileşenini silin. Ardından **Ürün Detay** bölümü altından **Bileşen Ekle** diyerek varyant seçici bileşenini ekleyin.
Sağ kısımda bulunan `product` verisi kısmından bölümden gelen `product` verisini bağlayın.
Bölüm altına eklediğiniz bileşenlere bu bölüm üzerinden gelen `product` verisini bağlamayı unutmamalısınız. Bu örnekte iki farklı yöntem kullanılabilir: bölümden dönen ürünü doğrudan bileşene geçirebilir veya **Sayfanın ürününü kullan** seçeneğini işaretleyebilirsiniz. Bölümden gelen `product` verisini bağlamak her zaman daha güvenilir bir yöntemdir.
Çift tıklayarak bileşen detayına, ardından oluşturduğunuz listeye çift tıklayarak detayına gidin.