Debut용 단계
단가는 12.1.0 이상 버전의 Debut 테마에서 사용할 수 있습니다. 테마를 최신 버전으로 업데이트할 수 없는 경우 이전 버전의 Debut 단가 사용자 지정을 추가할 수 있습니다.
제품 가격 코드 조각 편집
코드 조각 디렉토리에서 product-price.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 data-price
를 검색하여 다음 코드를 찾습니다.
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %} " data-price>
해당 코드를 다음 코드 조각으로 대체합니다.
<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>
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용해 price__sale
를 검색하여 다음 코드를 찾습니다.
<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>
닫는 </div>
태그 아래에 다음 코드를 추가합니다.
{% 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 %}
저장 을 클릭하여 변경 사항을 확인합니다.
카트 페이지 편집
섹션 디렉토리에서 cart-template.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 cart__price-wrapper
를 검색하여 다음 코드를 찾습니다.
{%- 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 -%}
해당 코드를 다음 코드 조각으로 대체합니다.
<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>
편집 후 cart-template.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
컬렉션 페이지 편집
섹션 디렉토리에서 collection.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 grid-view-item__title
를 검색하여 다음 코드를 찾습니다.
{% include 'product-price' %}
해당 코드를 다음 코드 조각으로 대체합니다.
{% include 'product-price' , variant : nil %}
편집 후 collection.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 카드 그리드 편집
코드 조각 디렉토리에서 product-card-grid.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 grid-view-item__title
를 검색하여 다음 코드를 찾습니다.
{% include 'product-price' , variant : product %}
해당 코드를 다음 코드 조각으로 대체합니다.
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
편집 후 product-card-grid.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 카드 목록 편집
코드 조각 디렉토리에서 product-card-list.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 {% if product.available %}
를 검색하여 다음 코드를 찾습니다
{% include 'product-price' , variant : product %}
해당 코드를 다음 코드 조각으로 대체합니다.
{% include 'product-price' , variant : product . selected_or_first_available_variant %}
편집 후 product-card-list.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
주문 페이지 편집
템플릿 디렉토리에서 customers/order.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 data-label="{{ 'customer.order.price' | t }}"
를 검색하여 다음 코드를 찾습니다
{%- 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 -%}
해당 코드를 다음 코드 조각으로 대체합니다.
<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>
편집 후 customers/order.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 스타일 편집
자산 디렉토리에서 theme.scss.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 .price__vendor {
를 검색하여 다음 코드를 찾습니다.
.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단계의 코드 아래에 다음 코드 조각을 추가합니다.
.price__unit {
@include flex-basis(100%);
display : none ;
.price--unit-available & {
display : block ;
}
}
.price-unit-price {
color : $ color-body-text ;
font-size : 0.8em ;
}
편집 후 theme.scss.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
Javascript 테마 코드 편집
자산 디렉토리에서 theme.js
파일을 클릭합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
salePrice : ' [data-sale-price] '
2단계의 코드 위에 다음 코드 조각을 추가합니다.
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
productOnSale : ' price--on-sale ' ,
4단계 코드 뒤에 다음 스니펫을 추가합니다.
productUnitAvailable : ' price--unit-available ' ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$] ' ;
해당 코드를 다음 코드 조각으로 대체합니다.
var liveRegionText = ' [Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$] ' ;
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
var salePrice = '' ;
8단계의 코드 아래에 다음 코드 조각을 추가합니다.
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 );
}
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
. replace ( ' [$] ' , salePrice )
10단계 코드 아래에 다음 스니펫을 추가합니다.
. replace ( ' [UnitPrice] ' , unitLabel )
. replace ( ' [$$$] ' , unitPrice )
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
_updatePrice : function ( evt ) {
12단계 코드 앞에 다음 스니펫을 추가합니다.
_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 ;
},
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
var $salePrice = $ ( this . selectors . salePrice , $priceContainer );
14단계 코드 아래에 다음 스니펫을 추가합니다.
var $unitPrice = $ ( this . selectors . unitPrice , $priceContainer );
var $unitPriceBaseUnit = $ (
this . selectors . unitPriceBaseUnit ,
$priceContainer
);
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
. removeClass ( this . classes . productOnSale )
16단계 코드 아래에 다음 스니펫을 추가합니다.
. removeClass ( this . classes . productUnitAvailable )
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
else {
// Regular price
$regularPrice . html (
theme . Currency . formatMoney ( variant . price , theme . moneyFormat )
);
}
18단계 코드 아래에 다음 스니펫을 추가합니다.
// 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 );
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
영어 번역 편집하기
로케일 디렉토리에서 en.default.json
파일을 클릭합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
"selection_help" : "press the space key then arrow keys to make a selection"
2단계의 코드 위에 다음 코드 조각을 추가합니다.
"unit_price_separator" : "per" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
"include_taxes" : "Tax included." ,
4단계의 코드 아래에 다음 코드 조각을 추가합니다.
"unit_price_label" : "Unit price" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 레이아웃 편집
레이아웃 디렉토리에서 theme.liquid
파일을 클릭합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
regularPrice: {{ 'products.product.regular_price' | t | json }} ,
2단계의 코드 아래에 다음 코드 조각을 추가합니다.
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
편집 후 theme.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
(선택 사항) 다른 언어에 대한 번역 추가
Shopify Admin에서 테마 페이지로 이동합니다.
... 버튼 > 기본 테마 콘텐츠 편집 을 클릭합니다.
테마 언어 변경 을 클릭하고 편집할 언어를 선택합니다. 이 작업은 게시된 테마에서만 가능합니다.
검색 필드에 Unit Price
를 입력합니다.
일반/접근성 아래의 단위 가격 구분 기호 필드를 업데이트합니다.
제품 아래의 단위 가격 레이블 필드를 업데이트합니다.
저장 을 클릭합니다.
Brooklyn용 단계
단가는 13.1.0 이상 버전의 Brooklyn 테마에서 사용할 수 있습니다. 테마를 최신 버전으로 업데이트할 수 없는 경우 Brooklyn 테마의 이전 버전에 단가 사용자 지정을 추가할 수 있습니다.
제품 가격 조각 추가
코드 조각 디렉토리에서 새 코드 조각 추가 를 클릭합니다.
이름 필드에 product-price
를 입력합니다.
다음 코드를 복사하여 파일에 붙여넣습니다.
<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>
저장 을 클릭하여 변경 사항을 확인합니다.
추천 제품 페이지 편집
섹션 디렉토리에서 featured-product.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 itemprop="offers"
를 검색하여 다음 코드를 찾습니다.
<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>
해당 코드를 다음 코드 조각으로 대체합니다.
{% include 'product-price' , variant : current_variant %}
편집 후 featured-product.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 페이지 편집
섹션 디렉토리에서 product-template.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 itemprop="offers"
를 검색하여 다음 코드를 찾습니다.
<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>
해당 코드를 다음 코드 조각으로 대체합니다.
{% include 'product-price' , variant : current_variant %}
편집 후 product-template.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
Ajax 카트 편집
코드 조각 디렉토리에서 ajax-cart-template.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 <span class="ajaxcart__price">{{{price}}}</span>
를 검색하여 다음 코드를 찾습니다
{{ #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단계에서 {{/if}}
아래에 다음 코드를 추가합니다.
{{ #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}}
편집 후 ajax-cart-template.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 그리드 항목 편집
코드 조각 디렉토리에서 product-grid-template.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 capture img_id_class
를 검색하여 다음 코드를 찾습니다.
{% 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단계의 코드 앞에 다음 스니펫을 추가합니다.
{%- assign variant = product . selected_or_first_available_variant -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용해 {{ product.price | money_without_trailing_zeros }}
를 검색하여 다음 코드를 찾습니다
<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>
아래에 다음 코드를 추가합니다.
{%- 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 -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
카트 페이지 편집
템플릿 디렉토리에서 cart.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 <span class="cart__price">
를 검색하여 다음 코드를 찾습니다.
{%- 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 -%}
참고 사항
이전 테마 버전을 사용하는 경우 이 코드 조각을 찾지 못할 수 있습니다. 이 경우, 3단계의 코드를 <span class="cart__price">
요소 바로 아래에 추가합니다.
2단계의 코드 아래에 다음 코드 조각을 추가합니다.
{%- 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 -%}
편집 후 cart.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
주문 페이지 편집
템플릿 디렉토리에서 customers/order.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 {{ line_item.original_price | money }}
를 검색하여 다음 코드를 찾습니다
<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단계에서 </td>
전에 다음 코드 조각을 추가합니다.
{%- 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 -%}
편집 후 customers/order.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 스타일 편집 - 1부
자산 디렉토리에서 theme.scss.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 .ajaxcart__price {
를 검색하여 다음 코드를 찾습니다.
.ajaxcart__price {
font-size : em ( 13px );
display : block ;
}
2단계의 코드 아래에 다음 코드 조각을 추가합니다.
.cart__unit-price {
display : block ;
}
편집 후 theme.scss.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 스타일 편집 - 2부
자산 디렉토리에서 timber.scss.liquid
파일을 클릭합니다.
단축키 찾기 를 사용해 .product-single__policies {
를 검색하여 다음 코드를 찾습니다.
.product-single__policies {
margin : 15px 0 25px 0 ;
}
2단계의 코드 위에 다음 코드 조각을 추가합니다.
.product-single__unit {
display : none ;
.price-container--unit-available & {
display : block ;
}
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
파일 맨 끝으로 이동하여 다음 코드를 추가합니다.
.product-unit-price {
color : $ colorTextBody ;
display : block ;
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
JavaScript 테마 코드 편집
자산 디렉토리에서 theme.js.liquid
파일을 클릭합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
var prodImg ;
2단계의 코드 아래에 다음 코드 조각을 추가합니다.
var unitPrice = null ;
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
// Create item's data object and add to 'items' array
4단계의 코드 위에 다음 스니펫을 추가합니다.
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
};
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
vendor : cartItem . vendor
6단계의 코드 위에 다음 스니펫을 추가합니다.
unitPrice : unitPrice ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
productPrice : ' #ProductPrice ' ,
8단계의 코드 아래에 다음 코드 조각을 추가합니다.
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용해 $(this.selectors.priceContainer, this.$container).removeClass(
를 검색하여 다음 코드를 찾습니다.
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden '
);
해당 코드를 다음 코드 조각으로 대체합니다.
$ ( this . selectors . priceContainer , this . $container ). removeClass (
' visibility-hidden price-container--unit-available '
);
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
$ ( this . selectors . SKU ). html ( variant . sku );
12단계의 코드 위에 다음 스니펫을 추가합니다.
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 '
);
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용해 this.destroyImageCarousel();
를 검색하여 다음 코드를 찾습니다.
onUnload : function () {
this . $container . off ( this . settings . namespace );
this . destroyImageCarousel ();
}
14단계의 코드 위에 다음 스니펫을 추가합니다.
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 ;
},
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
영어 번역 편집
로케일 디렉토리에서 en.default.json
파일을 클릭합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
"refresh_page" : "choosing a selection results in a full page refresh"
2단계의 코드 위에 다음 코드 조각을 추가합니다.
"unit_price_separator" : "per" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
"include_taxes" : "Tax included." ,
4단계의 코드 아래에 다음 코드 조각을 추가합니다.
"unit_price" : "Unit price" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
(선택 사항) 다른 언어에 대한 번역 추가
Shopify Admin에서 테마 페이지로 이동합니다.
... 버튼 > 기본 테마 콘텐츠 편집 을 클릭합니다.
테마 언어 변경 을 클릭하고 편집할 언어를 선택합니다. 이 작업은 게시된 테마에서만 가능합니다.
검색 필드에 Unit Price
를 입력합니다.
일반/접근성 아래의 단위 가격 구분 기호 필드를 업데이트합니다.
제품/일반 아래의 단가 레이블 필드를 업데이트합니다.
저장 을 클릭합니다.
Minimal용 단계
단가는 11.2.0 이상 버전의 Minimal 테마에서 사용할 수 있습니다. 테마를 최신 버전으로 업데이트할 수 없는 경우 이전 버전의 Minimal 단가 사용자 지정을 추가할 수 있습니다.
코드 조각 업데이트
코드 조각 폴더를 찾아 확장합니다.
새 코드 조각 추가 를 선택합니다.
product-unit-price
를 이름에 입력합니다.
다음 코드를 복사하여 product-unit-price.liquid
에 붙여넣습니다.
{%- 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>
저장 을 클릭합니다.
product-grid-item.liquid
파일을 찾아서 편집합니다.
이 행으로 교체합니다.
{% capture price %}{{ featured . price | money }}{% endcapture %}
이 줄을 사용하여:
{%- assign price = featured . price | money -%}
단축키 찾기 를 사용하여 {{ price }}
를 찾은 다음 아래 코드를 추가합니다.
{%- 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 -%}
편집 후 product-grid-item.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
파일 찾기 및 편집 search-result.liquid
단축키 찾기 를 사용하여 {% if item.object_type == 'product' %}
를 찾은 다음, 아래 행에 다음 코드를 추가합니다.
{%- assign variant = item . selected_or_first_available_variant -%}
이제 단축키 찾기 를 사용하여 다음 두 가지 코드 조각을 찾습니다.
<s><small>{{ item . compare_at_price_max | money }} </small></s>
그리고
<span class="visually-hidden">{{ 'products.product.regular_price' | t }} </span>
<span itemprop="price">
{{ item . price | money }}
</span>
이전 단계에서 나열한 각각의 두 코드 조각 아래에 다음 코드 블록을 추가합니다.
{%- if variant . available and variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : variant %}
{%- endif -%}
편집 후 search-result.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
스타일 업데이트
자산 폴더를 찾아 확장합니다.
theme.scss.liquid
파일을 편집합니다.
단축키 찾기 를 사용하여 다음 코드 블록을 찾습니다.
.grid-link__title ,
.grid-link__meta {
position : relative ;
margin-bottom : 5px ;
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
font-family : $ headerFontStack ;
단축키 찾기 를 사용하여 다음 코드 조각을 찾습니다.
.grid-link__sale_price {
opacity : 0.95 ;
filter : alpha ( opacity = 95 );
}
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
.grid-link__unit-price {
font-size : 1em ;
}
단축키 찾기 를 사용하여 다음 코드 조각을 찾습니다.
.order-discount--list {
margin : 0.8em 0 0.6em 1.3em ;
list-style : none ;
padding : 0 ;
}
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
.order-discount--price {
margin-bottom : 0 ;
}
단축키 찾기 를 사용하여 다음 코드 조각을 찾습니다.
.cart__product-title {
display : inline-block ;
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
font-weight : $ bodyFontWeightBold ;
편집 후 theme.scss.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
timber.scss.liquid
파일을 찾아 편집합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
.quantity-selector {
display : inline-block ;
}
}
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
.product-single__title {
font-weight : $ bodyFontWeightBold ;
}
파일 끝에 이 코드를 삽입합니다.
.product-unit-price {
color : rgba ( $ colorTextBody , 0.6 );
display : block ;
font-family : $ headerFontStack ;
font-size : em ( 12px );
}
편집 후 timber.scss.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
템플릿 업데이트
템플릿 폴더를 찾아 확장합니다.
customers/order.liquid
파일을 찾아 편집합니다.
단축키 찾기 를 사용하여 코드를 찾습니다.
{%- else -%}
{{ line_item . original_price | money }}
{%- endif -%}
3단계의 코드 아래에 이 코드를 추가합니다.
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
편집 후 customers/order.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
자바 스크립트 업데이트
자산 에서 theme.js
를 찾아 편집합니다.
단축키 찾기 를 사용하여 .shopify-payment-button
이 포함된 줄을 찾아 다음으로 교체하십시오.
$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 )
코드 블록은 다음과 같아야 합니다.
다음 코드를 확인합니다.
else {
this . selectors . $comparePrice . addClass ( ' hide ' ). html ( '' );
this . selectors . $comparePriceA11y . attr ( ' aria-hidden ' , ' true ' );
}
코드 아래에 이 코드를 추가합니다.
// 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 ' );
}
결과는 다음과 같아야 합니다.
단축키 찾기 를 사용하여 다음 코드를 찾습니다.
. attr ( ' data-zoom ' )
});
});
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
},
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 ;
결과는 다음과 같아야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
카트 템플릿 업데이트
섹션 폴더를 찾아 확장합니다.
cart-template.liquid
파일을 편집합니다.
단축키 찾기 를 사용하여 <span class="order-discount h5">{{ item.final_price | money }}</span>
코드를 찾습니다.
이 코드로 다음 줄을 교체합니다.
<span class="order-discount order-discount--price h5">{{ item . final_price | money }} </span>
{%- if item.line_level_discount_allocations != blank -%}
코드의 첫 번째 항목을 찾습니다.
{%- 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단계 코드 위에 이 코드 블록을 추가합니다.
{%- if item . variant . available and item . variant . unit_price_measurement -%}
{% include 'product-unit-price' , variant : item , available : item . variant . available %}
{%- endif -%}
편집 후 cart-template.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
추천 제품 업데이트
섹션 폴더를 찾아 확장합니다.
featured-product.liquid
파일을 편집합니다.
단축키 찾기 를 사용하여 itemprop="name"
이 있는 줄을 찾아 다음으로 교체하십시오.
<h1 class="product-single__title" itemprop="name">{{ title }} </h1>
id="PriceA11y"
을(를) 포함하는 코드를 찾습니다.
{% 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 %}
이전 단계에서 찾은 코드 조각 아래에 다음 코드 블록을 삽입합니다.
{% include 'product-unit-price' , variant : variant , available : true %}
편집 후 featured-product.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 템플릿 업데이트
섹션 폴더를 찾아 확장합니다.
product-template.liquid
파일을 편집합니다.
단축키 찾기 를 사용하여 itemprop="name"
가 포함된 줄을 찾아 다음으로 교체하십시오.
<h1 class="product-single__title" itemprop="name">{{ product . title }} </h1>
단축키 찾기 를 사용하여 코드를 찾습니다.
{% 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 %}
아래에 이 줄을 추가합니다.
{% include 'product-unit-price' , variant : variant , available : true %}
편집 후 product-template.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
로케일 업데이트
로케일 폴더를 찾아 확장합니다.
en.default.json
파일을 열고 편집합니다.
단축키 찾기 를 사용하여 refresh_page
이 포함된 줄을 찾아 다음으로 교체하십시오.
"refresh_page" : "choosing a selection results in a full page refresh" ,
"unit_price_separator" : "per"
결과는 다음과 같아야 합니다.
full_details
가 포함된 줄을 찾은 다음으로 교체하십시오.
"full_details" : "Full details" ,
"unit_price_label" : "Unit price"
결과는 다음과 같아야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
(선택 사항) 다른 언어에 대한 번역 추가
Shopify Admin에서 테마 페이지로 이동합니다.
... 버튼 > 기본 테마 콘텐츠 편집 을 클릭합니다.
테마 언어 변경 을 클릭하고 편집할 언어를 선택합니다. 이 작업은 게시된 테마에서만 가능합니다.
검색 필드에 Unit Price
를 입력합니다.
일반/접근성 아래의 단위 가격 구분 기호 필드를 업데이트합니다.
제품 아래의 단위 가격 레이블 필드를 업데이트합니다.
저장 을 클릭합니다.
Venture용 단계
단가는 9.4.0 이상 버전의 Venture 테마에 추가되었습니다. 테마를 최신 버전으로 업데이트할 수 없는 경우 이전 버전의 Venture 테마에 단가 사용자 지정을 적용하려면 다음 단계를 따르십시오.
테마 언어 파일 편집
로케일 디렉토리에서 en.default.json
을(를) 클릭합니다.
단축키 찾기 를 사용하여 refresh_page
가 포함된 줄을 찾습니다.
"refresh_page" : "choosing a selection results in a full page refresh"
2단계에서 찾은 줄 위에 다음 코드를 추가합니다.
"unit_price_separator" : "per" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 stock_unavailable
가 포함된 줄을 찾습니다.
"stock_unavailable" : "The item could not be added to your cart because there are not enough in stock."
4단계에서 찾은 줄 위에 다음 코드를 추가합니다.
"unit_price_label" : "Unit price" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마의 스타일시트 편집
자산 디렉토리에서 theme.scss.liquid
을(를) 클릭합니다.
단축키 찾기 를 사용하여 .product-single__policies {
줄을 찾습니다.
.product-single__policies {
font-size : em ( $ font-size-base - 1 );
}
2단계에서 찾은 코드 블록의 닫는 }
태그 아래에 다음 코드를 추가합니다.
.product-unit-price {
font-size : em ( 12 );
color : $ color-body-text ;
}
.product-card__unit-price {
display : block ;
}
편집 후 theme.scss.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 단위 가격 코드 조각 추가
코드 조각 디렉토리에서 새 코드 조각 추가 를 클릭합니다.
product-unit-price
를 이름에 입력합니다.
product-unit-price.liquid
에 다음 코드를 추가합니다.
<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>
저장 을 클릭하여 변경 사항을 확인합니다.
제품 카드 코드 조각 편집
코드 조각 디렉토리에서 product-card.liquid
를 클릭합니다.
단축키 찾기 를 사용하여 <a href="{{ product.url | within: collection }}"
줄을 찾습니다.
2단계에서 찾은 줄 위에 다음 코드를 추가합니다.
{%- assign current_variant = product . selected_or_first_available_variant -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 <div class="product-card__price">
줄을 찾습니다.
<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단계에서 찾은 닫는 태그 </div>
위에 다음 코드를 추가합니다.
{%- 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 -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
카트 페이지 템플릿 편집
섹션 디렉토리에서 cart-template.liquid
을(를) 클릭합니다.
단축키 찾기 를 사용하여 다음과 같은 <td class="cart__cell--total">
의 첫 번째 인스턴스를 찾습니다.
<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단계에서 찾은 endif
태그 아래에 다음 코드를 추가합니다.
{%- if item . unit_price_measurement -%}
{% include 'product-unit-price' , product_variant : item %}
{%- endif -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 <td class="cart__cell--total">
의 두 번째 인스턴스 위치를 찾습니다.
<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단계에서 찾은 두 번째 닫는 태그 {{/if}}
아래에 다음 코드를 추가합니다.
{{ #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}}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
추천 제품 페이지 템플릿 편집
섹션 디렉토리에서 featured-product.liquid
을(를) 클릭합니다.
단축키 찾기 를 사용하여 {% assign current_variant = product.selected_or_first_available_variant %}
줄을 찾습니다.
2단계에서 찾은 줄 아래에 다음 코드를 추가합니다.
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 <ul class="product-single__meta-list
가 포함된 줄을 찾습니다.
<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 %}
이 ul
태그 아래에서 {% if section.settings.stock_enable %}
코드를 찾습니다.
6단계에서 찾은 if
블록 위에 다음 코드를 추가합니다.
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 페이지 템플릿 편집
섹션 디렉토리에서 product-template.liquid
을(를) 클릭합니다.
단축키 찾기 를 사용하여 {% assign current_variant = product.selected_or_first_available_variant %}
줄을 찾습니다.
2단계에서 찾은 줄 아래에 다음 코드를 추가합니다.
{% assign variants_with_unit_price = product . variants | where : "unit_price_measurement" %}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 <ul class="product-single__meta-list
가 포함된 줄을 찾습니다.
<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 %}
이 ul
태그 아래에서 {% if section.settings.stock_enable %}
코드를 찾습니다.
5단계에서 찾은 if
블록 위에 다음 코드를 추가합니다.
{%- if variants_with_unit_price . size > 0 -%}
<li>
{% include 'product-unit-price' , product_variant : current_variant %}
</li>
{%- endif -%}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
고객 주문 템플릿 편집
템플릿 디렉토리에서 customers/order.liquid
를 클릭합니다.
단축키 찾기 를 사용하여 <td class="text-right" data-label="{{ 'customer.order.price' | t }}">
줄을 찾습니다.
<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단계에서 찾은 코드를 다음 코드로 교체합니다.
<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>
편집 후 customers/order.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마의 JavaScript 파일 편집
자산 디렉토리에서 theme.js
을(를) 클릭합니다.
단축키 찾기 를 사용하여 // Create item's data object and add to 'items' array
줄을 찾습니다.
2단계에서 찾은 줄 위에 다음 코드를 추가합니다.
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
};
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 다음의 줄을 찾습니다. vendor: cartItem.vendor,
4단계에서 찾은 줄 아래에 다음 코드를 추가합니다.
unitPrice : unitPrice ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 shopifyPaymentButton: '.shopify-payment-button'
줄을 찾습니다.
6단계에서 찾은 줄을 다음 코드로 바꿉니다.
shopifyPaymentButton : ' .shopify-payment-button ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
unitPriceContainer : ' [data-unit-price-container] '
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 _updateSKU: function(evt) {
줄을 찾습니다.
8단계에서 찾은 줄 위에 다음 코드를 추가합니다.
_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 ;
},
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 this._updateIncomingInfo(variant);
줄을 찾습니다.
} 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단계에서 찾은 닫는 }
태그 아래에 다음 코드를 추가합니다.
$ ( 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 '
);
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
(선택 사항) 다른 언어에 대한 번역 추가
Shopify Admin에서 테마 페이지로 이동합니다.
... 버튼 > 기본 테마 콘텐츠 편집 을 클릭합니다.
테마 언어 변경 을 클릭하고 편집할 언어를 선택합니다. 이 작업은 게시된 테마에서만 가능합니다.
검색 필드에 Unit Price
를 입력합니다.
일반/접근성 아래의 단위 가격 구분 기호 필드를 업데이트합니다.
제품 아래의 단위 가격 레이블 필드를 업데이트합니다.
저장 을 클릭합니다.
Supply용 단계
단가는 8.3.0 이상 버전의 Supply 테마에 추가되었습니다. 테마를 최신 버전으로 업데이트할 수 없는 경우 이전 버전의 Supply 테마에 단가 사용자 지정을 적용하려면 다음 단계를 따르십시오.
제품 단위 가격 코드 조각 추가
코드 조각 폴더를 찾아 확장합니다.
새 코드 조각 추가 를 선택합니다.
product-unit-price
를 이름에 입력합니다.
다음 코드를 복사하여 파일에 붙여넣고 저장 을 선택합니다.
{%- 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>
편집 후 product-unit-price.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
추천 제품 템플릿 편집
섹션 폴더를 찾아 확장한 다음 featured-product.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 {% include 'price' with price %}
이 포함된 줄을 찾습니다.
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with price %}
</span>
</li>
2단계에서 닫은 코드 조각 </span>
의 아래에 다음 코드를 추가합니다.
{% include 'product-unit-price' variant : variant %}
편집 후 featured-product.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 템플릿 편집
섹션 폴더를 찾아 확장한 다음 product-template.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 {% include 'price' with variant.price %}
이 포함된 줄을 찾습니다.
<li>
<span id="productPrice-{{ section . id }} " class="h1">
{% include 'price' with variant . price %}
</span>
</li>
2단계에서 닫은 </span>
아래에 다음 코드를 추가합니다.
{% include 'product-unit-price' , variant : variant %}
편집 후 product-template.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 그리드 품목 코드 조각 편집
코드 조각 폴더를 찾아 확장한 다음 product-grid-item.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 {% if on_sale and section.settings.product_show_saved_amount %}
이 포함된 줄을 찾습니다.
{% 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>
해당 코드를 다음 코드 조각으로 대체합니다.
{%- 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 %}
편집 후 product-grid-item.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
제품 목록 품목 코드 조각 편집
코드 조각 폴더를 찾아 확장한 다음 product-list-item.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 <div class="product-item--price text-center">
가 포함된 줄을 찾습니다.
<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>
해당 코드를 다음 코드 조각으로 대체합니다.
<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>
편집 후 product-list-item.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
검색 결과 그리드 코드 조각 편집
코드 조각 폴더를 찾아 확장한 다음 search-result-grid.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 {% if on_sale and section.settings.product_show_saved_amount %}
이 포함된 줄을 찾습니다.
{% 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>
해당 코드를 다음 코드 조각으로 대체합니다.
{%- 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 %}
편집 후 search-result-grid.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
카트 템플릿 편집
템플릿 폴더를 찾아 확장한 다음 cart.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 <del class="cart-original-price order-discount--cart-price">
가 포함된 줄을 찾습니다.
<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 -%}
해당 코드를 다음 코드 조각으로 대체합니다.
<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 -%}
편집 후 cart.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
주문 템플릿 편집
템플릿 폴더를 찾아 확장한 다음 customers/order.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 <td class="text-right" data-label="customer.order.price">
가 포함된 줄을 찾습니다.
<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단계에서 닫은 </td>
위에 다음 코드를 추가합니다.
{%- if line_item . unit_price_measurement -%}
{% include 'product-unit-price' , variant : line_item , available : true %}
{%- endif -%}
편집 후 customers/order.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 레이아웃 편집
레이아웃 폴더를 찾아 확장한 다음 theme.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 only_left:
가 포함된 줄을 찾습니다.
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단계에서 only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
위에 다음 코드를 추가합니다.
unitPrice: {{ 'products.product.unit_price_label' | t | json }} ,
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }} ,
편집 후 theme.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 스타일 편집
섹션 폴더를 찾아 확장한 다음 theme.scss.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 .product-item--price {
가 포함된 줄을 찾습니다.
.product-item--price {
@include clearfix;
.h1 {
margin-bottom : $ gutter / 2 ;
}
span {
line-height : 22px ;
}
small {
white-space : nowrap ;
}
}
해당 코드를 다음 코드 조각으로 대체합니다.
.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 ;
}
}
편집 후 theme.scss.liquid
파일은 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
JavaScript 테마 코드 편집
자산 폴더를 찾아 확장한 다음 theme.js.liquid
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 originalSelectorId: 'productSelect-' + sectionId,
가 포함된 줄을 찾습니다.
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단계에서 originalSelectorId: 'productSelect-' + sectionId,
위에 다음 코드를 추가합니다.
unitPriceContainer : ' [data-unit-price-container] ' ,
unitPrice : ' [data-unit-price] ' ,
unitPriceBaseUnit : ' [data-unit-price-base-unit] ' ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 파일에서 productVariantCallback: function(variant) {
가 포함된 줄을 찾습니다.
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단계에서 if (variant) {
아래에 다음 코드를 추가합니다.
// 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 ' );
}
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 파일에서 customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
가 포함된 줄을 찾습니다.
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>';
줄을 다음 코드 조각으로 교체합니다.
customPriceFormat += ' <span aria-hidden="true"><small><s> ' + comparePrice + ' </s></small></span> ' ;
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 파일에서 $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
가 포함된 줄을 찾습니다.
} 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단계의 코드 조각 아래에 다음 코드를 추가합니다.
},
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 ;
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
테마 언어 파일 편집
로케일 폴더를 찾아 확장한 다음 en.default.json
파일을 선택합니다.
단축키 찾기 를 사용하여 파일에서 "refresh_page"
가 포함된 줄을 찾습니다.
"accessibility" : {
"refresh_page" : "choosing a selection results in a full page refresh"
} ,
2단계에서 "refresh_page"
위에 다음 코드를 추가합니다.
"unit_price_separator" : "per" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
단축키 찾기 를 사용하여 파일에서 "will_be_in_stock_after"
가 포함된 줄을 찾습니다.
"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단계에서 "will_be_in_stock_after"
후에 다음 코드를 추가합니다.
"unit_price_label" : "Unit price" ,
편집 후 결과는 다음과 같이 표시되어야 합니다.
저장 을 클릭하여 변경 사항을 확인합니다.
(선택 사항) 다른 언어에 대한 번역 추가
Shopify Admin에서 테마 페이지로 이동합니다.
... 버튼 > 기본 테마 콘텐츠 편집 을 클릭합니다.
테마 언어 변경 을 클릭하고 편집할 언어를 선택합니다. 이 작업은 게시된 테마에서만 가능합니다.
입력 바에서 Unit Price
를 검색 합니다.
일반/접근성 아래의 단위 가격 구분 기호 필드를 업데이트합니다.
제품 아래의 단위 가격 레이블 필드를 업데이트합니다.
저장 을 클릭합니다.