Exibição de preços unitários

Observação

No momento, o preço unitário só está disponível para lojistas da União Europeia (UE) e da Suíça. Se você vende produtos nesses locais, mas sua empresa não está localizada em nenhum deles, entre em contato com o Atendimento ao cliente da Shopify para ativar o recurso.

Se você vende produtos em quantidades ou medidas, talvez seja necessário exibir o preço por unidade de determinados produtos. Quando você insere o preço unitário de um produto, o preço unitário é exibido nas páginas do produto, nas páginas da coleção, na página do carrinho, nas páginas de checkout e nas notificações de confirmação do pedido.

Adicione preços unitários ao seu produto

Desktop

1. No admin da Shopify, acesse Produtos.

2. Clique no produto que você quer editar.

3. Opcional: se o produto já tiver variantes, na seção Variantes, clique naquela que você quer editar.

4. Na seção Preços, selecione Exibir preço unitário para este produto.

5. No campo Medida total do produto, insira a medida total do produto e selecione a unidade de medida.

6. Opcional: para alterar a medida base usada como padrão, no campo Medida da base, adicione o novo valor e selecione uma unidade de medida. Por exemplo, para um produto com um peso de 200 g, você pode selecionar uma unidade base de 1 kg.

7. Clique em Salvar.

iPhone

1. No app da Shopify, acesse Produtos > Todos os produtos.
2. Toque no item a ser alterado.
3. Toque na área de preço do produto.
4. Selecione Exibir preço unitário.
5. No campo Medida total do produto, insira a medida total do produto e selecione a unidade de medida.
6. Opcional: para alterar a medida base usada como padrão, no campo Medida da base, adicione o novo valor e selecione uma unidade de medida. Por exemplo, para um produto com um peso de 200 g, você pode selecionar uma unidade base de 1 kg.
7. Toque em Salvar.

Android

1. No app da Shopify, acesse Produtos > Todos os produtos.
2. Toque no item a ser alterado.
3. Toque na área de preço do produto.
4. Selecione Exibir preço unitário.
5. No campo Medida total do produto, insira a medida total do produto e selecione a unidade de medida.
6. Opcional: para alterar a medida base usada como padrão, no campo Medida da base, adicione o novo valor e selecione uma unidade de medida. Por exemplo, para um produto com um peso de 200 g, você pode selecionar uma unidade base de 1 kg.
7. Toque em ✓.

Exibir preços unitários na loja virtual

Todos os temas da Online Store 2.0 já têm o recurso de preço unitário disponível. Você não precisa fazer mais nada.

Se você tiver um tema vintage e não consegue atualizar para uma versão compatível com o recurso de preço unitário, personalize o código do tema manualmente para exibir o preço unitário.

Exibir preços unitários em um tema vintage

Aviso

Faça backup do tema antes de começar a edição do código. É importante destacar que as orientações a seguir são avançadas. Caso você precise de auxílio para adicionar o recurso ao tema, considere a opção de receber ajuda com personalizações.

As etapas da personalização variam, dependendo do tema. Clique no botão do seu tema antes de seguir as instruções abaixo:

Debut

Etapas para o Debut

Os preços unitários estão disponíveis no tema Debut para a versão 12.1.0 ou superior. Se você não conseguir atualizar seu tema para a versão mais recente, é possível adicionar a personalização de preços unitários às versões anteriores do Debut.

Editar um snippet de código do código de preço do produto

1. No diretório snippets, clique no arquivo product-price.liquid.

2. Pelo atalho de localização do teclado, pesquise data-price para encontrar o código a seguir:

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>

1. Substitua o código pelo snippet de código a seguir:

<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>

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, pesquise price__sale para encontrar o código a seguir:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Abaixo da tag </div>, adicione o seguinte código:

{% if variant.unit_price_measurement %}
<div class="price__unit">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if available and variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
  </dd>
</div>
{% endif %}

1. Clique em Salvar para confirmar suas alterações.

Editar a página do carrinho

1. No diretório Seções, clique no arquivo cart-template.liquid.

2. Pelo atalho de localização do teclado, pesquise cart__price-wrapper para encontrar o código a seguir:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Substitua o código pelo snippet de código a seguir:

<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>

Após as edições, o arquivo cart-template.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a página de coleção

1. No diretório Seções, clique no arquivo collection.liquid.

2. Pelo atalho de localização do teclado, pesquise grid-view-item__title para encontrar o código a seguir:

{% include 'product-price' %}

1. Substitua o código pelo snippet de código a seguir:

{% include 'product-price', variant: nil %}

Após as edições, o arquivo collection.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a grade de cartões de produtos

1. No diretório snippets, clique no arquivo product-card-grid.liquid.

2. Pelo atalho de localização do teclado, pesquise grid-view-item__title para encontrar o código a seguir:

{% include 'product-price', variant: product %}

1. Substitua o código pelo snippet de código a seguir:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Após as edições, o arquivo product-card-grid.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a lista de cartões de produtos

1. No diretório snippets, clique no arquivo product-card-list.liquid.

2. Pelo atalho de localização do teclado, pesquise {% if product.available %} para encontrar o código a seguir:

{% include 'product-price', variant: product %}

1. Substitua o código pelo snippet de código a seguir:

{% include 'product-price', variant: product.selected_or_first_available_variant %}

Após as edições, o arquivo product-card-list.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a página de pedidos

1. No diretório Modelos, clique no arquivo customers/order.liquid.

2. Pelo atalho de localização do teclado, pesquise data-label="{{ 'customer.order.price' | t }}" para encontrar o código a seguir:

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Substitua o código pelo snippet de código a seguir:

<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>

Após as edições, o arquivo customers/order.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar os estilos do tema

1. No diretório Ativos, clique no arquivo theme.scss.liquid.

2. Pelo atalho de localização do teclado, pesquise .price__vendor { para encontrar o código a seguir:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. Abaixo do código da etapa 2, adicione o snippet de código a seguir:

.price__unit {
  @include flex-basis(100%);
  display: none;

  .price--unit-available & {
    display: block;
  }
}
.price-unit-price {
  color: $color-body-text;
  font-size: 0.8em;
}

Após as edições, o arquivo theme.scss.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o código em JavaScript do tema

1. No diretório Ativos, clique no arquivo theme.js.

2. Pelo atalho de localização do teclado, encontre o código a seguir:

salePrice: '[data-sale-price]'

1. Acima do código da etapa 2, adicione o snippet de código a seguir:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

productOnSale: 'price--on-sale',

1. Abaixo do código da etapa 4, adicione o snippet de código a seguir:

productUnitAvailable: 'price--unit-available',

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';

1. Substitua o código pelo snippet de código a seguir:

var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';

1. Pelo atalho de localização do teclado, encontre o código a seguir:

var salePrice = '';

1. Abaixo do código da etapa 8, adicione o snippet de código a seguir:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Pelo atalho de localização do teclado, encontre o código a seguir:

.replace('[$]', salePrice)

1. Abaixo do código da etapa 10, adicione o snippet de código a seguir:

.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

_updatePrice: function(evt) {

1. Acima do código da etapa 12, adicione o snippet de código a seguir:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. Pelo atalho de localização do teclado, encontre o código a seguir:

var $salePrice = $(this.selectors.salePrice, $priceContainer);

1. Abaixo do código da etapa 14, adicione o snippet de código a seguir:

var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
  this.selectors.unitPriceBaseUnit,
  $priceContainer
);

1. Pelo atalho de localização do teclado, encontre o código a seguir:

.removeClass(this.classes.productOnSale)

1. Abaixo do código da etapa 16, adicione o snippet de código a seguir:

.removeClass(this.classes.productUnitAvailable)

1. Pelo atalho de localização do teclado, encontre o código a seguir:

else {
  // Regular price
  $regularPrice.html(
    theme.Currency.formatMoney(variant.price, theme.moneyFormat)
  );
}

1. Abaixo do código da etapa 18, adicione o snippet de código a seguir:

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

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar suas traduções em inglês

1. No diretório Locais, clique no arquivo en.default.json.

2. Pelo atalho de localização do teclado, encontre o código a seguir:

"selection_help": "press the space key then arrow keys to make a selection"

1. Acima do código da etapa 2, adicione o snippet de código a seguir:

"unit_price_separator": "per",

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

"include_taxes": "Tax included.",

1. Abaixo do código da etapa 4, adicione o snippet de código a seguir:

"unit_price_label": "Unit price",

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o layout do tema

1. No diretório Layout, clique no arquivo theme.liquid.

2. Pelo atalho de localização do teclado, encontre o código a seguir:

regularPrice: {{ 'products.product.regular_price' | t | json }},

1. Abaixo do código da etapa 2, adicione o snippet de código a seguir:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Após as edições, o arquivo theme.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Opcional: adicionar traduções para outros idiomas

1. Acesse a página Temas em seu admin da Shopify.

2. Clique no botão … > Editar conteúdo do tema-padrão.

3. Clique em Alterar idioma do tema, depois selecione o idioma que deseja editar. Só é possível fazer isso no tema publicado.

4. Insira Unit Price no campo de pesquisa.

5. Atualize o campo Separador de preço unitário em Geral/Acessibilidade.

6. Atualize o campo Etiqueta de preço unitário em Produtos/Produto.

7. Clique em Salvar.

Brooklyn

Etapas para o Brooklyn

Os preços unitários estão disponíveis no tema Brooklyn para a versão 13.1.0 ou superior. Se você não conseguir atualizar seu tema para a versão mais recente, é possível adicionar a personalização de preços unitários às versões anteriores do Brooklyn.

Adicionar um snippet de código para o preço do produto

1. No diretório Snippets, clique em Adicionar um novo snippet de código.

2. Digite product-price no campo "nome".

3. Copie e cole o seguinte código no arquivo:

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Clique em Salvar para confirmar suas alterações.

Editar a página de produto em destaque

1. No diretório Seções, clique no arquivo featured-product.liquid.

2. Pelo atalho de localização do teclado, pesquise itemprop="offers" para encontrar o código a seguir:

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Substitua o código pelo snippet de código a seguir:

{% include 'product-price', variant: current_variant %}

Após as edições, o arquivo featured-product.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a página do produto

1. No diretório Seções, clique no arquivo product-template.liquid.

2. Pelo atalho de localização do teclado, pesquise itemprop="offers" para encontrar o código a seguir:

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Substitua o código pelo snippet de código a seguir:

{% include 'product-price', variant: current_variant %}

Após as edições, o arquivo product-template.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o carrinho em Ajax

1. No diretório snippets, clique no arquivo ajax-cart-template.liquid.

2. Pelo atalho de localização do teclado, pesquise <span class="ajaxcart__price">{{{price}}}</span> para encontrar o código a seguir:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. Abaixo do código {{/if}} da etapa 2, adicione o código a seguir:

{{#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}}

Após as edições, o arquivo ajax-cart-template.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar item da grade de produtos

1. No diretório snippets, clique no arquivo product-grid-template.liquid.

2. Pelo atalho de localização do teclado, pesquise capture img_id_class para encontrar o código a seguir:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. Acima do código da etapa 2, adicione o snippet de código a seguir:

{%- assign variant = product.selected_or_first_available_variant -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, pesquise {{ product.price | money_without_trailing_zeros }} para encontrar o código a seguir:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. Abaixo de </span>, adicione o seguinte código:

{%- 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 -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a página do carrinho

1. No diretório Modelos, clique no arquivo cart.liquid.

2. Pelo atalho de localização do teclado, pesquise <span class="cart__price"> para encontrar o código a seguir:

{%- 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 -%}

Atenção: se você tiver uma versão mais antiga do tema, pode não encontrar esse snippet. Nesse caso, adicione o código da etapa 3 imediatamente abaixo do elemento <span class="cart__price">.

1. Abaixo do código da etapa 2, adicione o snippet de código a seguir:

{%- 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 -%}

Após as edições, o arquivo cart.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar a página de pedidos

1. No diretório Modelos, clique no arquivo customers/order.liquid.

2. Pelo atalho de localização do teclado, pesquise {{ line_item.original_price | money }} para encontrar o código a seguir:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. Acima do código </td> da etapa 2, adicione o snippet de código a seguir:

{%- 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 -%}

Após as edições, o arquivo customers/order.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar estilos do tema: Parte 1

1. No diretório Ativos, clique no arquivo theme.scss.liquid.

2. Pelo atalho de localização do teclado, pesquise .ajaxcart__price { para encontrar o código a seguir:

.ajaxcart__price {
    font-size: em(13px);
    display: block;
}

1. Abaixo do código da etapa 2, adicione o snippet de código a seguir:

.cart__unit-price {
    display: block;
}

Após as edições, o arquivo theme.scss.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar estilos do tema: Parte 2

1. No diretório Ativos, clique no arquivo timber.scss.liquid.

2. Pelo atalho de localização do teclado, pesquise .product-single__policies { para encontrar o código a seguir:

.product-single__policies {
  margin: 15px 0 25px 0;
}

1. Acima do código da etapa 2, adicione o snippet de código a seguir:

.product-single__unit {
  display: none;

  .price-container--unit-available & {
    display: block;
  }
}

Após as edições, o resultado deve ser aparecer desta forma:

1. Vá até o final do arquivo e adicione o seguinte código:

.product-unit-price {
  color: $colorTextBody;
  display: block;
}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o código do tema em JavaScript

1. No diretório Ativos, clique no arquivo theme.js.liquid.

2. Pelo atalho de localização do teclado, encontre o código a seguir:

var prodImg;

1. Abaixo do código da etapa 2, adicione o snippet de código a seguir:

var unitPrice = null;

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

// Create item's data object and add to 'items' array

1. Acima do código da etapa 4, adicione o snippet de código a seguir:

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

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

vendor: cartItem.vendor

1. Acima do código da etapa 6, adicione o snippet de código a seguir:

unitPrice: unitPrice,

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

productPrice: '#ProductPrice',

1. Abaixo do código da etapa 8, adicione o snippet de código a seguir:

unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, pesquise $(this.selectors.priceContainer, this.$container).removeClass( para encontrar o código a seguir:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden'
);

1. Substitua o código pelo snippet de código a seguir:

$(this.selectors.priceContainer, this.$container).removeClass(
  'visibility-hidden price-container--unit-available'
);

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

$(this.selectors.SKU).html(variant.sku);

1. Acima do código da etapa 12, adicione o snippet de código a seguir:

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

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, pesquise this.destroyImageCarousel(); para encontrar o código a seguir:

onUnload: function() {
  this.$container.off(this.settings.namespace);
  this.destroyImageCarousel();
}

1. Acima do código da etapa 14, adicione o snippet de código a seguir:

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;
},

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar suas traduções em inglês

1. No diretório Locais, clique no arquivo en.default.json.

2. Pelo atalho de localização do teclado, encontre o código a seguir:

"refresh_page": "choosing a selection results in a full page refresh"

1. Acima do código da etapa 2, adicione o snippet de código a seguir:

"unit_price_separator": "per",

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o código a seguir:

"include_taxes": "Tax included.",

1. Abaixo do código da etapa 4, adicione o snippet de código a seguir:

"unit_price": "Unit price",

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Opcional: adicionar traduções para outros idiomas

1. Acesse a página Temas em seu admin da Shopify.

2. Clique no botão … > Editar conteúdo do tema-padrão.

3. Clique em Alterar idioma do tema, depois selecione o idioma que deseja editar. Só é possível fazer isso no tema publicado.

4. Insira Unit Price no campo de pesquisa.

5. Atualize o campo Separador de preço unitário em Geral/Acessibilidade.

6. Atualize o campo Etiqueta de preço unitário em Produtos/Geral.

7. Clique em Salvar.

Minimal

Etapas para o Minimal

Os preços unitários estão disponíveis no tema Minimal para a versão 11.2.0 ou superior. Se você não conseguir atualizar seu tema para a versão mais recente, é possível adicionar a personalização de preços unitários às versões anteriores do Minimal.

Atualizar snippets

1. Localize e clique para expandir a pasta Snippets.

2. Selecione Adicionar novo snippet de código.

3. Insira o nome product-unit-price.

4. Copie e cole o seguinte código em 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>

1. Clique em Salvar.

2. Encontre e edite o arquivo product-grid-item.liquid.

3. Substitua a linha a seguir:

{% capture price %}{{ featured.price | money }}{% endcapture %}

Com esta linha:

{%- assign price = featured.price | money -%}

1. Pelo atalho de localização do teclado, encontre o código {{ price }} e, logo abaixo, adicione o seguinte:

{%- 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 -%}

Após as edições, o arquivo product-grid-item.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

2. Localize e edite o arquivo search-result.liquid

3. Pelo atalho de localização do teclado, encontre o código {% if item.object_type == 'product' %} e, na linha imediatamente abaixo, adicione o seguinte:

{%- assign variant = item.selected_or_first_available_variant -%}

1. Pelo atalho de localização do teclado, encontre os dois snippets de código a seguir:

<s><small>{{ item.compare_at_price_max | money }}</small></s>

e

<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
  {{ item.price | money }}
</span>

1. Adicione o seguinte bloco de código abaixo de cada um dos dois snippets listados na etapa anterior:

{%- if variant.available and variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: variant %}
{%- endif -%}

Após as edições, o arquivo search-result.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar estilos

1. Localize e clique para expandir a pasta Ativos.

2. Edite o arquivo theme.scss.liquid.

3. No teclado, use o atalho de busca para localizar o seguinte código:

.grid-link__title,
.grid-link__meta {
  position: relative;
  margin-bottom: 5px;

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

font-family: $headerFontStack;

1. Pelo atalho de localização do teclado, encontre o snippet de código a seguir:

.grid-link__sale_price {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

.grid-link__unit-price {
  font-size: 1em;
}

1. Pelo atalho de localização do teclado, encontre o snippet de código a seguir:

.order-discount--list {
  margin: 0.8em 0 0.6em 1.3em;
  list-style: none;
  padding: 0;
}

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

.order-discount--price {
  margin-bottom: 0;
}

1. Pelo atalho de localização do teclado, encontre o snippet de código a seguir:

.cart__product-title {
  display: inline-block;

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

font-weight: $bodyFontWeightBold;

Após as edições, o arquivo theme.scss.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

2. Localize e edite o arquivo timber.scss.liquid.

3. Pelo atalho de localização do teclado, encontre o seguinte código:

.quantity-selector {
    display: inline-block;
  }
}

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

.product-single__title {
  font-weight: $bodyFontWeightBold;
}

1. Insira este código no fim do arquivo:

.product-unit-price {
  color: rgba($colorTextBody, 0.6);
  display: block;
  font-family: $headerFontStack;
  font-size: em(12px);
}

Após as edições, o arquivo timber.scss.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar modelos

1. Localize e clique para expandir a pasta Modelos.

2. Localize e edite o arquivo customers/order.liquid.

3. Pelo atalho de localização do teclado, encontre o código a seguir:

{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Abaixo do código da etapa 3, adicione o seguinte:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Após as edições, o arquivo customers/order.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar JavaScript

1. Localize e edite theme.js em Ativos.

2. Pelo atalho de localização do teclado, encontre a linha com .shopify-payment-button e a substitua por:

$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)

Esse bloco do código deve aparecer assim:

1. Localize este código:

else {
  this.selectors.$comparePrice.addClass('hide').html('');
  this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}

1. Abaixo do código anterior, adicione o seguinte:

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

O resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre o seguinte código:

.attr('data-zoom')
  });
});

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

},
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;

O resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar modelo de carrinho

1. Localize e clique para expandir a pasta Seções.

2. Edite o arquivo cart-template.liquid.

3. No teclado, use o atalho de busca para localizar o código <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Substitua a linha por este código:

<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>

1. Localize a primeira ocorrência do código {%- 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 -%}

1. Acima do código da etapa 5, adicione o seguinte:

{%- if item.variant.available and item.variant.unit_price_measurement -%}
  {% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}

Após as edições, o arquivo cart-template.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar produto em destaque

1. Localize e clique para expandir a pasta Seções.

2. Edite o arquivo featured-product.liquid.

3. Pelo atalho de localização do teclado, encontre a linha com itemprop="name" e a substitua por:

<h1 class="product-single__title" itemprop="name">{{ title }}</h1>

1. Localize o código que contém 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 %}

1. Abaixo do snippet de código localizado na etapa anterior, insira o seguinte bloco de código:

{% include 'product-unit-price', variant: variant, available: true %}

Após as edições, o arquivo featured-product.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar modelo de produto

1. Localize e clique para expandir a pasta Seções.

2. Edite o arquivo product-template.liquid.

3. Pelo atalho de localização do teclado, encontre a linha com itemprop="name" e a substitua por:

<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

1. Pelo atalho de localização do teclado, encontre o código a seguir:

{% else %}
  <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
    <s id="ComparePrice" class="product-single__sale-price hide">
      {{ product.compare_at_price_max | money }}
    </s>
{% endif %}

1. Abaixo do código anterior, adicione esta linha:

{% include 'product-unit-price', variant: variant, available: true %}

Após as edições, o arquivo product-template.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Atualizar localidades

1. Localize e clique para expandir a pasta Localidades.

2. Abra e edite o arquivo en.default.json.

3. Pelo atalho de localização do teclado, encontre a linha com refresh_page e a substitua por:

"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"

O resultado deve ser aparecer desta forma:

1. Localize a linha que contém full_details e substitua por:

"full_details": "Full details",
"unit_price_label": "Unit price"

O resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Opcional: adicionar traduções para outros idiomas

1. Acesse a página Temas em seu admin da Shopify.

2. Clique no botão … > Editar conteúdo do tema-padrão.

3. Clique em Alterar idioma do tema, depois selecione o idioma que deseja editar. Só é possível fazer isso no tema publicado.

4. Insira Unit Price no campo de pesquisa.

5. Atualize o campo Separador de preço unitário em Geral/Acessibilidade.

6. Atualize o campo Etiqueta de preço unitário em Produtos/Produto.

7. Clique em Salvar.

Venture

Etapas para o Venture

Os preços unitários foram adicionados ao tema Venture para a versão 9.4.0 ou superior. Se você não conseguir atualizar seu tema para a versão mais recente, siga estas etapas para aplicar a personalização de preço unitário às versões anteriores do Venture.

Editar arquivo de idioma do tema

1. No diretório Localidades, clique em en.default.json.

2. Pelo atalho de localização do teclado, encontre a linha com refresh_page:

"refresh_page": "choosing a selection results in a full page refresh"

1. Acima da linha da etapa 2, adicione o seguinte código:

"unit_price_separator": "per",

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre a linha com stock_unavailable:

"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."

1. Acima da linha da etapa 4, adicione o seguinte código:

"unit_price_label": "Unit price",

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar folha de estilo do tema

1. No diretório Ativos, clique em theme.scss.liquid.

2. Pelo atalho de localização do teclado, encontre a linha .product-single__policies {:

.product-single__policies {
    font-size: em($font-size-base - 1);
  }

1. Abaixo da tag } que fecha o bloco de código da etapa 2, adicione o seguinte:

.product-unit-price {
    font-size: em(12);
    color: $color-body-text;
  }

  .product-card__unit-price {
    display: block;
  }

Após as edições, o arquivo theme.scss.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Adicionar snippet de código para preço unitário de produto

1. No diretório Snippets, clique em Adicionar um novo snippet de código.

2. Insira o nome product-unit-price.

3. Adicione este código em 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>

1. Clique em Salvar para confirmar suas alterações.

Editar seu snippet de código do cartão de produto

1. No diretório Snippets, clique em product-card.liquid.

2. Use o atalho de localização do teclado para encontrar a linha <a href="{{ product.url | within: collection }}".

3. Acima da linha da etapa 2, adicione o seguinte código:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre a linha <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>

1. Adicione o seguinte código acima da tag de fechamento </div> encontrado na etapa 5:

{%- 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 -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar seu modelo de página do carrinho

1. No diretório Seções, clique em cart-template.liquid.

2. Use o atalho de localização do teclado para encontrar a primeira ocorrência de <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 -%}

1. Adicione o seguinte código abaixo da tag de endif encontrada na etapa 2:

{%- if item.unit_price_measurement -%}
  {% include 'product-unit-price', product_variant: item %}
{%- endif -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Use o atalho de localização do teclado para encontrar a segunda ocorrência de <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}}

1. Adicione o seguinte código abaixo da segunda tag de fechamento {{/if}} encontrada na etapa 4:

{{#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}}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar seu modelo de página de produto em destaque

1. No diretório Seções, clique em featured-product.liquid.

2. Use o atalho de localização do teclado para encontrar a linha {% assign current_variant = product.selected_or_first_available_variant %}.

3. Adicione o seguinte código abaixo da linha encontrada na etapa 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre a linha com <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 %}

1. Abaixo desta tag de ul , encontre o código {% if section.settings.stock_enable %}.

2. Adicione o seguinte código acima do bloco de if encontrado na etapa 6:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar seu modelo de página de produto

1. No diretório Seções, clique em product-template.liquid.

2. Use o atalho de localização do teclado para encontrar a linha {% assign current_variant = product.selected_or_first_available_variant %}.

3. Adicione o seguinte código abaixo da linha encontrada na etapa 2:

{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre a linha com <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 %}

1. Abaixo desta tag de ul , encontre o código {% if section.settings.stock_enable %}.

2. Adicione o seguinte código acima do bloco de if encontrado na etapa 5:

{%- if variants_with_unit_price.size > 0 -%}
  <li>
    {% include 'product-unit-price', product_variant: current_variant %}
  </li>
{%- endif -%}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Edite o modelo de pedido de seus clientes

1. No diretório Modelos, clique em customers/order.liquid.

2. Use o atalho de localização do teclado para encontrar a linha <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>

1. Substitua o código encontrado na etapa 2 pelo seguinte código:

<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>

Após as edições, o arquivo customers/order.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o arquivo JavaScript do seu tema

1. No diretório Ativos, clique em theme.js.

2. Use o atalho de localização do teclado para encontrar a linha // Create item's data object and add to 'items' array.

3. Acima da linha da etapa 2, adicione o seguinte código:

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

Após as edições, o resultado deve ser aparecer desta forma:

1. Use o atalho de localização do teclado para encontrar a linha vendor: cartItem.vendor,

2. Adicione o seguinte código abaixo da linha encontrada na etapa 4:

unitPrice: unitPrice,

Após as edições, o resultado deve ser aparecer desta forma:

1. Use o atalho de localização do teclado para encontrar a linha shopifyPaymentButton: '.shopify-payment-button'.

2. Substitua a linha localizada na etapa 6 pelo seguinte código:

shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'

Após as edições, o resultado deve ser aparecer desta forma:

1. Use o atalho de localização do teclado para encontrar a linha _updateSKU: function(evt) {.

2. Adicione o seguinte código acima da linha encontrada na etapa 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;
},

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre a linha 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);
}

1. Adicione o seguinte código abaixo da tag de fechamento } encontrada na etapa 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'
  );
}

Após as edições, o resultado deve ser aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Opcional: adicionar traduções para outros idiomas

1. Acesse a página Temas em seu admin da Shopify.

2. Clique no botão … > Editar conteúdo do tema-padrão.

3. Clique em Alterar idioma do tema, depois selecione o idioma que deseja editar. Só é possível fazer isso no tema publicado.

4. Insira Unit Price no campo de pesquisa.

5. Atualize o campo Separador de preço unitário em Geral/Acessibilidade.

6. Atualize o campo Etiqueta de preço unitário em Produtos/Produto.

7. Clique em Salvar.

Supply

Etapas para o Supply

Os preços unitários foram adicionados ao tema Supply para a versão 8.3.0 ou superior. Se você não conseguir atualizar seu tema para a versão mais recente, siga estas etapas para aplicar a personalização de preço unitário às versões anteriores do Supply.

Adicionar snippet de código para preço unitário de produto

1. Localize e clique para expandir a pasta Snippets.

2. Selecione Adicionar novo snippet de código.

3. Insira o nome product-unit-price.

4. Copie e cole o código a seguir no arquivo e selecione Salvar:

{%- 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>

Após as edições, o arquivo product-unit-price.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar modelo de produto em destaque

1. Localize e clique para expandir a pasta Seções e selecione o arquivo featured-product.liquid.

2. Pelo atalho de localização do teclado, encontre a linha {% include 'price' with price %} no arquivo:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with price %}
  </span>
</li>

1. Abaixo do </span> que fecha o snippet de código da etapa 2, adicione o seguinte:

{% include 'product-unit-price' variant: variant %}

Após as edições, o arquivo featured-product.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar modelo de produto

1. Localize e clique para expandir a pasta Seções e selecione o arquivo product-template.liquid.

2. Pelo atalho de localização do teclado, encontre a linha {% include 'price' with variant.price %} no arquivo:

<li>
  <span id="productPrice-{{ section.id }}" class="h1">
    {% include 'price' with variant.price %}
  </span>
</li>

1. Abaixo do </span> que fecha a etapa 2, adicione o código a seguir:

{% include 'product-unit-price', variant: variant %}

Após as edições, o arquivo product-template.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar snippet de código para item da grade de produtos

1. Localize e clique para expandir a pasta snippets e selecione o arquivo product-grid-item.liquid.

2. Pelo atalho de localização do teclado, encontre a linha {% if on_sale and section.settings.product_show_saved_amount %} no arquivo:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag{% unless section.settings.show_compare_at_price %} medium--right{% endunless %}{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Substitua o código pelo snippet de código a seguir:

{%- 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 %}

Após as edições, o arquivo product-grid-item.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar snippet de código para item da lista de produtos

1. Localize e clique para expandir a pasta snippets e selecione o arquivo product-list-item.liquid.

2. Pelo atalho de localização do teclado, encontre a linha <div class="product-item--price text-center"> no arquivo:

<div class="product-item--price text-center">
  <p class="h1 medium-down--left">
    {% if on_sale %}
      <span class="visually-hidden">{{ "products.general.sale_price" | t }}</span>
    {% else %}
      <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
    {% endif %}
    {% include 'price' with product.price %}
    {% if on_sale and section.settings.product_show_compare_at_price %}
      <small>
        <s>
          <span class="visually-hidden">{{ "products.general.regular_price" | t }}</span>
          {% include 'price' with product.compare_at_price %}
        </s>
      </small>
    {% endif %}
  </p>
  {% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium-down--right{% if section.settings.product_reviews_enable %} has-reviews{% endif %}">
      {% assign compare_price = product.compare_at_price %}
      {% assign product_price = product.price %}
      {% include 'price-sale' %}
    </span>

1. Substitua o código pelo snippet de código a seguir:

<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>

Após as edições, o arquivo product-list-item.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar snippet de código para grade de resultados de pesquisa

1. Localize e clique para expandir a pasta snippets e selecione o arquivo search-result-grid.liquid.

2. Pelo atalho de localização do teclado, encontre a linha {% if on_sale and section.settings.product_show_saved_amount %} no arquivo:

{% if on_sale and section.settings.product_show_saved_amount %}
    <span class="sale-tag medium--right">
      {% assign compare_price = item.compare_at_price %}
      {% assign product_price = item.price %}
      {% include 'price-sale' %}
    </span>
  {% endif %}
</div>

1. Substitua o código pelo snippet de código a seguir:

{%- 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 %}

Após as edições, o arquivo search-result-grid.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar modelo de carrinho

1. Localize e clique para expandir a pasta Modelos e selecione o arquivo cart.liquid.

2. Pelo atalho de localização do teclado, encontre a linha <del class="cart-original-price order-discount--cart-price"> no arquivo:

<del class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</del>
  <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
  <span class="order-discount order-discount--cart-price">{{ item.final_line_price | money }}</span>
{%- else -%}
  <span class="cart-original-price order-discount--cart-price">{{ item.original_line_price | money }}</span>
{%- endif -%}

1. Substitua o código pelo snippet de código a seguir:

<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 -%}

Após as edições, o arquivo cart.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar modelo de pedido

1. Localize e clique para expandir a pasta Modelos e selecione o arquivo customers/order.liquid.

2. Pelo atalho de localização do teclado, encontre a linha <td class="text-right" data-label="customer.order.price"> no arquivo:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
  {%- if line_item.original_price != line_item.final_price -%}
    <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <del>{{ line_item.original_price | money }}</del>
    <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  {%- else -%}
    {{ line_item.original_price | money }}
  {%- endif -%}
</td>

1. Acima do </td> de fechamento na etapa 2, adicione o seguinte código:

{%- if line_item.unit_price_measurement -%}
  {% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}

Após as edições, o arquivo customers/order.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o layout do tema

1. Localize e clique para expandir a pasta Layout e selecione o arquivo theme.liquid.

2. Pelo atalho de localização do teclado, encontre a linha com only_left: no arquivo:

product:{
  unavailable: {{ 'products.product.unavailable' | t | json }},
  will_be_in_stock_after:{{ 'products.product.will_be_in_stock_after' | t: date: '[date]' | json }},
  only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
},

1. Acima do código only_left:{{ 'products.product.only_left' | t: count: '1' | json }} da etapa 2, adicione o código a seguir:

unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},

Após as edições, o arquivo theme.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar os estilos do tema

1. Localize e clique para expandir a pasta Seções e selecione o arquivo theme.scss.liquid.

2. Pelo atalho de localização do teclado, encontre a linha .product-item--price { no arquivo:

.product-item--price {
  @include clearfix;
  .h1 {
    margin-bottom: $gutter/2;
  }
  span {
    line-height: 22px;
  }
  small {
    white-space: nowrap;
  }
}

1. Substitua o código pelo snippet de código a seguir:

.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;
  }
}

Após as edições, o arquivo theme.scss.liquid deve aparecer desta forma:

1. Clique em Salvar para confirmar suas alterações.

Editar o código do tema em JavaScript

1. Localize e clique para expandir a pasta Ativos e selecione o arquivo theme.js.liquid.

2. Pelo atalho de localização do teclado, encontre a linha originalSelectorId: 'productSelect-' + sectionId, no arquivo:

selectors: {
  originalSelectorId: 'productSelect-' + sectionId,
  $addToCart: $('#addToCart-' + sectionId),
  $SKU: $('.variant-sku', this.$container),
  $productPrice: $('#productPrice-' + sectionId),
  $comparePrice: $('#comparePrice-' + sectionId),
  $addToCartText: $('#addToCartText-' + sectionId),
  $quantityElements: $('#quantity-selector-' + sectionId),
  $variantQuantity: $('#variantQuantity-' + sectionId),
  $variantQuantityMessage: $('#variantQuantity-' + sectionId + '__message'),
  $variantIncoming: $('#variantIncoming-' + sectionId),
  $variantIncomingMessage: $('#variantIncoming-' + sectionId + '__message'),
  $productImageContainer: $('#productPhotoContainer-' + sectionId),
  $productImageWrapper: $('[id^="productPhotoWrapper-' + sectionId + '"]'),
  $productImage: $('[id^="productPhotoImg-' + sectionId + '"]'),
  $productFullDetails: $('.full-details', this.$container),
  $thumbImages: $('#productThumbs-' + sectionId).find('a.product-photo-thumb'),
  $shopifyPaymentButton: '.shopify-payment-button'
}

1. Acima do código originalSelectorId: 'productSelect-' + sectionId, da etapa 2, adicione o seguinte:

unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',

Após as edições, o resultado deve ser aparecer desta forma:

1. Pelo atalho de localização do teclado, encontre a linha productVariantCallback: function(variant) { no arquivo:

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');
}</code></pre></figure><ol>
Abaixo do código if (variant) { da etapa 2, adicione o seguinte:

// 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');
}
Após as edições, o resultado deve ser aparecer desta forma:


Pelo atalho de localização do teclado, encontre a linha customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; no arquivo:

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

Substitua a linha customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; pelo seguinte snippet de código:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
Após as edições, o resultado deve ser aparecer desta forma:


Pelo atalho de localização do teclado, encontre a linha $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); no arquivo:

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

Abaixo do snippet de código da etapa 11, adicione o código a seguir:

},

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;
Após as edições, o resultado deve ser aparecer desta forma:


Clique em Salvar para confirmar suas alterações.

Editar arquivo de idioma do tema

Localize e clique para expandir a pasta Locais e selecione o arquivo de en.default.json.

Pelo atalho de localização do teclado, encontre a linha com "refresh_page" no arquivo:


"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},

Acima do código "refresh_page" da etapa 2, adicione o seguinte:

"unit_price_separator": "per",
Após as edições, o resultado deve ser aparecer desta forma:


Pelo atalho de localização do teclado, encontre a linha com "will_be_in_stock_after" no arquivo:

"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"
}

Abaixo do código "will_be_in_stock_after" da etapa 5, adicione o seguinte:

"unit_price_label": "Unit price",
Após as edições, o resultado deve ser aparecer desta forma:


Clique em Salvar para confirmar suas alterações.

Opcional: adicionar traduções para outros idiomas

Acesse a página Temas em seu admin da Shopify.

Clique no botão … > Editar conteúdo do tema-padrão.

Clique em Alterar idioma do tema, depois selecione o idioma que deseja editar. Só é possível fazer isso no tema publicado.

Pesquise Unit Price na barra de entrada.

Atualize o campo Separador de preço unitário em Geral/Acessibilidade.

Atualize o campo Etiqueta de preço unitário em Produtos/Produto.

Clique em Salvar.

Exibir preços unitários nas notificações de pedido

Por padrão, a notificação de confirmação de pedido exibe preços unitários quando o recurso está ativo.

Caso você tenha adicionado preços unitários ao produto, mas eles não aparecem nas notificações de confirmação de pedido, talvez seja necessário atualizar manualmente o modelo.

Etapas:

1. No admin da Shopify, acesse Configurações > Notificações.

2. Na seção Pedidos, clique em Confirmação de pedido.

3. Clique em Editar código.

4. Adicione o seguinte snippet ao modelo da classe "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 -%}

 5. Clique em Salvar.

Dica

Realize um pedido de teste em sua loja para confirmar se a notificação de pedido está exibindo o preço unitário.