---
title: Component
description: Mağaza sahibinin component içindeki bir alana başka bir component yerleştirmesini sağlayan Component prop tipi.
---

<Callout type="warn" title="Eski altyapı">
Bu sayfa, ikas Studio öncesindeki headless tema altyapısını anlatır. Yeni temalar için [ikas Studio](https://builders.ikas.com/docs/ikas-studio) dokümantasyonunu kullanın.
</Callout>

Component prop tipi, component'lerinizin içinde son derece özelleştirilebilir layout'lar oluşturmanızı sağlar. Mağaza sahibinin, component'inizin belirli bir alanında hangi component'in render edileceğini seçmesine izin verebilirsiniz. Gelen prop değeri, [IkasComponentRenderer](https://builders.ikas.com/docs/headless-theme/api/theme-and-common#ikas-component-renderer) class'ının bir örneğidir.

Diyelim ki iki sütunlu bir layout'a sahip bir component oluşturmak ve bu sütunlarda ne gösterileceğini mağaza sahibine bırakmak istiyorsunuz.

<iframe src="https://demo.arcade.software/Wq0A6ufgRnDOP9pH7Qt1?embed" title="İki sütunlu component tanımı" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Şimdi `Columns` component'imizi sayfaya ekleyelim.

<iframe src="https://demo.arcade.software/uzBuVgZJ7gFew9pLYeaZ?embed" title="Columns component'inin sayfaya eklenmesi" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Aşağıda, ikas mağazalarından birinden daha kapsamlı bir örnek görebilirsiniz.

<iframe src="https://demo.arcade.software/xJ4v9D5dyRF4dVPD2CG4?embed" title="Gerçek bir mağazadan Component prop örneği" loading="lazy" allowFullScreen style={{ width: '100%', aspectRatio: '16 / 9', border: 0, borderRadius: 12 }} />

Mağaza sahibinin seçebileceği component'ler şu an için sınırlandırılmamıştır. Tıpkı normal bir sayfaya component eklerken olduğu gibi, editörde bulunan tüm component'ler arasından seçim yapabilir.