Exibição de preços unitários

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

Exibir preços unitários na sua loja virtual

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

Passos 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 expanda a pasta snippets.

  2. Selecione Adicionar novo snippet.

  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 ficar assim:

A versão atualizada do arquivo

  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 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 ficar assim:

A versão atualizada do arquivo

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

Atualizar estilos

  1. Localize e expanda a pasta Ativos.

  2. Edite o arquivo theme.scss.liquid.

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

.grid-link__title,
  .grid-link__meta {
    position: relative;
    margin-bottom: 5px;
  1. Abaixo do snippet 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 a seguir:
.grid-link__sale_price {
    opacity: 0.95;
    filter: alpha(opacity=95);
  }
  1. Abaixo do snippet 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 a seguir:
.order-discount--list {
    margin: 0.8em 0 0.6em 1.3em;
    list-style: none;
    padding: 0;
  }
  1. Abaixo do snippet 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 a seguir:
.cart__product-title {
    display: inline-block;
  1. Abaixo do snippet 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 ficar assim:

A versão atualizada do arquivo
A versão atualizada do arquivo
A versão atualizada do arquivo

  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 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 ficar assim:

A versão atualizada do arquivo
A versão atualizada do arquivo

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

Atualizar modelos

  1. Localize e expanda 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 ficar assim:

A versão atualizada do arquivo

  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 que contém .shopify-payment-button e substitua ela 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 precisa ficar assim:

A versão atualizada do arquivo

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

A versão atualizada do arquivo

  1. Pelo atalho de localização do teclado, encontre o seguinte código:
.attr('data-zoom')
    });
  });
  1. Abaixo do snippet 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 este:

A versão atualizada do arquivo

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

Atualizar modelo de carrinho

  1. Localize e expanda a pasta Seções.

  2. Edite o arquivo cart-template.liquid.

  3. Pelo atalho de localização do teclado, encontre 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 ficar assim:

A versão atualizada do arquivo

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

Atualizar produto em destaque

  1. Localize e expanda a pasta Seções.

  2. Edite o arquivo featured-product.liquid.

  3. Pelo atalho de localização do teclado, encontre a linha que contém itemprop="name" e substitua ela 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 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 ficar assim:

A versão atualizada do arquivo

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

Atualizar modelo de produto

  1. Localize e expanda a pasta Seções.

  2. Edite o arquivo product-template.liquid.

  3. Pelo atalho de localização do teclado, encontre a linha que contém itemprop="name" e 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 ficar assim:

A versão atualizada do arquivo

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

Atualizar locais

  1. Localize e expanda a pasta Locais.

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

  3. Pelo atalho de localização do teclado, encontre a linha que contém refresh_page e substitua ela por:

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

O resultado deve ser este:

A versão atualizada do arquivo

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

A versão atualizada do arquivo

  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 em Ação > Editar idioma.

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

Botão Alterar idioma

  1. Insira Unit Price no campo de pesquisa.

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

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

Campos atualizados

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 Locais, clique em en.default.json.

  2. Pelo atalho de localização do teclado, encontre a linha que contém 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 ficar assim:

A versão atualizada do arquivo

  1. Pelo atalho de localização do teclado, encontre a linha que contém 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 ficar assim:

A versão atualizada do arquivo

  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 ficar assim:

A versão atualizada do arquivo

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

Adicionar snippet para preço unitário de produto

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

  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 do cartão de produto

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

  2. Use o atalho de teclado de busca para localizar 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 ficar assim:

A versão atualizada do arquivo product-card.liquid

  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 ficar assim:

A versão atualizada do arquivo product-card.liquid

  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 localizar 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 ficar assim:

A versão atualizada do arquivo

  1. Use o atalho de localização do teclado para localizar a segunda instâ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 ficar assim:

A versão atualizada do arquivo

  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 teclado de busca para localizar 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 ficar assim:

A versão atualizada do arquivo

  1. Pelo atalho de localização do teclado, encontre a linha que contém <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 ficar assim:

Versão atualizada do arquivo featured-product.liquid

  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 teclado de busca para localizar 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 ficar assim:

Versão atualizada do arquivo product-template.liquid

  1. Pelo atalho de localização do teclado, encontre a linha que contém <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 ficar assim:

Versão atualizada do arquivo product-template.liquid

  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 teclado de busca para localizar 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 ficar assim:

Versão atualizada do arquivo customers/order.liquid

  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 teclado de busca para localizar 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 ficar assim:

Versão atualizada do arquivo theme. js

  1. Use o atalho de teclado de busca para localizar 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 ficar assim:

Versão atualizada do arquivo theme. js

  1. Use o atalho de teclado de busca para localizar 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 ficar assim:

Versão atualizada do arquivo theme. js

  1. Use o atalho de teclado de busca para localizar 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 ficar assim:

Versão atualizada do arquivo theme. js

  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 ficar assim:

Versão atualizada do arquivo theme. js

  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 em Ação > Editar idioma.

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

Seleção de idioma do tema

  1. Insira Unit Price no campo de pesquisa.

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

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

Traduções atualizadas de preços unitários

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 para preço unitário de produto

  1. Localize e expanda a pasta snippets.

  2. Selecione Adicionar novo snippet.

  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 ficar assim:

A versão atualizada do arquivo

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

Editar modelo de produto em destaque

  1. Localize e expanda 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 da etapa 2, adicione o seguinte:
{% include 'product-unit-price' variant: variant %}

Após as edições, o arquivo featured-product.liquid deve ficar assim:

A versão atualizada do arquivo

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

Editar modelo de produto

  1. Localize e expanda 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 ficar assim:

A versão atualizada do arquivo

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

Editar snippet para item da grade de produtos

  1. Localize e expanda 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 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 ficar assim:

A versão atualizada do arquivo

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

Editar snippet para item da lista de produtos

  1. Localize e expanda 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 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 ficar assim:

A versão atualizada do arquivo

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

Editar snippet para grade de resultados de pesquisa

  1. Localize e expanda 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 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 ficar assim:

A versão atualizada do arquivo

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

Editar modelo de carrinho

  1. Localize e expanda 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 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 ficar assim:

A versão atualizada do arquivo

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

Editar modelo de pedido

  1. Localize e expanda 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 ficar assim:

A versão atualizada do arquivo

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

Editar o layout do tema

  1. Localize e expanda a pasta Layout e selecione o arquivo theme.liquid.

  2. Pelo atalho de localização do teclado, encontre a linha que contém 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 ficar assim:

A versão atualizada do arquivo

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

Editar os estilos do tema

  1. Localize e expanda 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 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 ficar assim:

A versão atualizada do arquivo

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

Editar o código do tema em JavaScript

  1. Localize e expanda 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 ficar assim:

A versão atualizada do arquivo

  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');
    }
  1. 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 ficar assim:

A versão atualizada do arquivo

  1. 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>';
  1. Substitua a linha customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; pelo seguinte snippet:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

Após as edições, o resultado deve ficar assim:

A versão atualizada do arquivo

  1. 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();
}
  1. Abaixo do snippet 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 ficar assim:

A versão atualizada do arquivo

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

Editar arquivo de idioma do tema

  1. Localize e expanda a pasta Locais e selecione o arquivo de en.default.json.

  2. Pelo atalho de localização do teclado, encontre a linha que contém "refresh_page" no arquivo:

"accessibility": {
  "refresh_page": "choosing a selection results in a full page refresh"
},
  1. Acima do código "refresh_page" da etapa 2, adicione o seguinte:
"unit_price_separator": "per",

Após as edições, o resultado deve ficar assim:

A versão atualizada do arquivo

  1. Pelo atalho de localização do teclado, encontre a linha que contém "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"
}
  1. 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 ficar assim:

A versão atualizada do arquivo

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

Opcional: adicionar traduções para outros idiomas

  1. Acesse a página "Temas".

  2. Selecione Ação > Editar idiomas.

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

Etapa opcional 3

  1. Pesquise "Preço unitário" na barra de entrada.

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

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

Etapa opcional 6

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

Se você adicionou preços unitários ao seu produto, mas os preços unitários não estão aparecendo nas notificações de confirmação do pedido, talvez seja necessário atualizar o modelo de notificação do pedido.

Etapas:

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

  2. Clique em Confirmação do pedido.

  3. Adicione o seguinte snippet ao modelo:

{%- if line_item.unit_price_measurement -%}
    {{ line_item.unit_price | money }}
    {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
    {%- endif -%}
    {{ line_item.unit_price_measurement.reference_unit }}
  {%- endif -%}
  1. Clique em Salvar.

Pronto para começar a vender com a Shopify?

Experimente de graça