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
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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 onaylamak 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üzenlemelerinizi yaptıktan sonra cart-template.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra collection.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-card-grid.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-card-list.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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
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 onaylamak 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üzenlemelerinizi yaptıktan sonra featured-product.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-template.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra ajax-cart-template.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
{{ 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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: 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.
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üzenlemelerinizi yaptıktan sonra cart.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
$(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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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
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üzenlemelerinizi yaptıktan sonra product-grid-item.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra search-result.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra timber.scss.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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 )
Kod parçasının şu şekilde görünmesi gerekir:
Ş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 ' );
}
Sonucun şu şekilde görünmesi gerekir:
Ş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 ;
Sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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 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 -%}
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:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra featured-product.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-template.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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"
Sonucun şu şekilde görünmesi gerekir:
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:
Değişikliklerinizi onaylamak 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
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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 onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
<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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
<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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
<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:
{%- 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:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
<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:
{%- 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:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Ş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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
_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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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
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
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üzenlemelerinizi yaptıktan sonra product-unit-price.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra featured-product.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-template.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-grid-item.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra product-list-item.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra search-result-grid.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra cart.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra customers/order.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra theme.scss.liquid
dosyasının şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
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üzenlemelerinizi yaptıktan sonra sonucun şu şekilde görünmesi gerekir:
Değişikliklerinizi onaylamak 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.