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.
Bu sayfada
Ürününüze birim fiyatlar ekleme
Shopify yöneticinizden Ürünler'e gidin.
Değiştirmek istediğiniz ürünün adına tıklayın.
Güncellemek istediğiniz varyasyona tıklayın.
Fiyatlandırma bölümünde Bu ürün için birim fiyat göster'i seçin.
Ürünün toplam ölçüsü alanına, ürününüzün sahip olduğu birim sayısını girin.
Varyasyonun ölçü birimini seçmek için Birim seç açılır menüsünü kullanın. Görüntüleyebileceğiniz birim türü, sattığınız ürünün türüne bağlı olarak farklılık gösterir. Örneğin, ürün 2 litre sabun ise litre seçeneğini belirleyin.
Birim fiyatı alanına ürünün birim başına fiyatını girin.
İsteğe bağlı: Temel birim için bir sayı girin. Örneğin, 1 kg ağırlığındaki bir ürün için temel birimi 100 g olarak belirleyebilirsiniz.
Kaydet'e tıklayın.
Shopify uygulamasından Ürünler > Tüm ürünler'e gidin.
Tüm ürünler ekranından bir ürüne dokunun.
Güncellemek istediğiniz varyasyona dokunun.
Fiyatlandırma bölümünde Bu ürün için birim fiyat göster'i seçin.
Ürünün toplam ölçüsü alanına, ürününüzün sahip olduğu birim sayısını girin.
Varyasyonun ölçü birimini seçmek için Birim seç açılır menüsünü kullanın. Görüntüleyebileceğiniz birim türü, sattığınız ürünün türüne bağlı olarak farklılık gösterir. Örneğin, ürün 2 litre sabun ise litre seçeneğini belirleyin.
Birim fiyatı alanına ürünün birim başına fiyatını girin.
İsteğe bağlı: Bir temel birim seçin. Örneğin, 1 kg ağırlığındaki bir ürün için temel birimi 100 g olarak belirleyebilirsiniz.
Kaydet'e dokunun.
Shopify uygulamasından Ürünler > Tüm ürünler'e gidin.
Tüm ürünler ekranından bir ürüne dokunun.
Güncellemek istediğiniz varyasyona dokunun.
Fiyatlandırma bölümünde Bu ürün için birim fiyat göster'i seçin.
Ürünün toplam ölçüsü alanına, ürününüzün sahip olduğu birim sayısını girin.
Varyasyonun ölçü birimini seçmek için Birim seç açılır menüsünü kullanın. Görüntüleyebileceğiniz birim türü, sattığınız ürünün türüne bağlı olarak farklılık gösterir. Örneğin, ürün 2 litre sabun ise litre seçeneğini belirleyin.
Birim fiyatı alanına ürünün birim başına fiyatını girin.
İsteğe bağlı: Bir temel birim seçin. Örneğin, 1 kg ağırlığındaki bir ürün için temel birimi 100 g olarak belirleyebilirsiniz.
Kaydet'e dokunun.
Online mağazanızda 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 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
Parçacıklar dizininde
product-price.liquid
dosyasına tıklayın.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>
- Kodu aşağıdaki parçacıkla değiştirin:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
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>
- 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 }} </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 %}
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sepet sayfanızı düzenleme
Bölümler dizininde
cart-template.liquid
dosyasına tıklayın.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 -%}
- 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 }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</dd>
{%- endif -%}
</dl>
Düzenlemelerinizden sonra cart-template.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Koleksiyon sayfanızı düzenleme
Bölümler dizininde
collection.liquid
dosyasına tıklayın.grid-view-item__title
ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
{% include 'product-price' %}
- Kodu aşağıdaki parçacıkla değiştirin:
{% include 'product-price', variant: nil %}
Düzenlemelerinizden sonra collection.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün kartı kılavuzunuzu düzenleme
Parçacıklar dizininde
product-card-grid.liquid
dosyasına tıklayın.grid-view-item__title
ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
{% include 'product-price', variant: product %}
- Kodu aşağıdaki parçacıkla değiştirin:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Düzenlemelerinizden sonra product-card-grid.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün kartı listenizi düzenleme
Parçacıklar dizininde
product-card-list.liquid
dosyasına tıklayın.{% if product.available %}
ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
{% include 'product-price', variant: product %}
- Kodu aşağıdaki parçacıkla değiştirin:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Düzenlemelerinizden sonra product-card-list.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sipariş sayfanızı düzenleyin
Şablonlar dizininde
customers/order.liquid
dosyasına tıklayın.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 -%}
- 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 }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</dd>
{%- endif -%}
</dl>
Düzenlemelerinizden sonra customers/order.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Tema stillerinizi düzenleme
Öğeler dizininde
theme.scss.liquid
dosyasına tıklayın..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%);
}
- 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
.price__unit {
@include flex-basis(100%);
display: none;
.price--unit-available & {
display: block;
}
}
.price-unit-price {
color: $color-body-text;
font-size: 0.8em;
}
Düzenlemelerinizden sonra theme.scss.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
JavaScript tema kodunuzu düzenleme
Öğeler dizininde
theme.js
dosyasına tıklayın.Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
salePrice: '[data-sale-price]'
- 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
productOnSale: 'price--on-sale',
- 4. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
productUnitAvailable: 'price--unit-available',
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- Kodu aşağıdaki parçacıkla değiştirin:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
var salePrice = '';
- 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);
}
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
.replace('[$]', salePrice)
- 10. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
_updatePrice: function(evt) {
- 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;
},
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- 14. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
.removeClass(this.classes.productOnSale)
- 16. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
.removeClass(this.classes.productUnitAvailable)
- 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)
);
}
- 18. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
// Unit price
if (variant.unit_price_measurement) {
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
);
$unitPriceBaseUnit.html(this._getBaseUnit(variant));
$priceContainer.addClass(this.classes.productUnitAvailable);
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
İngilizce çevirilerinizi düzenleme
Yerel ayarlar dizininde
en.default.json
dosyasına tıklayın.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"
- 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
"unit_price_separator": "per",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
"include_taxes": "Tax included.",
- 4. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
"unit_price_label": "Unit price",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Tema düzeninizi düzenleme
Düzen dizininde
theme.liquid
dosyasına tıklayın.Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
regularPrice: {{ 'products.product.regular_price' | t | json }},
- 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Düzenlemelerinizden sonra theme.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
(İsteğe bağlı) Diğer diller için çevirileri ekleme
Shopify yöneticinizdeki Temalar sayfasına gidin.
... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.
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.
Arama alanına
Unit Price
değerini girin.Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.
Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.
Kaydet'e tıklayın.
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
Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
Ad alanına
product-price
değerini girin.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"> {{ 'general.accessibility.unit_price_separator' | t }} </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>
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Öne çıkan ürün sayfasını düzenleme
Bölümler dizininde
featured-product.liquid
dosyasına tıklayın.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>
- Kodu aşağıdaki parçacıkla değiştirin:
{% include 'product-price', variant: current_variant %}
Düzenlemelerinizden sonra featured-product.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün sayfanızı düzenleme
Bölümler dizininde
product-template.liquid
dosyasına tıklayın.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>
- Kodu aşağıdaki parçacıkla değiştirin:
{% include 'product-price', variant: current_variant %}
Düzenlemelerinizden sonra product-template.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ajax sepetinizi düzenleme
Parçacıklar dizininde
ajax-cart-template.liquid
dosyasına tıklayın.<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}}
- 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"> {{'general.accessibility.unit_price_separator' | t}} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Düzenlemelerinizden sonra ajax-cart-template.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün kılavuz öğenizi düzenleme
Parçacıklar dizininde
product-grid-template.liquid
dosyasına tıklayın.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.' -%}
- 2. adımdaki koddan önce aşağıdaki parçacığı ekleyin:
{%- assign variant = product.selected_or_first_available_variant -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
{{ 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>
-
</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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sepet sayfanızı düzenleme
Şablonlar dizininde
cart.liquid
dosyasına tıklayın.<span class="cart__price">
ifadesini arayarak aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
{%- if item.original_line_price != item.final_line_price -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<del class="cart__price">{{ item.original_line_price | money }}</del>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount cart__price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart__price">{{ item.original_line_price | money }}</span>
{%- endif -%}
Not: Tema sürümünüz daha eskiyse bu parçacığı bulamayabilirsiniz. Bu durumda, 3. adımdaki kodu doğrudan
<span class="cart__price">
öğesinin altına ekleyin.
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Düzenlemelerinizden sonra cart.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sipariş sayfanızı düzenleyin
Şablonlar dizininde
customers/order.liquid
dosyasına tıklayın.{{ 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>
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Düzenlemelerinizden sonra customers/order.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Tema stillerinizi düzenleme - Bölüm 1
Öğeler dizininde
theme.scss.liquid
dosyasına tıklayın..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;
}
- 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
.cart__unit-price {
display: block;
}
Düzenlemelerinizden sonra theme.scss.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Tema stillerinizi düzenleme - Bölüm 2
Öğeler dizininde
timber.scss.liquid
dosyasına tıklayın..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;
}
- 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
.product-single__unit {
display: none;
.price-container--unit-available & {
display: block;
}
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Dosyanın sonuna gidin ve aşağıdaki kodu ekleyin:
.product-unit-price {
color: $colorTextBody;
display: block;
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
JavaScript tema kodunuzu düzenleme
Öğeler dizininde
theme.js.liquid
dosyasına tıklayın.Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
var prodImg;
- 2. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
var unitPrice = null;
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
// Create item's data object and add to 'items' array
- 4. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
if (cartItem.unit_price_measurement) {
unitPrice = {
addRefererenceValue:
cartItem.unit_price_measurement.reference_value !== 1,
price: theme.Currency.formatMoney(
cartItem.unit_price,
settings.moneyFormat
),
reference_value: cartItem.unit_price_measurement.reference_value,
reference_unit: cartItem.unit_price_measurement.reference_unit
};
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
vendor: cartItem.vendor
- 6. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
unitPrice: unitPrice,
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
productPrice: '#ProductPrice',
- 8. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
$(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'
);
- Kodu aşağıdaki parçacıkla değiştirin:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
$(this.selectors.SKU).html(variant.sku);
- 12. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
if (variant.unit_price_measurement) {
var $unitPrice = $(this.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
this.$container
);
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, moneyFormat)
);
$unitPriceBaseUnit.html(this.getBaseUnit(variant));
$(this.selectors.priceContainer, this.$container).addClass(
'price-container--unit-available'
);
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
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();
}
- 14. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
İngilizce çevirilerinizi düzenleme
Yerel ayarlar dizininde
en.default.json
dosyasına tıklayın.Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
"refresh_page": "choosing a selection results in a full page refresh"
- 2. adımdaki kodun üzerine aşağıdaki parçacığı ekleyin:
"unit_price_separator": "per",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Aşağıdaki kodu bulmak için bul klavye kısayolunu kullanın:
"include_taxes": "Tax included.",
- 4. adımdaki koddan sonra aşağıdaki parçacığı ekleyin:
"unit_price": "Unit price",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
(İsteğe bağlı) Diğer diller için çevirileri ekleme
Shopify yöneticinizdeki Temalar sayfasına gidin.
... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.
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.
Arama alanına
Unit Price
değerini girin.Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.
Ürünler / Genel bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.
Kaydet'e tıklayın.
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
Parçacıklar klasörünü bulup genişletin.
Yeni bir parçacık ekle'yi seçin.
product-unit-price
adını girin.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>
Kaydet'e tıklayın.
product-grid-item.liquid
dosyasını bulup düzenleyin.Şu satırı:
{% capture price %}{{ featured.price | money }}{% endcapture %}
Şu satırla:
{%- assign price = featured.price | money -%}
-
{{ price }}
kodunu bulup aşağıya eklemek için bul klavye kısayolunu kullanın:
{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant, wrapper_class: 'grid-link__unit-price' %}
{%- endif -%}
Düzenlemelerinizden sonra product-grid-item.liquid
dosyası şu şekilde görünmelidir:
Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Dosyayı bulup düzenleme
search-result.liquid
{% 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 -%}
- Ş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>
- Önceki adımda listelenen iki kod parçacığının her birinin altına kod blokunu ekleyin:
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
Düzenlemelerinizden sonra search-result.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Stillerinizi güncelleme
Öğeler klasörünü bulup genişletin.
theme.scss.liquid
dosyasını düzenleyin.Şu kod öbeğini bulmak için bul klavye kısayolunu kullanın:
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
font-family: $headerFontStack;
- 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);
}
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
.grid-link__unit-price {
font-size: 1em;
}
- 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;
}
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
.order-discount--price {
margin-bottom: 0;
}
- Aşağıdaki kod parçacığını bulmak için bul klavye kısayolunu kullanın:
.cart__product-title {
display: inline-block;
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
font-weight: $bodyFontWeightBold;
Düzenlemelerinizden sonra theme.scss.liquid
dosyası şu şekilde görünmelidir:
Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
timber.scss.liquid
dosyasını bulup düzenleyin.Şu kodu bulmak için bul klavye kısayolunu kullanın:
.quantity-selector {
display: inline-block;
}
}
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
.product-single__title {
font-weight: $bodyFontWeightBold;
}
- Şu kodu dosyanın sonuna ekleyin:
.product-unit-price {
color: rgba($colorTextBody, 0.6);
display: block;
font-family: $headerFontStack;
font-size: em(12px);
}
Düzenlemelerinizden sonra timber.scss.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Şablonlarınızı güncelleme
Şablonlar klasörünü bulup genişletin.
customers/order.liquid
dosyasını bulup düzenleyin.Kodu bulmak için bul klavye kısayolunu kullanın:
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- 3. adımdaki kodun altına şu kodu ekleyin:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Düzenlemelerinizden sonra customers/order.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
JavaScript'inizi güncelleme
Öğeler alanında
theme.js
dosyasını bulun ve düzenleyin..shopify-payment-button
kodunu içeren satırı bulmak için bul klavye kısayolunu kullanın ve bu kodu şununla değiştirin:
$shopifyPaymentButton: $('.shopify-payment-button', this.$container),
$unitPrice: $('[data-unit-price]', this.$container),
$unitPriceBaseUnit: $('[data-unit-price-base-unit]', this.$container),
$unitPriceContainer: $('[data-unit-price-container]', this.$container)
Bu kod öbeği şu şekilde görünmelidir:
- Şu kodu arayın:
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}
- Altına şu kodu ekleyin:
// Unit price
this.selectors.$unitPriceContainer.addClass('hide');
if (variant.unit_price) {
this.selectors.$unitPrice.html(
Shopify.formatMoney(variant.unit_price, theme.moneyFormat)
);
this.selectors.$unitPriceBaseUnit.html(this.getBaseUnit(variant));
this.selectors.$unitPriceContainer.removeClass('hide');
}
Sonuç şu şekilde görünmelidir:
- Şu kodu bulmak için bul klavye kısayolunu kullanın:
.attr('data-zoom')
});
});
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
},
getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
Sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sepet şablonunuzu güncelleme
Bölümler klasörünü bulup genişletin.
cart-template.liquid
dosyasını düzenleyin.<span class="order-discount h5">{{ item.final_price | money }}</span>
kodunu bulmak için bul klavye kısayolunu kullanın.Satırı şu kodla değiştirin:
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
-
{%- if item.line_level_discount_allocations != blank -%}
kodunun ilk geçtiği yeri bulun:
{%- if item.line_level_discount_allocations != blank -%}
<ul class="order-discount order-discount--list order-discount--title order-discount--cart medium-down--hide" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="order-discount__item">
<span class="icon icon-saletag" aria-hidden="true"></span>{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})
</li>
{%- endfor -%}
</ul>
{%- endif -%}
- 5. adımdaki kodun üzerine şu kodu öbeğini ekleyin:
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}
Düzenlemelerinizden sonra cart-template.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Öne çıkan ürününüzü güncelleme
Bölümler klasörünü bulup genişletin.
featured-product.liquid
dosyasını düzenleyin.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>
-
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 %}
- Önceki adımda bulduğunuz kod parçacığına aşağıdaki kod blokunu ekleyin:
{% include 'product-unit-price', variant: variant, available: true %}
Düzenlemelerinizden sonra featured-product.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün şablonunuzu güncelleme
Bölümler klasörünü bulup genişletin.
product-template.liquid
dosyasını düzenleyin.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>
- 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 %}
- Aşağıdaki satırı ekleyin:
{% include 'product-unit-price', variant: variant, available: true %}
Düzenlemelerinizden sonra product-template.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Yerel ayarları güncelleme
Yerel ayarlar klasörünü bulup genişletin.
en.default.json
dosyasını açın ve düzenleyin.refresh_page
kodunu içeren satırı bulmak için bul klavye kısayolunu kullanın ve bu kodu şununla değiştirin:
"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"
Sonuç şu şekilde görünmelidir:
-
full_details
içeren satırı bulun ve şununla değiştirin:
"full_details": "Full details",
"unit_price_label": "Unit price"
Sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
(İsteğe bağlı) Diğer diller için çevirileri ekleme
Shopify yöneticinizdeki Temalar sayfasına gidin.
... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.
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.
Arama alanına
Unit Price
değerini girin.Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.
Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.
Kaydet'e tıklayın.
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
Yerel ayarlar dizininde
en.default.json
seçeneğine tıklayın.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"
- 2. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:
"unit_price_separator": "per",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
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."
- 4. adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:
"unit_price_label": "Unit price",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Temanızın stil sayfasını düzenleme
Assets (Öğeler) dizininde
theme.scss.liquid
seçeneğine tıklayın..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);
}
- 2. adımda bulunan kod blokundaki kapatma
}
etiketinin altına aşağıdaki kodu ekleyin:
.product-unit-price {
font-size: em(12);
color: $color-body-text;
}
.product-card__unit-price {
display: block;
}
Düzenlemelerinizden sonra theme.scss.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün birim fiyatı parçacığını ekleme
Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
product-unit-price
adını girin.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>
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün kartı parçacığınızı düzenleme
Parçacıklar dizininde
product-card.liquid
seçeneğine tıklayın.<a href="{{ product.url | within: collection }}"
satırını bulmak için bul klavye kısayolunu kullanın.-
- adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
<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>
- 5. adımda bulunan kapatma
</div>
etiketinin üzerine aşağıdaki kodu ekleyin:
{%- unless product.price_varies -%}
{%- if current_variant.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: current_variant, wrapper_class: "product-card__unit-price" %}
{%- endif -%}
{%- endunless -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sepet sayfası şablonunuzu düzenleme
Bölümler dizininde
cart-template.liquid
öğesine tıklayın.<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 -%}
- 2. adımda bulunan
endif
etiketinin altına aşağıdaki kodu ekleyin:
{%- if item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: item %}
{%- endif -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
<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}}
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Öne çıkan ürün sayfası şablonunuzu düzenleme
Bölümler dizininde
featured-product.liquid
öğesine tıklayın.{% assign current_variant = product.selected_or_first_available_variant %}
satırını bulmak için bul klavye kısayolunu kullanın.-
- adımda bulunan satırın altına aşağıdaki kodu ekleyin:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
<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 %}
Bu
ul
etiketinin altında,{% if section.settings.stock_enable %}
kodunu bulun.-
- adımda bulunan
if
bloğunun üzerine aşağıdaki kodu ekleyin:
- adımda bulunan
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün sayfası şablonunuzu düzenleme
Bölümler dizininde
product-template.liquid
öğesine tıklayın.{% assign current_variant = product.selected_or_first_available_variant %}
satırını bulmak için bul klavye kısayolunu kullanın.-
- adımda bulunan satırın altına aşağıdaki kodu ekleyin:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
<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 %}
Bu
ul
etiketinin altında,{% if section.settings.stock_enable %}
kodunu bulun.-
- adımda bulunan
if
bloğunun üzerine aşağıdaki kodu ekleyin:
- adımda bulunan
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Müşterilerinizin sipariş şablonunu düzenleme
Şablonlar dizininde
customers/order.liquid
seçeneğine tıklayın.<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>
- 2. adımda bulunan kodu, aşağıdaki kodla değiştirin:
<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
<div>
{%- if line_item.original_price != line_item.final_price -%}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<del>{{ line_item.original_price | money }}</del>
<span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="order-discount">{{ line_item.final_price | money }}</span>
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
</div>
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: line_item %}
{%- endif -%}
</td>
Düzenlemelerinizden sonra customers/order.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Temanızın JavaScript dosyasını düzenleme
Assets (Öğeler) dizininde
theme.js
seçeneğine tıklayın.// Create item's data object and add to 'items' array
satırını bulmak için bul klavye kısayolunu kullanın.-
- adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:
var unitPrice = null;
if (cartItem.unit_price_measurement) {
unitPrice = {
addRefererenceValue:
cartItem.unit_price_measurement.reference_value !== 1,
price: theme.Currency.formatMoney(
cartItem.unit_price,
theme.moneyFormat
),
reference_value: cartItem.unit_price_measurement.reference_value,
reference_unit: cartItem.unit_price_measurement.reference_unit
};
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
Şu satırı bulmak için bul klavye kısayolunu kullanın:
vendor: cartItem.vendor,
-
- adımda bulunan satırın altına aşağıdaki kodu ekleyin:
unitPrice: unitPrice,
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
shopifyPaymentButton: '.shopify-payment-button'
satırını bulmak için bul klavye kısayolunu kullanın.-
- adımda bulunan satırı, aşağıdaki kodla değiştirin:
shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
_updateSKU: function(evt) {
satırını bulmak için bul klavye kısayolunu kullanın.-
- adımda bulunan satırın üzerine aşağıdaki kodu ekleyin:
_getBaseUnit: function(variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
},
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
-
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);
}
- 10. adımda bulunan kapatma
}
etiketinin altına aşağıdaki kodu ekleyin:
$(this.selectors.unitPriceContainer, this.$container).addClass('hide');
if (variant.unit_price_measurement) {
var $unitPrice = $(this.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
this.$container
);
$unitPrice.html(
theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
);
$unitPriceBaseUnit.html(this._getBaseUnit(variant));
$(this.selectors.unitPriceContainer, this.$container).removeClass(
'hide'
);
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
(İsteğe bağlı) Diğer diller için çevirileri ekleme
Shopify yöneticinizdeki Temalar sayfasına gidin.
... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.
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.
Arama alanına
Unit Price
değerini girin.Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.
Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.
Kaydet'e tıklayın.
Supply için adımlar
Birim fiyatları, 8.3.0 ve üzeri sürümler için Supply temasına eklendi. Temanızı en son sürüme güncelleyemezseniz Supply'ın önceki sürümlerine birim fiyat özelleştirmesi uygulamak için bu adımları takip edin.
Ürün birim fiyatı parçacığını ekleme
Parçacıklar klasörünü bulup genişletin.
Yeni bir parçacık ekle'yi seçin.
product-unit-price
adını girin.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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>
Düzenlemelerinizden sonra product-unit-price.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Öne çıkan ürün şablonunuzu düzenleme
Bölümler klasörünü bulup genişletin ve
featured-product.liquid
dosyasını seçin.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>
- 2. adımdaki parçacığın kapatma
</span>
etiketinin altına aşağıdaki kodu ekleyin:
{% include 'product-unit-price' variant: variant %}
Düzenlemelerinizden sonra featured-product.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün şablonunuzu düzenleme
Bölümler klasörünü bulup genişletin ve
product-template.liquid
dosyasını seçin.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>
- 2. adımdaki kapatma
</span>
etiketinin altına aşağıdaki kodu ekleyin:
{% include 'product-unit-price', variant: variant %}
Düzenlemelerinizden sonra product-template.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün kılavuz öğesi parçacığınızı düzenleme
Parçacıklar klasörünü bulup genişletin ve
product-grid-item.liquid
dosyasını seçin.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>
- Kodu aşağıdaki parçacıkla değiştirin:
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</div>
{% endif %}
Düzenlemelerinizden sonra product-grid-item.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Ürün liste öğesi parçacığınızı düzenleme
Parçacıklar klasörünü bulup genişletin ve
product-list-item.liquid
dosyasını seçin.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>
- Kodu aşağıdaki parçacıkla değiştirin:
<div class="text-center">
<div class="product-item--price">
<p class="h1 medium-down--left">
{% if on_sale %}
<span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
{% else %}
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% endif %}
{% include 'price' with product.price %}
{% if on_sale and section.settings.product_show_compare_at_price %}
<small>
<s>
<span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
{% include 'price' with product.compare_at_price %}
</s>
</small>
{% endif %}
</p>
{%- if product.selected_or_first_available_variant.available and product.selected_or_first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: product.selected_or_first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}
</div>
Düzenlemelerinizden sonra product-list-item.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Arama sonucu ızgara parçacığını düzenleme
Parçacıklar klasörünü bulup genişletin ve
search-result-grid.liquid
dosyasını seçin.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>
- Kodu aşağıdaki parçacıkla değiştirin:
{%- if item.first_available_variant.available and item.first_available_variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item.first_available_variant %}
{%- endif -%}
</div>
{% if on_sale and section.settings.product_show_saved_amount %}
<div class="sale-tag medium--right">
{% assign compare_price = item.compare_at_price %}
{% assign product_price = item.price %}
{% include 'price-sale' %}
</div>
{% endif %}
Düzenlemelerinizden sonra search-result-grid.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sepet şablonunuzu düzenleme
Şablonlar klasörünü bulup genişletin ve
cart.liquid
dosyasını seçin.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 -%}
- Kodu aşağıdaki parçacıkla değiştirin:
<small><s class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</s></small>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
<span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
<span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price' variant: item, available: item.variant.available %}
{%- endif -%}
Düzenlemelerinizden sonra cart.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Sipariş şablonunuzu düzenleme
Şablonlar klasörünü bulup genişletin ve
customers/order.liquid
dosyasını seçin.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>
- 2. adımdaki kapatma
</td>
etiketinin üzerine aşağıdaki kodu ekleyin:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Düzenlemelerinizden sonra customers/order.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Tema düzeninizi düzenleme
Düzen klasörünü bulup genişletin ve
theme.liquid
dosyasını seçin.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 }}
},
- 2. adımdaki
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
kodunun üzerine aşağıdaki kodu ekleyin:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Düzenlemelerinizden sonra theme.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Tema stillerinizi düzenleme
Bölümler klasörünü bulup genişletin ve
theme.scss.liquid
dosyasını seçin.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;
}
}
- Kodu aşağıdaki parçacıkla değiştirin:
.product-item--price {
@include clearfix;
margin-bottom: $gutter/2;
.h1 {
margin-bottom: 0;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
.product-price-unit {
display: none;
font-size: em(12px);
margin-right: 10px;
.cart-pricing &,
.order-table & {
margin-right: 0;
}
&.product-price-unit--available {
display: block;
}
}
Düzenlemelerinizden sonra theme.scss.liquid
dosyası şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
JavaScript tema kodunuzu düzenleme
Öğeler klasörünü bulup genişletin ve
theme.js.liquid
dosyasını seçin.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'
}
- 2. adımdaki
originalSelectorId: 'productSelect-' + sectionId,
kodunun üzerine aşağıdaki kodu ekleyin:
unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- 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');
}
- 2. adımdaki
if (variant) {
kodunun altına aşağıdaki kodu ekleyin:
// Update unit price, if one is set
var $unitPriceContainer = $(this.settings.selectors.unitPriceContainer, this.$container);
$unitPriceContainer.removeClass('product-price-unit--available');
if (variant.unit_price_measurement) {
var $unitPrice = $(this.settings.selectors.unitPrice, this.$container);
var $unitPriceBaseUnit = $(this.settings.selectors.unitPriceBaseUnit, this.$container);
$unitPrice.text(Shopify.formatMoney(variant.unit_price, moneyFormat));
$unitPriceBaseUnit.text(this.getBaseUnit(variant));
$unitPriceContainer.addClass('product-price-unit--available');
}
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- 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>';
-
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
satırını aşağıdaki parçacıkla değiştirin:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- 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();
}
- 11. adımdaki parçacığın altına aşağıdaki kodu ekleyin:
},
getBaseUnit: function (variant) {
return variant.unit_price_measurement.reference_value === 1
? variant.unit_price_measurement.reference_unit
: variant.unit_price_measurement.reference_value +
variant.unit_price_measurement.reference_unit;
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
Temanızın dil dosyasını düzenleme
Yerel ayarlar klasörünü bulup genişletin ve
en.default.json
dosyasını seçin.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"
},
- 2. adımdaki
"refresh_page"
kodunun üzerine aşağıdaki kodu ekleyin:
"unit_price_separator": "per",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- 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"
}
- 5. adımdaki
"will_be_in_stock_after"
kodundan sonra aşağıdaki kodu ekleyin:
"unit_price_label": "Unit price",
Düzenlemelerinizden sonra sonuç şu şekilde görünmelidir:
- Değişikliklerinizi doğrulamak için Kaydet'e tıklayın.
(İsteğe bağlı) Diğer diller için çevirileri ekleme
Shopify yöneticinizdeki Temalar sayfasına gidin.
... düğmesi > Varsayılan tema içeriğini düzenle'ye tıklayın.
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.
Giriş çubuğunu kullanarak
Unit Price
öğesini arayın.Genel / Erişilebilirlik bölümünün altındaki Birim fiyatı ayırıcısı alanını güncelleyin.
Ürünler / Ürün bölümünün altındaki Birim fiyat etiketi alanını güncelleyin.
Kaydet'e tıklayın.
Sipariş bildirimlerinizde birim fiyatlarını gösterme
Ürününüze birim fiyatları eklediyseniz ancak sipariş onayı bildirimlerinizde birim fiyatlarınız görünmüyorsa sipariş bildirimi şablonunuzu güncellemeniz gerekebilir.
Adımlar:
Shopify yöneticinizden Ayarlar > Bildirimler'e gidin.
Sipariş onayı'na tıklayın.
Şablona aşağıdaki parçacığı ekleyin:
{%- if line_item.unit_price_measurement -%}
{{ 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 }}
{%- endif -%}
- Kaydet'e tıklayın.