---
title: Bileşene ürün görseli ve fiyatı ekleyerek stillerini güncelleme
description: Ürün kartı bileşenine görsel ve fiyat ekleyerek stillerini güncelleme.
---

<Video src="/media/ikas-studio/basic-examples/product-list/adding-image-price-and-updating-styles.mp4" autoPlay muted loop controls />

## Önizleme genişliğini ayarlama

Ürün kartı bileşenine çift tıklayarak içine girin. İlk element'i seçerek önizleme genişliğini ayarlayın.

<Callout type="info" title="Önizleme">
Önizleme kısmı hakkında daha detaylı bilgi için [Önizleme](https://builders.ikas.com/tr/docs/ikas-studio/content-and-design/elements/style/preview) sayfasını inceleyebilirsiniz.
</Callout>

## Ürün kartı stillerini güncelleme

`flex-direction`, `gap`, `width`, `padding`, `border` ve `border-radius` stillerini güncelleyerek ürün kartına uygun bir görünüm uygulayın.

## Görsel ekleme ve veri bağlama

**Elementler** kısmından bir **Görsel** element'i ekleyin. Ardından sağ kısımdaki **İçerik** alanına tıklayarak **Veri Bağla** seçeneğinden `Product` > `getSelectedVariant` > `getMainImage` > `image` kırılımındaki veriyi bağlayın.

<Callout type="info" title="Seçili varyant görseli">
Ürünlerin farklı varyantları olabilir. Seçili olan varyantın görselini bağlamak, ileride ürün kartı üzerinden varyant seçim kısmı eklediğinizde görselin de otomatik olarak değişmesini sağlayacaktır.
</Callout>

Görsel element'i için `width` ve `border-radius` stillerini güncelleyin.

## Fiyat ekleme ve veri bağlama

Ürün adını bağladığınız yazı element'ine tıklayın. **Elementler** kısmından bir **Yazı** element'i daha ekleyin ve sağ kısımdaki **İçerik** alanına tıklayarak **Veri Bağla** seçeneğinden `Product` > `getSelectedVariant` > `getFormattedFinalPrice` verisini bağlayın.

<Callout type="info" title="Seçili varyant fiyatı">
Burada da seçili varyantın fiyatını bağlamak, gelecekte ürün kartına varyant seçimi eklendiğinde fiyatın dinamik olarak güncellenmesini sağlayacaktır.
</Callout>

`font-size` ve `font-weight` stillerini güncelleyerek fiyatın daha belirgin görünmesini sağlayın.

## Sonuç

Ürün listesine geri dönerek yaptığınız güncellemelerin liste üzerine yansımasını görebilirsiniz.