단위 가격 표시

이 페이지는 Dec 05, 2023에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/intro-to-shopify/initial-setup/sell-in-germany/price-per-unit에서 확인하십시오.

수량 또는 측정 단위로 제품을 판매하는 경우에는 특정 제품의 단위당 가격을 표시해야 합니다. 제품의 단위 가격을 입력하면 제품 페이지, 컬렉션 페이지, 카트 페이지, 결제 페이지 및 주문 확인 알림에 단위 가격이 표시됩니다.

이 페이지의 정보

제품에 단위 가격 추가
온라인 스토어에 단위 가격 표시
주문 알림에 단위 가격 표시

제품에 단위 가격 추가

Shopify 관리자에서 제품으로 이동합니다.
편집할 제품을 클릭합니다.
선택 사항: 제품에 이형 상품이 있는 경우 이형 상품 섹션에서 편집할 이형 상품을 클릭합니다.
가격 책정 섹션에서 이 제품의 단가 표시를 선택합니다.
총 제품 측정 필드에 제품의 총 측정을 입력한 다음 측정 단위를 선택합니다.
선택 사항: 기본 측정 필드에서 기본 측정을 추가한 다음 측정 단위를 선택합니다. 예를 들어, 중량이 1kg인 제품의 경우 기본 단위를 100g으로 선택할 수 있습니다.
저장을 클릭합니다.

Shopify 앱에서 제품 > 모든 제품으로 이동합니다.
편집하려는 제품을 탭합니다.
제품 가격 영역을 탭합니다.
단가 표시를 선택합니다.
총 제품 측정 필드에 제품의 총 측정을 입력한 다음 측정 단위를 선택합니다.
선택 사항: 기본 측정 필드에서 기본 측정을 추가한 다음 측정 단위를 선택합니다. 예를 들어, 중량이 1kg인 제품의 경우 기본 단위를 100g으로 선택할 수 있습니다.
저장을 탭합니다.

Shopify 앱에서 제품 > 모든 제품으로 이동합니다.
편집하려는 제품을 탭합니다.
제품 가격 영역을 탭합니다.
단가 표시를 선택합니다.
총 제품 측정 필드에 제품의 총 측정을 입력한 다음 측정 단위를 선택합니다.
선택 사항: 기본 측정 필드에서 기본 측정을 추가한 다음 측정 단위를 선택합니다. 예를 들어, 중량이 1kg인 제품의 경우 기본 단위를 100g으로 선택할 수 있습니다.
✓를 탭합니다.

온라인 스토어에 단위 가격 표시

모든 Online Store 2.0 테마에서는 이미 단가 기능을 사용할 수 있습니다. 온라인 스토어에 단가를 표시하기 위한 작업이 필요하지 않습니다.

빈티지 테마를 사용 중이며 단가 기능을 지원하는 버전으로 업데이트할 수 없는 경우 테마 코드를 수동으로 사용자 지정하여 단가를 표시할 수 있습니다.

빈티지 테마에 단가 표시

이 사용자 지정 단계는 테마에 따라 다릅니다. 테마 버튼을 먼저 클릭하고 다음 지침을 따릅니다.

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 }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

저장을 클릭하여 변경 사항을 확인합니다.

카트 페이지 편집

섹션 디렉토리에서 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 }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

편집 후 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 }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

편집 후 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

저장을 클릭하여 변경 사항을 확인합니다.

제품 페이지 편집

섹션 디렉토리에서 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">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

편집 후 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-grid-template.liquid 파일의 업데이트 버전

단축키 찾기를 사용해 {{ 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

편집 후 결과는 다음과 같이 표시되어야 합니다.

저장을 클릭하여 변경 사항을 확인합니다.

카트 페이지 편집

템플릿 디렉토리에서 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 -%}

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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

편집 후 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

편집 후 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 파일은 다음과 같이 표시되어야 합니다.

저장을 클릭하여 변경 사항을 확인합니다.

제품 템플릿 업데이트

섹션 폴더를 찾아 확장합니다.
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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
    {% raw %}
    <span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
  </span>
{{/if}}

편집 후 결과는 다음과 같이 표시되어야 합니다.

저장을 클릭하여 변경 사항을 확인합니다.

제품 페이지 템플릿 편집

섹션 디렉토리에서 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">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
    <span>
    {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
        {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>

편집 후 product-unit-price.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를 검색 합니다.
일반/접근성 아래의 단위 가격 구분 기호 필드를 업데이트합니다.
제품 아래의 단위 가격 레이블 필드를 업데이트합니다.
저장을 클릭합니다.

주문 알림에 단위 가격 표시

기본적으로 기능이 활성화되어 있으면 주문 확인 알림에 단가가 표시됩니다.

제품에 단가를 추가했지만 주문 확인 알림에 단가가 표시되지 않는 경우 템플릿을 수동으로 업데이트해야 할 수 있습니다.

단계:

Shopify Admin에서 설정 > 알림으로 이동합니다.
주문 섹션에서 주문 확인을 클릭합니다.
코드 편집을 클릭합니다.
"order-list__item-price" 클래스 내 템플릿에 다음 코드 조각을 추가합니다.

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

주문 확인 알림의 이메일 본문(HTML) 창의 적절한 위치에 강조 표시된 단가 코드 조각입니다.

5. 저장을 클릭합니다.

단위 가격 표시

이 페이지의 정보

제품에 단위 가격 추가

온라인 스토어에 단위 가격 표시

빈티지 테마에 단가 표시

Debut용 단계

제품 가격 코드 조각 편집

카트 페이지 편집

컬렉션 페이지 편집

제품 카드 그리드 편집

제품 카드 목록 편집

주문 페이지 편집

테마 스타일 편집

Javascript 테마 코드 편집

영어 번역 편집하기

테마 레이아웃 편집

(선택 사항) 다른 언어에 대한 번역 추가

Brooklyn용 단계

제품 가격 조각 추가

추천 제품 페이지 편집

제품 페이지 편집

Ajax 카트 편집

제품 그리드 항목 편집

카트 페이지 편집

주문 페이지 편집

테마 스타일 편집 - 1부

테마 스타일 편집 - 2부

JavaScript 테마 코드 편집

영어 번역 편집

(선택 사항) 다른 언어에 대한 번역 추가

Minimal용 단계

코드 조각 업데이트

스타일 업데이트

템플릿 업데이트

자바 스크립트 업데이트

카트 템플릿 업데이트

추천 제품 업데이트

제품 템플릿 업데이트

로케일 업데이트

(선택 사항) 다른 언어에 대한 번역 추가

Venture용 단계

테마 언어 파일 편집

테마의 스타일시트 편집

제품 단위 가격 코드 조각 추가

제품 카드 코드 조각 편집

카트 페이지 템플릿 편집

추천 제품 페이지 템플릿 편집

제품 페이지 템플릿 편집

고객 주문 템플릿 편집

테마의 JavaScript 파일 편집

(선택 사항) 다른 언어에 대한 번역 추가

Supply용 단계

제품 단위 가격 코드 조각 추가

추천 제품 템플릿 편집

제품 템플릿 편집

제품 그리드 품목 코드 조각 편집

제품 목록 품목 코드 조각 편집

검색 결과 그리드 코드 조각 편집

카트 템플릿 편집

주문 템플릿 편집

테마 레이아웃 편집

테마 스타일 편집

JavaScript 테마 코드 편집

테마 언어 파일 편집

(선택 사항) 다른 언어에 대한 번역 추가

주문 알림에 단위 가격 표시

단계:

Shopify와 함께 사업을 시작할 준비가 되셨습니까?