---
title: Ürün Listesi
description: Ürün listesi bölümü oluşturma.
icon: Tag
---

Bu örnekte, sıfırdan bir ürün listesi bölümü oluşturmayı öğreneceksiniz.

## Adımlar

<Steps>
  <Step title="Bölüm oluşturma">
    [Bölüm oluşturma &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/creating-section)
  </Step>
  <Step title="Bölüm düzenini ve stillerini güncelleme">
    [Bölüm düzenini ve stillerini güncelleme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/updating-section-layout-and-styles)
  </Step>
  <Step title="Bölüme veri ekleme ve bağlama">
    [Bölüme veri ekleme ve bağlama &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/adding-and-binding-data-to-section)
  </Step>
  <Step title="Ürün kartı bileşeni oluşturma">
    [Ürün kartı bileşeni oluşturma &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/creating-product-card-component)
  </Step>
  <Step title="Bileşene veri ekleme ve bağlama">
    [Bileşene veri ekleme ve bağlama &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/adding-and-binding-data-to-component)
  </Step>
  <Step title="Bileşene ürün görseli ve fiyatı ekleyerek stillerini güncelleme">
    [Bileşene ürün görseli ve fiyatı ekleyerek stillerini güncelleme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/adding-image-price-and-updating-styles)
  </Step>
  <Step title="Bileşene sepete ekle butonu ekleyerek aksiyon bağlama">
    [Bileşene sepete ekle butonu ekleyerek aksiyon bağlama &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/adding-add-to-cart-button-and-binding-action)
  </Step>
  <Step title="Bölümün ürün listesi verisini değiştirme">
    [Bölümün ürün listesi verisini değiştirme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/changing-product-list-data)
  </Step>
  <Step title="Bölümü tekrar kullanma">
    [Bölümü tekrar kullanma &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/reusing-section)
  </Step>
  <Step title="Bölümü mobil uyumlu hale getirme">
    [Bölümü mobil uyumlu hale getirme &rarr;](https://builders.ikas.com/tr/docs/ikas-studio/basic-examples/product-list/making-section-mobile-responsive)
  </Step>
</Steps>