---
title: Ürün kartı bileşeni oluşturma
description: Ürün listesi için ürün kartı bileşeni oluşturma.
---
Bileşen, bir kez oluşturulan ve birden fazla bölümde yeniden kullanılabilen bağımsız bir yapı taşıdır. Dışarıdan veri alır ve her bölümde kendi verisiyle çalışır.
## Bileşen oluşturma
Bir önceki adımda ürün adını bağladığımız yazı element'ini silerek sayfa seviyesinde **Katmanlar** kısmına geri dönelim.
**Elementler** kısmından bir **Yazı** element'i ekleyin ve üzerine sağ tıklayarak **Bileşen Oluştur**'a basın. Açılan modaldan bileşenin **ikonunu** ve **adını** girip **Kaydet**'e basın.
Bileşen oluştuğunda daha fazla düzenleme yapabilmek için detayına yönlendirilirsiniz. Bölümlerde olduğu gibi geri gidip bileşene çift tıklayarak tekrar detayına girebilirsiniz.
Sayfalar bölümlerden oluşur. Hızlı düzenlemeler için sayfa seviyesinde element ve bileşen eklemesine izin verilir, fakat bunlar canlıda render olmaz.
## Bileşeni bölüme ekleme
Oluşturduğumuz bileşeni sayfa seviyesindeki **Katmanlar** kısmından silebiliriz. Ardından `ProductList` bölümüne çift tıklayarak içine girelim. Daha sonra `ProductList` element'ine çift tıklayarak item seviyesine girelim ve ilk element'i seçelim.
**Elementler** kısmındaki ikinci sekmeden **Şablonlar**'a girerek oluşturduğumuz ürün kartı bileşenine tıklayın. Bu şekilde bileşeni item seviyesinde eklemiş olursunuz.