Birim fiyatlarını görüntüleme

Not

Bu kılavuz, yalnızca Fransa'da satış yapan satıcılara yöneliktir. Ürünlerinizi Fransa'da satıyorsanız ancak işletmeniz Fransa'da değilse bu özelliği etkinleştirmek için Shopify Destek ekibiyle iletişime geçin.

Ürünleri adet veya ölçü bazında satıyorsanız belirli ürünler için birim başına fiyatı göstermeniz gerekebilir. Bir ürüne ait birim fiyatı girdiğinizde birim fiyatı, ürün sayfalarında, koleksiyon sayfalarında, sepet sayfasında, ödeme sayfalarında ve sipariş onayı bildirimlerinde görüntülenir.

Ürününüze birim fiyatlar ekleme

Masaüstü

1. Shopify yöneticinizden Ürünler'e gidin.

2. Düzenlemek istediğiniz ürüne tıklayın.

3. İsteğe bağlı: Ürünlerinizin varyasyonları varsa Varyasyonlar bölümünde düzenlemek istediğiniz varyasyona tıklayın.

4. Fiyatlandırma bölümünde Bu ürün için birim fiyat göster'i seçin.

5. Toplam ürün ölçümleri alanına ürününüzün toplam ölçümlerini girin ve ardından ölçü birimini seçin.

6. İsteğe bağlı: Temel ölçüm alanına temel ölçümü ekleyin ve ardından ölçü birimini seçin. Örneğin, 1 kg ağırlığındaki bir ürün için temel birimi 100 g olarak belirleyebilirsiniz.

7. Kayıtyap ' a tıklayın.

iPhone

1. Shopify uygulamasından Ürünler > Tüm ürünler'e gidin.
2. Düzenlemek istediğiniz ürüne dokunun.
3. Ürün fiyatı alanınıza dokunun.
4. Birim fiyatını göster'i seçin.
5. Toplam ürün ölçümleri alanına ürününüzün toplam ölçümlerini girin ve ardından ölçü birimini seçin.
6. İsteğe bağlı: Temel ölçüm alanına temel ölçümü ekleyin ve ardından ölçü birimini seçin. Örneğin, 1 kg ağırlığındaki bir ürün için temel birimi 100 g olarak belirleyebilirsiniz.
7. Kaydet'e dokunun.

Android

1. Shopify uygulamasından Ürünler > Tüm ürünler'e gidin.
2. Düzenlemek istediğiniz ürüne dokunun.
3. Ürün fiyatı alanınıza dokunun.
4. Birim fiyatını göster'i seçin.
5. Toplam ürün ölçümleri alanına ürününüzün toplam ölçümlerini girin ve ardından ölçü birimini seçin.
6. İsteğe bağlı: Temel ölçüm alanına temel ölçümü ekleyin ve ardından ölçü birimini seçin. Örneğin, 1 kg ağırlığındaki bir ürün için temel birimi 100 g olarak belirleyebilirsiniz.
7. ✓ işaretine dokunun.

Online mağazanızda birim fiyatlarını gösterme

Tüm Online Store 2.0 temalarında birim fiyat özelliği mevcuttur. Online mağazanızda birim fiyatların görüntülenmesi için herhangi bir işlem yapmanız gerekmez.

Bir vintage tema kullanıyorsanız ve bu temayı birim fiyat özelliğini destekleyen bir sürüme güncelleyemiyorsanız birim fiyatı göstermek için tema kodunuzu manuel olarak özelleştirebilirsiniz.

Vintage bir temada birim fiyatlarını gösterme

Dikkat

Kodu düzenlemeye başlamadan önce temanızı yedekleyin. Aşağıdaki talimatlar ileri düzey kullanıcılara yöneliktir. Bu özelliği temanıza ekleme konusunda yardıma ihtiyacınız varsa özelleştirmelerle ilgili yardım almayı düşünebilirsiniz.

Bu özelleştirmeye yönelik adımlar, temanıza göre değişiklik gösterir. Aşağıdaki talimatları uygulamadan önce temanıza ilişkin düğmeye tıklayın:

Debut

Debut için adımlar

Birim fiyatları, 12.1.0 ve üzeri sürümler için Debut temasında kullanılabilir. Temanızı en son sürüme güncelleyemezseniz Debut'ın önceki sürümlerine birim fiyat özelleştirmesi ekleyebilirsiniz.

Ürün fiyatı parçacığınızı düzenleme

1. Parçacıklar dizininde product-price.liquid dosyasına tıklayın.

2. data-price ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

1. Kodu aşağıdaki parçacıkla değiştirin:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. price__sale ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Kapatma </div> etiketinin altına aşağıdaki kodu ekleyin:

{% if variant.unit_price_measurement %}
<div class="price__unit">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sepet sayfanızı düzenleme

1. Bölümler dizininde cart-template.liquid dosyasına tıklayın.

2. cart__price-wrapper ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Kodu aşağıdaki parçacıkla değiştirin:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Düzenlemelerinizden sonra cart-template.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Koleksiyon sayfanızı düzenleme

1. Bölümler dizininde collection.liquid dosyasına tıklayın.

2. grid-view-item__title ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{% include 'product-price' %}

1. Kodu aşağıdaki parçacıkla değiştirin:

{% include 'product-price', variant: nil %}

Düzenlemelerinizden sonra collection.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün kartı kılavuzunuzu düzenleme

1. Parçacıklar dizininde product-card-grid.liquid dosyasına tıklayın.

2. grid-view-item__title ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{% include 'product-price', variant: product %}

1. Kodu aşağıdaki parçacıkla değiştirin:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Düzenlemelerinizden sonra product-card-grid.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün kartı listenizi düzenleme

1. Parçacıklar dizininde product-card-list.liquid dosyasına tıklayın.

2. {% if product.available %} ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{% include 'product-price', variant: product %}

1. Kodu aşağıdaki parçacıkla değiştirin:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Düzenlemelerinizden sonra product-card-list.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sipariş sayfanızı düzenleyin

1. Şablonlar dizininde customers/order.liquid dosyasına tıklayın.

2. data-label="{{ 'customer.order.price' | t }}" ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Kodu aşağıdaki parçacıkla değiştirin:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Düzenlemelerinizden sonra customers/order.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Tema stillerinizi düzenleme

1. Öğeler dizininde theme.scss.liquid dosyasına tıklayın.

2. .price__vendor { ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

Düzenlemelerinizden sonra theme.scss.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

JavaScript tema kodunuzu düzenleme

1. Öğeler dizininde theme.js dosyasına tıklayın.

2. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

salePrice: '[data-sale-price]'

1. 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

productOnSale: 'price--on-sale',

1. 4. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

productUnitAvailable: 'price--unit-available',

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

1. Kodu aşağıdaki parçacıkla değiştirin:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

var salePrice = '';

1. 8. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

.replace('[$]', salePrice)

1. 10. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

_updatePrice: function(evt) {

1. 12. adımdaki koddan önce aşağıdaki parçacığı ekleyin:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

var $salePrice = $(this.selectors.salePrice, $priceContainer);

1. 14. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
  this.selectors.unitPriceBaseUnit,
  $priceContainer
);

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

.removeClass(this.classes.productOnSale)

1. 16. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

.removeClass(this.classes.productUnitAvailable)

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

else {
  // Regular price
  $regularPrice.html(
    theme.Currency.formatMoney(variant.price, theme.moneyFormat)
  );
}

1. 18. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

İngilizce çevirilerinizi düzenleme

1. Yerel ayarlar dizininde en.default.json dosyasına tıklayın.

2. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

"selection_help": "press the space key then arrow keys to make a selection"

1. 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

"unit_price_separator": "per",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

"include_taxes": "Tax included.",

1. 4. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

"unit_price_label": "Unit price",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Tema düzeninizi düzenleme

1. Düzen dizininde theme.liquid dosyasına tıklayın.

2. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

regularPrice: {{ 'products.product.regular_price' | t | json }},

1. 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Düzenlemelerinizden sonra theme.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

(İsteğe bağlı) Diğer diller için çevirileri ekleme

1. Shopify yöneticinizdeki Temalar sayfasına gidin.

2. ... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.

3. Tema dilini değiştir'i tıklayıp, düzenlemek istediğiniz dili seçin. Bu işlem yalnızca yayınlanan temalarınızda gerçekleştirilebilir.

4. Arama alanına Unit Price değerini girin.

5. Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.

6. Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.

7. Kaydet'e tıklayın.

Brooklyn

Brooklyn için adımlar

Birim fiyatları, 13.1.0 ve üzeri sürümler için Brooklyn temasında kullanılabilir. Temanızı en son sürüme güncelleyemezseniz Brooklyn'in önceki sürümlerine birim fiyat özelleştirmesi ekleyebilirsiniz.

Ürün fiyatı parçacığını ekleme

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

2. Ad alanına product-price değerini girin.

3. Aşağıdaki kodu kopyalayıp dosyaya yapıştırın.

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Öne çıkan ürün sayfasını düzenleme

1. Bölümler dizininde featured-product.liquid dosyasına tıklayın.

2. itemprop="offers" ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Kodu aşağıdaki parçacıkla değiştirin:

{% include 'product-price', variant: current_variant %}

Düzenlemelerinizden sonra featured-product.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün sayfanızı düzenleme

1. Bölümler dizininde product-template.liquid dosyasına tıklayın.

2. itemprop="offers" ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Kodu aşağıdaki parçacıkla değiştirin:

{% include 'product-price', variant: current_variant %}

Düzenlemelerinizden sonra product-template.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ajax sepetinizi düzenleme

1. Parçacıklar dizininde ajax-cart-template.liquid dosyasına tıklayın.

2. <span class="ajaxcart__price">{{{price}}}</span> ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. 2. adımdaki {{/if}} kodunun altına aşağıdaki kodu ekleyin:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

Düzenlemelerinizden sonra ajax-cart-template.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün kılavuz öğenizi düzenleme

1. Parçacıklar dizininde product-grid-template.liquid dosyasına tıklayın.

2. capture img_id_class ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. 2. adımdaki koddan önce aşağıdaki parçacığı ekleyin:

{%- assign variant = product.selected_or_first_available_variant -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. {{ product.price | money_without_trailing_zeros }} ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. </span> kodunun altına aşağıdaki kodu ekleyin:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sepet sayfanızı düzenleme

1. Şablonlar dizininde cart.liquid dosyasına tıklayın.

2. <span class="cart__price"> ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

{%- if item.original_line_price != item.final_line_price -%}
  <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
  <del class="cart__price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}

Not: Tema sürümünüz daha eskiyse bu parçacığı bulamayabilirsiniz. Bu durumda, 3. adımdaki kodu doğrudan <span class="cart__price"> öğesinin altına ekleyin.

1. 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Düzenlemelerinizden sonra cart.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sipariş sayfanızı düzenleyin

1. Şablonlar dizininde customers/order.liquid dosyasına tıklayın.

2. {{ line_item.original_price | money }} ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. 2 adımdaki </td> kodundan önce aşağıdaki parçacığı ekleyin:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Düzenlemelerinizden sonra customers/order.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Tema stillerinizi düzenleme - Bölüm 1

1. Öğeler dizininde theme.scss.liquid dosyasına tıklayın.

2. .ajaxcart__price { ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

.ajaxcart__price {
    font-size: em(13px);
    display: block;
}

1. 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

.cart__unit-price {
    display: block;
}

Düzenlemelerinizden sonra theme.scss.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Tema stillerinizi düzenleme - Bölüm 2

1. Öğeler dizininde timber.scss.liquid dosyasına tıklayın.

2. .product-single__policies { ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

.product-single__policies {
  margin: 15px 0 25px 0;
}

1. 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

.product-single__unit {
  display: none;

  .price-container--unit-available & {
    display: block;
  }
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Dosyanın sonuna gidin ve aşağıdaki kodu ekleyin:

.product-unit-price {
  color: $colorTextBody;
  display: block;
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

JavaScript tema kodunuzu düzenleme

1. Öğeler dizininde theme.js.liquid dosyasına tıklayın.

2. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

var prodImg;

1. 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

var unitPrice = null;

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

// Create item's data object and add to 'items' array

1. 4. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      settings.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

vendor: cartItem.vendor

1. 6. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

unitPrice: unitPrice,

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

productPrice: '#ProductPrice',

1. 8. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. $(this.selectors.priceContainer, this.$container).removeClass( ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden'
);

1. Kodu aşağıdaki parçacıkla değiştirin:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden price-container--unit-available'
);

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

$(this.selectors.SKU).html(variant.sku);

1. 12. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, moneyFormat)
  );
  $unitPriceBaseUnit.html(this.getBaseUnit(variant));

  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. this.destroyImageCarousel(); ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

onUnload: function() {
  this.$container.off(this.settings.namespace);
  this.destroyImageCarousel();
}

1. 14. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

İngilizce çevirilerinizi düzenleme

1. Yerel ayarlar dizininde en.default.json dosyasına tıklayın.

2. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

"refresh_page": "choosing a selection results in a full page refresh"

1. 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:

"unit_price_separator": "per",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:

"include_taxes": "Tax included.",

1. 4. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:

"unit_price": "Unit price",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

(İsteğe bağlı) Diğer diller için çevirileri ekleme

1. Shopify yöneticinizdeki Temalar sayfasına gidin.

2. ... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.

3. Tema dilini değiştir'i tıklayıp, düzenlemek istediğiniz dili seçin. Bu işlem yalnızca yayınlanan temalarınızda gerçekleştirilebilir.

4. Arama alanına Unit Price değerini girin.

5. Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.

6. Ürünler / Genel bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.

7. Kaydet'e tıklayın.

Minimal

Minimal için adımlar

Birim fiyatları, 11.2.0 ve üzeri sürümler için Minimal temasında kullanılabilir. Temanızı en son sürüme güncelleyemezseniz Minimal'in önceki sürümlerine birim fiyat özelleştirmesi ekleyebilirsiniz.

Parçacıklarınızı güncelleme

1. Parçacıklar klasörünü bulup genişletin.

2. Yeni bir parçacık ekle'yi seçin.

3. product-unit-price adını girin.

4. Aşağıdaki kodu kopyalayıp product-unit-price.liquid dosyasına yapıştırın.

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Kaydet'e tıklayın.

2. product-grid-item.liquid dosyasını bulup düzenleyin.

3. Şu satırı:

{% capture price %}{{ featured.price | money }}{% endcapture %}

Şu satırla:

{%- assign price = featured.price | money -%}

1. {{ price }} kodunu bulup aşağıya eklemek için bul klavye kısayolunu kullanın:

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}

Düzenlemelerinizden sonra product-grid-item.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

2. Dosyayı bulup düzenleme search-result.liquid

3. {% if item.object_type == 'product' %} kodunu bulup aşağıdaki satırda yer alan aşağıdaki kodu eklemek için bul klavye kısayolunu kullanın:

{%- assign variant = item.selected_or_first_available_variant -%}

1. Şimdi aşağıdaki iki kod parçacığını bulmak için bul klavye kısayolunu kullanın:

<s><small>{{ item.compare_at_price_max | money }}</small></s>

Ve

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
  {{ item.price | money }}
</span>

1. Önceki adımda listelenen iki kod parçacığının her birinin altına kod blokunu ekleyin:

{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant %}
{%- endif -%}

Düzenlemelerinizden sonra search-result.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Stillerinizi güncelleme

1. Öğeler klasörünü bulup genişletin.

2. theme.scss.liquid dosyasını düzenleyin.

3. Şu kod öbeğini bulmak için bul klavye kısayolunu kullanın:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

font-family: $headerFontStack;

1. Aşağıdaki kod parçacığını bulmak için bul klavye kısayolunu kullanın:

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

.grid-link__unit-price {
  font-size: 1em;
}

1. Aşağıdaki kod parçacığını bulmak için bul klavye kısayolunu kullanın:

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

.order-discount--price {
  margin-bottom: 0;
}

1. Aşağıdaki kod parçacığını bulmak için bul klavye kısayolunu kullanın:

.cart__product-title {
  display: inline-block;

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

font-weight: $bodyFontWeightBold;

Düzenlemelerinizden sonra theme.scss.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

2. timber.scss.liquid dosyasını bulup düzenleyin.

3. Şu kodu bulmak için bul klavye kısayolunu kullanın:

.quantity-selector {
    display: inline-block;
  }
}

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

.product-single__title {
  font-weight: $bodyFontWeightBold;
}

1. Şu kodu dosyanın sonuna ekleyin:

.product-unit-price {
  color: rgba($colorTextBody, 0.6);
  display: block;
  font-family: $headerFontStack;
  font-size: em(12px);
}

Düzenlemelerinizden sonra timber.scss.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Şablonlarınızı güncelleme

1. Şablonlar klasörünü bulup genişletin.

2. customers/order.liquid dosyasını bulup düzenleyin.

3. Kodu bulmak için bul klavye kısayolunu kullanın:

{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. 3. adımdaki kodun altına şu kodu ekleyin:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Düzenlemelerinizden sonra customers/order.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

JavaScript'inizi güncelleme

1. Öğeler alanında theme.js dosyasını bulun ve düzenleyin.

2. .shopify-payment-button kodunu içeren satırı bulmak için bul klavye kısayolunu kullanın ve bu kodu şununla değiştirin:

$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)

Bu kod öbeği şu şekilde görünmelidir:

1. Şu kodu arayın:

else {
  this.selectors.$comparePrice.addClass('hide').html('');
  this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}

1. Altına şu kodu ekleyin:

// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
  this.selectors.$unitPrice.html(
      Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
  this.selectors.$unitPriceContainer.removeClass('hide');
}

Sonuç şu şekilde görünmelidir:

1. Şu kodu bulmak için bul klavye kısayolunu kullanın:

.attr('data-zoom')
  });
});

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

},
getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sepet şablonunuzu güncelleme

1. Bölümler klasörünü bulup genişletin.

2. cart-template.liquid dosyasını düzenleyin.

3. <span class="order-discount h5">{{ item.final_price | money }}</span> kodunu bulmak için bul klavye kısayolunu kullanın.

4. Satırı şu kodla değiştirin:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>

1. {%- if item.line_level_discount_allocations != blank -%} kodunun ilk geçtiği yeri bulun:

{%- if item.line_level_discount_allocations != blank -%}
  <ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
    {%- for discount_allocation in item.line_level_discount_allocations -%}
      <li class="order-discount__item">
        <span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
      </li>
    {%- endfor -%}
  </ul>
{%- endif -%}

1. 5. adımdaki kodun üzerine şu kodu öbeğini ekleyin:

{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}

Düzenlemelerinizden sonra cart-template.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Öne çıkan ürününüzü güncelleme

1. Bölümler klasörünü bulup genişletin.

2. featured-product.liquid dosyasını düzenleyin.

3. itemprop="name" kodunu içeren satırı bulmak için bul klavye kısayolunu kullanın ve bu kodu şununla değiştirin:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>

1. id="PriceA11y" ifadesini içeren kodu bulun:

{% if compare_at_price > price %}
  <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <s id="ComparePrice" class="product-single__sale-price">
    { compare_at_price | money }}
  </s>
{% endif %}

1. Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:

{% include 'product-unit-price', variant: variant, available: true %}

Düzenlemelerinizden sonra featured-product.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün şablonunuzu güncelleme

1. Bölümler klasörünü bulup genişletin.

2. product-template.liquid dosyasını düzenleyin.

3. itemprop="name" kodunu içeren satırı bulmak için bul klavye kısayolunu kullanın ve bu kodu şununla değiştirin:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

1. Kodu bulmak için bul klavye kısayolunu kullanın:

{% else %}
  <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price hide">
      {{ product.compare_at_price_max | money }}
    </s>
{% endif %}

1. Aşağıdaki satırı ekleyin:

{% include 'product-unit-price', variant: variant, available: true %}

Düzenlemelerinizden sonra product-template.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Yerel ayarları güncelleme

1. Yerel ayarlar klasörünü bulup genişletin.

2. en.default.json dosyasını açın ve düzenleyin.

3. refresh_page kodunu içeren satırı bulmak için bul klavye kısayolunu kullanın ve bu kodu şununla değiştirin:

"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"

Sonuç şu şekilde görünmelidir:

1. full_details içeren satırı bulun ve şununla değiştirin:

"full_details": "Full details",
"unit_price_label": "Unit price"

Sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

(İsteğe bağlı) Diğer diller için çevirileri ekleme

1. Shopify yöneticinizdeki Temalar sayfasına gidin.

2. ... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.

3. Tema dilini değiştir'i tıklayıp, düzenlemek istediğiniz dili seçin. Bu işlem yalnızca yayınlanan temalarınızda gerçekleştirilebilir.

4. Arama alanına Unit Price değerini girin.

5. Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.

6. Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.

7. Kaydet'e tıklayın.

Venture

Venture için adımlar

Birim fiyatları, 9.4.0 ve üzeri sürümler için Venture temasına eklendi. Temanızı en son sürüme güncelleyemezseniz Venture'ın önceki sürümlerine birim fiyat özelleştirmesi uygulamak için bu adımları takip edin.

Temanızın dil dosyasını düzenleme

1. Yerel ayarlar dizininde en.default.json seçeneğine tıklayın.

2. refresh_page ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

"refresh_page": "choosing a selection results in a full page refresh"

1. 2. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:

"unit_price_separator": "per",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. stock_unavailable ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."

1. 4. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:

"unit_price_label": "Unit price",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Temanızın stil sayfasını düzenleme

1. Assets (Öğeler) dizininde theme.scss.liquid seçeneğine tıklayın.

2. .product-single__policies { satırını bulmak için bul klavye kısayolunu kullanın:

.product-single__policies {
    font-size: em($font-size-base - 1);
  }

1. 2. adımda bulunan kod blokundaki kapatma } etiketinin altına aşağıdaki kodu ekleyin:

.product-unit-price {
    font-size: em(12);
    color: $color-body-text;
  }

  .product-card__unit-price {
    display: block;
  }

Düzenlemelerinizden sonra theme.scss.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün birim fiyatı parçacığını ekleme

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

2. product-unit-price adını girin.

3. product-unit-price.liquid bölümüne aşağıdaki kodu ekleyin:

<span class="product-unit-price{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}{% unless product_variant.unit_price_measurement %} hide{% endunless %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if product_variant.unit_price_measurement.reference_value != 1 -%}
        {{- product_variant.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ product_variant.unit_price_measurement.reference_unit }}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ product_variant.unit_price | money }}</span>
  {{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün kartı parçacığınızı düzenleme

1. Parçacıklar dizininde product-card.liquid seçeneğine tıklayın.

2. <a href="{{ product.url | within: collection }}" satırını bulmak için bul klavye kısayolunu kullanın.

3. 1. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. <div class="product-card__price"> satırını bulmak için bul klavye kısayolunu kullanın:

<div class="product-card__price">
  {% if product.compare_at_price > product.price %}
    {% comment %}
      Product is on sale
    {% endcomment %}
    {% if product.price_varies %}
      {% assign sale_price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s class="product-card__regular-price">{{ product.compare_at_price | money_without_trailing_zeros }}</s>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% else %}
    {% comment %}
      Not on sale, but could still have varying prices
    {% endcomment %}
    {% if product.price_varies %}
      {% assign price = product.price | money_without_trailing_zeros %}
      {{ 'products.product.from_text_html' | t: price: price }}
    {% else %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      {{ product.price | money_without_trailing_zeros }}
    {% endif %}
  {% endif %}
</div>

1. 5. adımda bulunan kapatma </div> etiketinin üzerine aşağıdaki kodu ekleyin:

{%- unless product.price_varies -%}
  {%- if current_variant.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
  {%- endif -%}
{%- endunless -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sepet sayfası şablonunuzu düzenleme

1. Bölümler dizininde cart-template.liquid öğesine tıklayın.

2. <td class="cart__cell--total"> ifadesinin geçtiği ilk yeri bulmak için bul klavye kısayolunu kullanın:

<td class="cart__cell--total">
  {%- if item.original_line_price != item.final_line_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
  {%- endif -%}

1. 2. adımda bulunan endif etiketinin altına aşağıdaki kodu ekleyin:

{%- if item.unit_price_measurement -%}
  {% include 'product-unit-price', product_variant: item %}
{%- endif -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. <td class="cart__cell--total"> ifadesinin geçtiği ikinci yeri bulmak için bul klavye kısayolunu kullanın:

<td class="cart__cell--total">
  {{#if discountsApplied}}
      <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
    <del class="cart__item-total">{{{originalLinePrice}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
    <span class="cart__item-total">{{{linePrice}}}</span>
  {{else}}
    <span class="cart__item-total">{{{originalLinePrice}}}</span>
  {{/if}}
  {{#if discountsApplied}}
    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
      {{#each discounts}}
        <li class="order-discount__item">
          {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
        </li>
      {{/each}}
    </ul>
  {{/if}}

1. 4. adımda bulunan ikinci kapatma {{/if}} etiketinin altına aşağıdaki kodu ekleyin:

{{#if unitPrice}}
  <span class="visually-hidden">{% endraw %}{{ 'products.product.unit_price_label' | t }}{% raw %}</span>
  <span class="product-unit-price">
    {% endraw %}
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Öne çıkan ürün sayfası şablonunuzu düzenleme

1. Bölümler dizininde featured-product.liquid öğesine tıklayın.

2. {% assign current_variant = product.selected_or_first_available_variant %} satırını bulmak için bul klavye kısayolunu kullanın.

3. 1. adımda bulunan satırın altına aşağıdaki kodu ekleyin:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. <ul class="product-single__meta-list ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

<ul class="product-single__meta-list list--no-bullets list--inline">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
  <div class="product-tag">
    {{ 'products.product.on_sale' | t }}
  </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Bu ul etiketinin altında, {% if section.settings.stock_enable %} kodunu bulun.

2. 1. adımda bulunan if bloğunun üzerine aşağıdaki kodu ekleyin:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün sayfası şablonunuzu düzenleme

1. Bölümler dizininde product-template.liquid öğesine tıklayın.

2. {% assign current_variant = product.selected_or_first_available_variant %} satırını bulmak için bul klavye kısayolunu kullanın.

3. 1. adımda bulunan satırın altına aşağıdaki kodu ekleyin:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. <ul class="product-single__meta-list ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

<ul class="product-single__meta-list list--no-bullets list--inline{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__price-container{% endif %}">
  <li id="ProductSaleTag-{{ section.id }}" class="{% unless product.compare_at_price > product.price %}hide{% endunless %}">
    <div class="product-tag">
      {{ 'products.product.on_sale' | t }}
    </div>
  </li>
  <li>
    {% unless product.compare_at_price_max > product.price %}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    {% endunless %}
    <span id="ProductPrice-{{ section.id }}" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
      {{ current_variant.price | money }}
    </span>
  </li>
  {% if product.compare_at_price_max > product.price %}
    <li>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <s id="ComparePrice-{{ section.id }}" class="product-single__price product-single__price--compare">
        {{ current_variant.compare_at_price | money }}
      </s>
    </li>
  {% endif %}
  {% if section.settings.stock_enable %}

1. Bu ul etiketinin altında, {% if section.settings.stock_enable %} kodunu bulun.

2. 1. adımda bulunan if bloğunun üzerine aşağıdaki kodu ekleyin:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Müşterilerinizin sipariş şablonunu düzenleme

1. Şablonlar dizininde customers/order.liquid seçeneğine tıklayın.

2. <td class="text-right" data-label="{{ 'customer.order.price' | t }}"> satırını bulmak için bul klavye kısayolunu kullanın:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. 2. adımda bulunan kodu, aşağıdaki kodla değiştirin:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  <div>
    {%- if line_item.original_price != line_item.final_price -%}
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
      <del>{{ line_item.original_price | money }}</del>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
      {{ line_item.original_price | money }}
    {%- endif -%}
  </div>
  {%- if line_item.unit_price_measurement -%}
    {% include 'product-unit-price', product_variant: line_item %}
  {%- endif -%}
</td>

Düzenlemelerinizden sonra customers/order.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Temanızın JavaScript dosyasını düzenleme

1. Assets (Öğeler) dizininde theme.js seçeneğine tıklayın.

2. // Create item's data object and add to 'items' array satırını bulmak için bul klavye kısayolunu kullanın.

3. 1. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Şu satırı bulmak için bul klavye kısayolunu kullanın: vendor: cartItem.vendor,

2. 1. adımda bulunan satırın altına aşağıdaki kodu ekleyin:

unitPrice: unitPrice,

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. shopifyPaymentButton: '.shopify-payment-button' satırını bulmak için bul klavye kısayolunu kullanın.

2. 1. adımda bulunan satırı, aşağıdaki kodla değiştirin:

shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. _updateSKU: function(evt) { satırını bulmak için bul klavye kısayolunu kullanın.

2. 1. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
      variant.unit_price_measurement.reference_unit;
},

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. this._updateIncomingInfo(variant); satırını bulmak için bul klavye kısayolunu kullanın:

} else {
  // Variant is sold out, disable the submit button
  cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
  cache.$addToCartText.html(theme.strings.soldOut);
  $(this.selectors.shopifyPaymentButton, this.$container).hide();
  // Update when stock will be available
  this._updateIncomingInfo(variant);
}

1. 10. adımda bulunan kapatma } etiketinin altına aşağıdaki kodu ekleyin:

$(this.selectors.unitPriceContainer, this.$container).addClass('hide');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));

  $(this.selectors.unitPriceContainer, this.$container).removeClass(
    'hide'
  );
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

(İsteğe bağlı) Diğer diller için çevirileri ekleme

1. Shopify yöneticinizdeki Temalar sayfasına gidin.

2. ... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.

3. Tema dilini değiştir'i tıklayıp, düzenlemek istediğiniz dili seçin. Bu işlem yalnızca yayınlanan temalarınızda gerçekleştirilebilir.

4. Arama alanına Unit Price değerini girin.

5. Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.

6. Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.

7. Kaydet'e tıklayın.

Supply

Supply için adımlar

Birim fiyatları, 8.3.0 ve üzeri sürümler için Supply temasına eklendi. Temanızı en son sürüme güncelleyemezseniz Supply'ın önceki sürümlerine birim fiyat özelleştirmesi uygulamak için bu adımları takip edin.

Ürün birim fiyatı parçacığını ekleme

1. Parçacıklar klasörünü bulup genişletin.

2. Yeni bir parçacık ekle'yi seçin.

3. product-unit-price adını girin.

4. Aşağıdaki kodu kopyalayıp dosyaya yapıştırın ve Kaydet'i seçin.

{%- unless available -%}
{%- if variant.title -%}
    {%- assign available = variant.available -%}
{%- else -%}
    {%- assign available = true -%}
{%- endif -%}
{%- endunless -%}
<div class="product-price-unit {% if available and variant.unit_price_measurement %} product-price-unit--available{% endif %}" data-unit-price-container>
<span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
{%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

Düzenlemelerinizden sonra product-unit-price.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Öne çıkan ürün şablonunuzu düzenleme

1. Bölümler klasörünü bulup genişletin ve featured-product.liquid dosyasını seçin.

2. Dosyada {% include 'price' with price %} satırını bulmak için bul klavye kısayolunu kullanın:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with price %}
  </span>
</li>

1. 2. adımdaki parçacığın kapatma </span> etiketinin altına aşağıdaki kodu ekleyin:

{% include 'product-unit-price' variant: variant %}

Düzenlemelerinizden sonra featured-product.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün şablonunuzu düzenleme

1. Bölümler klasörünü bulup genişletin ve product-template.liquid dosyasını seçin.

2. Dosyada {% include 'price' with variant.price %} satırını bulmak için bul klavye kısayolunu kullanın:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with variant.price %}
  </span>
</li>

1. 2. adımdaki kapatma </span> etiketinin altına aşağıdaki kodu ekleyin:

{% include 'product-unit-price', variant: variant %}

Düzenlemelerinizden sonra product-template.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün kılavuz öğesi parçacığınızı düzenleme

1. Parçacıklar klasörünü bulup genişletin ve product-grid-item.liquid dosyasını seçin.

2. Dosyada {% if on_sale and section.settings.product_show_saved_amount %} satırını bulmak için bul klavye kısayolunu kullanın:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Kodu aşağıdaki parçacıkla değiştirin:

{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
  </div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
    {% assign compare_price = product.compare_at_price %}
    {% assign product_price = product.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

Düzenlemelerinizden sonra product-grid-item.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Ürün liste öğesi parçacığınızı düzenleme

1. Parçacıklar klasörünü bulup genişletin ve product-list-item.liquid dosyasını seçin.

2. Dosyada <div class="product-item--price text-center"> satırını bulmak için bul klavye kısayolunu kullanın:

<div class="product-item--price text-center">
  <p class="h1 medium-down--left">
    {% if on_sale %}
      <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
    {% else %}
      <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
    {% endif %}
    {% include 'price' with product.price %}
    {% if on_sale and section.settings.product_show_compare_at_price %}
      <small>
        <s>
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
          {% include 'price' with product.compare_at_price %}
        </s>
      </small>
    {% endif %}
  </p>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>

1. Kodu aşağıdaki parçacıkla değiştirin:

<div class="text-center">
  <div class="product-item--price">
    <p class="h1 medium-down--left">
      {% if on_sale %}
        <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
      {% else %}
        <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
      {% endif %}
      {% include 'price' with product.price %}
      {% if on_sale and section.settings.product_show_compare_at_price %}
        <small>
          <s>
            <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
            {% include 'price' with product.compare_at_price %}
          </s>
        </small>
      {% endif %}
    </p>
    {%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
      {% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
    {%- endif -%}
  </div>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </div>

Düzenlemelerinizden sonra product-list-item.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Arama sonucu ızgara parçacığını düzenleme

1. Parçacıklar klasörünü bulup genişletin ve search-result-grid.liquid dosyasını seçin.

2. Dosyada {% if on_sale and section.settings.product_show_saved_amount %} satırını bulmak için bul klavye kısayolunu kullanın:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium--right">
      {% assign compare_price = item.compare_at_price %}
      {% assign product_price = item.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Kodu aşağıdaki parçacıkla değiştirin:

{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
    {% include 'product-unit-price', variant: item.first_available_variant %}
  {%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
  <div class="sale-tag medium--right">
    {% assign compare_price = item.compare_at_price %}
    {% assign product_price = item.price %}
    {% include 'price-sale' %}
  </div>
{% endif %}

Düzenlemelerinizden sonra search-result-grid.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sepet şablonunuzu düzenleme

1. Şablonlar klasörünü bulup genişletin ve cart.liquid dosyasını seçin.

2. Dosyada <del class="cart-original-price order-discount--cart-price"> satırını bulmak için bul klavye kısayolunu kullanın:

<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}

1. Kodu aşağıdaki parçacıkla değiştirin:

<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}

Düzenlemelerinizden sonra cart.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Sipariş şablonunuzu düzenleme

1. Şablonlar klasörünü bulup genişletin ve customers/order.liquid dosyasını seçin.

2. Dosyada <td class="text-right" data-label="customer.order.price"> satırını bulmak için bul klavye kısayolunu kullanın:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <del>{{ line_item.original_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. 2. adımdaki kapatma </td> etiketinin üzerine aşağıdaki kodu ekleyin:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Düzenlemelerinizden sonra customers/order.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Tema düzeninizi düzenleme

1. Düzen klasörünü bulup genişletin ve theme.liquid dosyasını seçin.

2. Dosyada only_left: ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

product:{
  unavailable: {{ 'products.product.unavailable' | t | json }},
  will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
  only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},

1. 2. adımdaki only_left:{{ 'products.product.only_left' | t: count: '1' | json }} kodunun üzerine aşağıdaki kodu ekleyin:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Düzenlemelerinizden sonra theme.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Tema stillerinizi düzenleme

1. Bölümler klasörünü bulup genişletin ve theme.scss.liquid dosyasını seçin.

2. Dosyada .product-item--price { satırını bulmak için bul klavye kısayolunu kullanın:

.product-item--price {
  @include clearfix;
  .h1 {
    margin-bottom: $gutter/2;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}

1. Kodu aşağıdaki parçacıkla değiştirin:

.product-item--price {
  @include clearfix;
  margin-bottom: $gutter/2;

  .h1 {
    margin-bottom: 0;
  }

  span {
    line-height: 22px;
  }

  small {
    white-space: nowrap;
  }
}

.product-price-unit {
  display: none;
  font-size: em(12px);
  margin-right: 10px;

  .cart-pricing &,
  .order-table & {
    margin-right: 0;
  }

  &.product-price-unit--available {
    display: block;
  }
}

Düzenlemelerinizden sonra theme.scss.liquid dosyası şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

JavaScript tema kodunuzu düzenleme

1. Öğeler klasörünü bulup genişletin ve theme.js.liquid dosyasını seçin.

2. Dosyada originalSelectorId: 'productSelect-' + sectionId, satırını bulmak için bul klavye kısayolunu kullanın:

selectors: {
  originalSelectorId: 'productSelect-' + sectionId,
  $addToCart: $('#addToCart-' + sectionId),
  $SKU: $('.variant-sku', this.$container),
  $productPrice: $('#productPrice-' + sectionId),
  $comparePrice: $('#comparePrice-' + sectionId),
  $addToCartText: $('#addToCartText-' + sectionId),
  $quantityElements: $('#quantity-selector-' + sectionId),
  $variantQuantity: $('#variantQuantity-' + sectionId),
  $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
  $variantIncoming: $('#variantIncoming-' + sectionId),
  $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
  $productImageContainer: $('#productPhotoContainer-' + sectionId),
  $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
  $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
  $productFullDetails: $('.full-details', this.$container),
  $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
  $shopifyPaymentButton: '.shopify-payment-button'
}

1. 2. adımdaki originalSelectorId: 'productSelect-' + sectionId, kodunun üzerine aşağıdaki kodu ekleyin:

unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Dosyada productVariantCallback: function(variant) { satırını bulmak için bul klavye kısayolunu kullanın:

productVariantCallback: function(variant) {
  var self = this;
  if (variant) {
    // Update variant image, if one is set
    if (variant.featured_image) {
      var newImg = variant.featured_image;
      var $newImage = this.settings.selectors.$productImageWrapper.filter('[data-image-id="' + newImg.id + '"]');
      var $otherImages = this.settings.selectors.$productImageWrapper.not('[data-image-id="' + newImg.id + '"]');

      $newImage.removeClass('hide');
      $otherImages.addClass('hide');
    }

1. 2. adımdaki if (variant) { kodunun altına aşağıdaki kodu ekleyin:

// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);

$unitPriceContainer.removeClass('product-price-unit--available');

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);

  $unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
  $unitPriceBaseUnit.text(this.getBaseUnit(variant));
  $unitPriceContainer.addClass('product-price-unit--available');
}

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Dosyada customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; satırını bulmak için bul klavye kısayolunu kullanın:

customPriceFormat = ' <span aria-hidden="true">' + customPrice + '</span>';
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.regular_price</span> ' + a11yComparePrice + '</span>';
customPriceFormat += ' <span class="visually-hidden"><span class="visually-hidden">products.general.sale_price</span> ' + a11yPrice + '</span>';

1. customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; satırını aşağıdaki parçacıkla değiştirin:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Dosyada $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); satırını bulmak için bul klavye kısayolunu kullanın:

} else {
  // The variant doesn't exist, disable submit button.
  // This may be an error or notice that a specific variant is not available.
  this.settings.selectors.$addToCart.addClass('disabled').prop('disabled', true);
  this.settings.selectors.$addToCartText.html(theme.strings.product.unavailable);
  this.settings.selectors.$variantQuantity.removeClass('is-visible');
  this.settings.selectors.$quantityElements.hide();
  $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
}

1. 11. adımdaki parçacığın altına aşağıdaki kodu ekleyin:

},

getBaseUnit: function (variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

Temanızın dil dosyasını düzenleme

1. Yerel ayarlar klasörünü bulup genişletin ve en.default.json dosyasını seçin.

2. Dosyada "refresh_page" ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},

1. 2. adımdaki "refresh_page" kodunun üzerine aşağıdaki kodu ekleyin:

"unit_price_separator": "per",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Dosyada "will_be_in_stock_after" ifadesini içeren satırı bulmak için bul klavye kısayolunu kullanın:

"product": {
  "sold_out": "Sold Out",
  "will_not_ship_until": "Will not ship until ",
  "quantity": "Quantity",
  "add_to_cart": "Add to Cart",
  "unavailable": "Unavailable",
  "will_be_in_stock_after": "Will be in stock after ",
  "only_left": {
    "one": "Only  left!",
    "other": "Only  left!"
  },
  "full_details": "Full details"
}

1. 5. adımdaki "will_be_in_stock_after" kodundan sonra aşağıdaki kodu ekleyin:

"unit_price_label": "Unit price",

Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:

1. Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.

(İsteğe bağlı) Diğer diller için çevirileri ekleme

1. Shopify yöneticinizdeki Temalar sayfasına gidin.

2. ... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.

3. Tema dilini değiştir'i tıklayıp, düzenlemek istediğiniz dili seçin. Bu işlem yalnızca yayınlanan temalarınızda gerçekleştirilebilir.

4. Giriş çubuğunu kullanarak Unit Price öğesini arayın.

5. Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.

6. Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.

7. Kaydet'e tıklayın.

Sipariş bildirimlerinizde birim fiyatlarını gösterme

Özellik etkin olduğunda, sipariş onayı bildirimi, varsayılan olarak birim fiyatları gösterir.

Ürününüze birim fiyatlar eklediyseniz ve birim fiyatlarınız sipariş onayı bildirimleriniz içinde görünmüyorsa şablonlarınızı manuel olarak güncellemeniz gerekebilir.

Adımlar:

1. Shopify yöneticinizden Ayarlar > Bildirimler'e gidin.

2. Siparişler bölümünde Sipariş onayı'na tıklayın.

3. Kodu düzenle'ye tıklayın.

4. Aşağıdaki kod parçacığını, "order-list__item-price" sınıfının içindeki şablonun ekleyin:

{%- if line_item.unit_price_measurement -%}
  <div class="order-list__unit-price">
     {{ line_item.unit_price | money }}/
     {%- if line_item.unit_price_measurement.reference_value != 1 -%}
       {{- line_item.unit_price_measurement.reference_value -}}
     {%- endif -%}
     {{ line_item.unit_price_measurement.reference_unit }}
  </div>
{%- endif -%}

 5. Kaydet'e tıklayın.

İpucu

Sipariş bildiriminde birim fiyatının görüntülenip görüntülenmediğini görmek için mağazanızda bir test siparişi verin.