---
title: Varyant değer item'ını düzenleme
description: Varyant değer item'ının düzenini ve veri bağlamasını güncelleme.
---

<Video src="/media/ikas-studio/basic-examples/product-detail/variant-picker/updating-variant-value-item.mp4" autoPlay muted loop controls />

## Item stillerini güncelleme

İlk element'i seçerek `flex-direction`, `gap` ve `cursor` stillerini güncelleyin.

## Görsel ekleme ve veri bağlama

**Elementler** kısmından bir **Görsel** element'i ekleyin. Sağ kısımdaki **İçerik** alanına tıklayarak **Veri Bağla** seçeneğinden `displayedVariantValuesListItem` > `variant` > `getMainImage` > `image` verisini bağlayın. Ardından `width`, `aspect-ratio` ve `border-radius` stillerini güncelleyin.

## Seçili varyant gösterimi

Hangi varyant değerinin seçili olduğunu göstermek amacıyla `border` alanına tıklayın ve renk kısmına sağ tıklayarak **Koşul Ekle** seçeneğini seçin. **Veri Bağla** altından `displayedVariantValuesListItem` > `isSelected` verisini seçin. İlk değer için bir renk belirleyin, **Fallback** değerini ise transparan olarak ayarlayın.

## Varyant değer adını bağlama

**Elementler** kısmından bir **Yazı** element'i ekleyin ve **İçerik** alanına tıklayarak **Veri Bağla** kısmından `displayedVariantValuesListItem` > `variantValue` > `name` verisini bağlayın. Ardından `text-align`, `font-weight` ve `color` stillerini güncelleyin.

## Stok durumuna göre görünüm

İlk element'i seçerek sağ kısımın sonunda bulunan **Efektler** altındaki **Opacity** seçeneğine sağ tıklayarak **Koşul Ekle** seçeneğini seçin. **Veri Bağla** altından `displayedVariantValuesListItem` > `hasStock` verisini seçin. İlk değeri `100%`, **Fallback** değerini `50%` olarak ayarlayın.

Bu sayede stoğu olmayan varyant değerleri hafif soluk şekilde görünecektir.