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

Ü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ı: Varsayılan temel ölçüyü değiştirmek istiyorsanız Temel ölçü alanına yeni temel ölçünüzü ekleyin ve bir ölçü birimi seçin. Örneğin, 200g ağırlığındaki bir ürün için 1 kg temel ölçü birimini seçmeniz gerekir.

  7. Kaydet'e 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ı: Varsayılan temel ölçüyü değiştirmek istiyorsanız Temel ölçü alanına yeni temel ölçünüzü ekleyin ve bir ölçü birimi seçin. Örneğin, 200g ağırlığındaki bir ürün için 1 kg temel ölçü birimini seçmeniz gerekir.
  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ı: Varsayılan temel ölçüyü değiştirmek istiyorsanız Temel ölçü alanına yeni temel ölçünüzü ekleyin ve bir ölçü birimi seçin. Örneğin, 200g ağırlığındaki bir ürün için 1 kg temel ölçü birimini seçmeniz gerekir.
  7. düğmesine 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

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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-price.liquid dosyasının güncelleştirilmiş sürümü

  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 onaylamak 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üzenlemelerinizi yaptıktan sonra cart-template.liquid dosyasının şu şekilde görünmesi gerekir:

cart-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra collection.liquid dosyasının şu şekilde görünmesi gerekir:

collection.liquid file dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-card-grid.liquid dosyasının şu şekilde görünmesi gerekir:

product-card-grid.liquid file dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-card-list.liquid dosyasının şu şekilde görünmesi gerekir:

product-card-list.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid dosyasının şu şekilde görünmesi gerekir:

customers/order.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid dosyasının şu şekilde görünmesi gerekir:

theme.scss.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.liquid dosyasının şu şekilde görünmesi gerekir:

theme.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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 onaylamak 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üzenlemelerinizi yaptıktan sonra featured-product.liquid dosyasının şu şekilde görünmesi gerekir:

featured-product.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-template.liquid dosyasının şu şekilde görünmesi gerekir:

product-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra ajax-cart-template.liquid dosyasının şu şekilde görünmesi gerekir:

ajax-cart-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-grid-template.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-grid-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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: Temanızın sürümü daha eskiyse bu kod parçacığını 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üzenlemelerinizi yaptıktan sonra cart.liquid dosyasının şu şekilde görünmesi gerekir:

cart.liquid file dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid dosyasının şu şekilde görünmesi gerekir:

customers/order.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid dosyasının şu şekilde görünmesi gerekir:

theme.scss.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

timber.scss.liquid dosyasının güncelleştirilmiş sürümü

  1. Dosyanın sonuna gidin ve aşağıdaki kodu ekleyin:
.product-unit-price {
  color: $colorTextBody;
  display: block;
}

Düzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

timber.scss.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-grid-item.liquid dosyasının şu şekilde görünmesi gerekir:

product-grid-item.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra search-result.liquid dosyasının şu şekilde görünmesi gerekir:

search-result.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid dosyasının şu şekilde görünmesi gerekir:

theme.scss.liquid dosyasının güncelleştirilmiş sürümü - bölüm 1
theme.scss.liquid dosyasının güncelleştirilmiş sürümü - bölüm 2
theme.scss.liquid dosyasının güncelleştirilmiş sürümü - bölüm 3

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra timber.scss.liquid dosyasının şu şekilde görünmesi gerekir:

timber.scss.liquid dosyasının güncelleştirilmiş sürümü - bölüm 1
timber.scss.liquid dosyasının güncelleştirilmiş sürümü - bölüm 2

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid dosyasının şu şekilde görünmesi gerekir:

order.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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)

Kod parçasının şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  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');
}

Sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  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;

Sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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 göründüğü 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üzenlemelerinizi yaptıktan sonra cart-template.liquid dosyasının şu şekilde görünmesi gerekir:

cart-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra featured-product.liquid dosyasının şu şekilde görünmesi gerekir:

featured-product.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-template.liquid dosyasının şu şekilde görünmesi gerekir:

product-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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"

Sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  1. full_details içeren satırı bulun ve şununla değiştirin:
"full_details": "Full details",
"unit_price_label": "Unit price"

Sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid dosyasının şu şekilde görünmesi gerekir:

theme.scss.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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 onaylamak 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.

    1. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:
{%- assign current_variant = product.selected_or_first_available_variant -%}

Düzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-card.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-card.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

cart-template.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

cart-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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.

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

featured-product.liquid dosyasının güncelleştirilmiş sürümü

  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.

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

featured-product.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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.

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-template.liquid dosyasının güncelleştirilmiş sürümü

  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.

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

product-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid dosyasının şu şekilde görünmesi gerekir:

customers/order.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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.

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

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

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

Düzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

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

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

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

    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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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 sonraki sürümler için Supply temasına eklenmiştir. Temanızı en son sürüme güncelleyemiyorsanız birim fiyat kişiselleştirmesini Supply'ın önceki sürümlerine 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üzenlemelerinizi yaptıktan sonra product-unit-price.liquid dosyasının şu şekilde görünmesi gerekir:

product-unit-price.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra featured-product.liquid dosyasının şu şekilde görünmesi gerekir:

featured-product.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-template.liquid dosyasının şu şekilde görünmesi gerekir:

product-template.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-grid-item.liquid dosyasının şu şekilde görünmesi gerekir:

product-grid-item.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-list-item.liquid dosyasının şu şekilde görünmesi gerekir:

product-list-item.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra search-result-grid.liquid dosyasının şu şekilde görünmesi gerekir:

search-result-grid.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra cart.liquid dosyasının şu şekilde görünmesi gerekir:

cart.liquid file dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid dosyasının şu şekilde görünmesi gerekir:

customers/order.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.liquid dosyasının şu şekilde görünmesi gerekir:

theme.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid dosyasının şu şekilde görünmesi gerekir:

theme.scss.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

theme.js.liquid dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:

en.default.json dosyasının güncelleştirilmiş sürümü

  1. Değişikliklerinizi onaylamak 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öneticinizde, 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 -%}

Sipariş onayı bildiriminin E-posta gövde metni (HTML) penceresinde uygun konumda vurgulanan birim fiyatı kod parçacığı.

 5. Kaydet'e tıklayın.

Aradığınız cevapları bulamıyor musunuz? Yardımcı olmak için buradayız.