Mostrar precios unitarios

Nota

Esta guía es relevante solo para los comerciantes que venden en Francia. Si vendes productos en Francia, pero el negocio no está ubicado en ese país, contacta a atención al cliente de Shopify para activar esta función.

Si vendes productos en cantidades o medidas, es posible que debas mostrar el precio unitario de ciertos productos. Cuando colocas un precio unitario a un producto, el precio unitario se muestra en las páginas del producto, páginas de colección, la página del carrito, las páginas de pago y las notificaciones de confirmación de pedido.

Agrega precios unitarios a tus productos

Escritorio

1. Desde tu panel de control de Shopify, ve a Productos.

2. Haz clic en el producto que deseas editar.

3. Opcional: Si el producto tiene variantes, en la sección Variantes, haz clic en la variante que desees editar.

4. En la sección Precios, selecciona Mostrar precio unitario para este producto.

5. En el campo Medida total del producto, introduce la medida total del producto y luego selecciona la unidad de medida.

6. Opcional: En el campo Medida base, agrega la medida base y luego selecciona la unidad de medida. Por ejemplo, para un producto que pesa 1 kg, podrías seleccionar una unidad base de 100 g.

7. Haz clic en Guardar.

iPhone

1. Desde la app de Shopify, ve a Productos > Todos los productos.
2. Toca el producto que deseas editar.
3. Toca la sección de precio del producto.
4. Selecciona Mostrar precio unitario.
5. En el campo Medida total del producto, introduce la medida total del producto y luego selecciona la unidad de medida.
6. Opcional: En el campo Medida base, agrega la medida base y luego selecciona la unidad de medida. Por ejemplo, para un producto que pesa 1 kg, podrías seleccionar una unidad base de 100 g.
7. Toca Guardar.

Android

1. Desde la app de Shopify, ve a Productos > Todos los productos.
2. Toca el producto que deseas editar.
3. Toca la sección de precio del producto.
4. Selecciona Mostrar precio unitario.
5. En el campo Medida total del producto, introduce la medida total del producto y luego selecciona la unidad de medida.
6. Opcional: En el campo Medida base, agrega la medida base y luego selecciona la unidad de medida. Por ejemplo, para un producto que pesa 1 kg, podrías seleccionar una unidad base de 100 g.
7. Toca ✓.

Mostrar precios unitarios en la tienda online

Todos los temas de Online Store 2.0 ya tienen disponible la función de precio unitario. No se requiere ninguna acción para mostrar los precios unitarios en la tienda online.

Si tienes un tema vintage y no puedes actualizarlo a una versión compatible con la función de precio unitario, puedes personalizar manualmente el código del tema para mostrar el precio unitario.

Mostrar precios unitarios en un tema vintage

Precaución

Haz una copia de seguridad del tema antes de comenzar a editar el código. Las siguientes son instrucciones avanzadas. Si necesitas ayuda para agregar la función al tema, considera la opción de obtener asistencia con las personalizaciones.

Los pasos para esta personalización varían según tu tema. Haz clic en el botón de tu tema antes de seguir las instrucciones a continuación:

Debut

Pasos para Debut

Los precios unitarios están disponibles en el tema Debut para las versiones 12.1.0 y posteriores. Si no puedes actualizar tu tema a la última versión, puedes agregar la personalización de los precios unitarios a las versiones anteriores de Debut.

Editar el fragmento del precio de tu producto

1. En el directorio Fragmentos, haz clic en el archivo product-price.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando data-price:

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando price__sale:

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

1. Agrega el siguiente código bajo la etiqueta </div> de cierre:

{% 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. Haz clic en Guardar para confirmar tus cambios.

Editar tu página del carrito

1. En el directorio Secciones, haz clic en el archivo cart-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando cart__price-wrapper:

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo cart-template.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu página de colección

1. En el directorio Secciones, haz clic en el archivo collection.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando grid-view-item__title:

{% include 'product-price' %}

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo collection.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu cuadrícula de tarjetas de productos

1. En el directorio Fragmentos, haz clic en el archivo product-card-grid.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando grid-view-item__title:

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo product-card-grid.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu lista de tarjetas de productos

1. En el directorio Fragmentos, haz clic en el archivo product-card-list.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando {% if product.available %}:

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo product-card-list.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu página de pedido

1. En el directorio Plantillas, haz clic en el archivo customers/order.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando data-label="{{ 'customer.order.price' | t }}":

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo customers/order.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar los estilos de tu tema

1. En el directorio Recursos, haz clic en el archivo theme.scss.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando .price__vendor {:

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

1. Agrega el siguiente fragmento bajo el código del paso 2:

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

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

Después de editado, el archivo theme.scss.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el código de tu tema JavaScript

1. En el directorio Recursos, haz clic en el archivo theme.js.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

salePrice: '[data-sale-price]'

1. Agrega el siguiente fragmento sobre el código del paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

productOnSale: 'price--on-sale',

1. Agrega el siguiente fragmento después del código del paso 4:

productUnitAvailable: 'price--unit-available',

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Reemplaza el código con el siguiente fragmento:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

var salePrice = '';

1. Agrega el siguiente fragmento bajo el código del paso 8:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

.replace('[$]', salePrice)

1. Agrega el siguiente fragmento bajo el código del paso 10:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

_updatePrice: function(evt) {

1. Agrega el siguiente fragmento antes del código del paso 12:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento bajo el código del paso 14:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

.removeClass(this.classes.productOnSale)

1. Agrega el siguiente fragmento bajo el código del paso 16:

.removeClass(this.classes.productUnitAvailable)

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento bajo el código del paso 18:

// Unit price
if (variant.unit_price_measurement) {
  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat)
  );
  $unitPriceBaseUnit.html(this._getBaseUnit(variant));
  $priceContainer.addClass(this.classes.productUnitAvailable);
}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tus traducciones en inglés

1. En el directorio Regiones, haz clic en el archivo en.default.json.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento sobre el código del paso 2:

"unit_price_separator": "per",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

"include_taxes": "Tax included.",

1. Agrega el siguiente fragmento bajo el código del paso 4:

"unit_price_label": "Unit price",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el diseño de tu tema

1. En el directorio Diseño, haz clic en el archivo theme.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento bajo el código del paso 2:

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

Después de editado, el archivo theme.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

(Opcional) Agregar traducciones para otros idiomas

1. Ve a la página Temas en tu panel de control de Shopify.

2. Haz clic en el botón ... > Editar contenido de tema predeterminado.

3. Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.

4. Introduce Unit Price en el campo de búsqueda.

5. Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.

6. Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.

7. Haz clic en Guardar.

Brooklyn

Pasos para Brooklyn

Los precios unitarios están disponibles en el tema Brooklyn para las versiones 13.1.0 y posteriores. Si no puedes actualizar tu tema a la última versión, puedes agregar la personalización de los precios unitarios a las versiones anteriores de Brooklyn.

Agregar un fragmento de código de precio del producto

1. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.

2. Introduce product-price en el campo del nombre.

3. Copia y pega el siguiente código en el archivo.

<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. Haz clic en Guardar para confirmar tus cambios.

Editar la página de tu producto destacado

1. En el directorio Secciones, haz clic en el archivo featured-product.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando itemprop="offers":

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo featured-product.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu página de producto

1. En el directorio Secciones, haz clic en el archivo product-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando itemprop="offers":

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo product-template.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu carrito Ajax

1. En el directorio Fragmentos, haz clic en el archivo ajax-cart-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando <span class="ajaxcart__price">{{{price}}}</span>:

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

1. Agrega el siguiente código en la {{/if}} del paso 2:

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

Después de editado, el archivo ajax-cart-template.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu artículo de la cuadrícula de producto

1. En el directorio Fragmentos, haz clic en el archivo product-grid-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando capture img_id_class:

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

1. Agrega el siguiente fragmento antes del código del paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando {{ product.price | money_without_trailing_zeros }}:

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

1. Agrega el siguiente código bajo el </span>:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu página del carrito

1. En el directorio Plantillas, haz clic en el archivo cart.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando <span class="cart__price">:

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

Nota

Si tienes una versión más antigua del tema, es posible que no puedas encontrar este fragmento. En ese caso, agrega el código del paso 3 directamente debajo del elemento <span class="cart__price">.

1. Agrega el siguiente fragmento bajo el código del paso 2:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Después de editado, el archivo cart.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu página de pedido

1. En el directorio Plantillas, haz clic en el archivo customers/order.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando {{ line_item.original_price | money }}:

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

1. Agrega el siguiente fragmento antes de la </td> del paso 2:

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

Después de editado, el archivo customers/order.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tus estilos de tema - Parte 1

1. En el directorio Recursos, haz clic en el archivo theme.scss.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando .ajaxcart__price {:

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

1. Agrega el siguiente fragmento bajo el código del paso 2:

.cart__unit-price {
    display: block;
}

Después de editado, el archivo theme.scss.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tus estilos de tema - Parte 2

1. En el directorio Recursos, haz clic en el archivo timber.scss.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando .product-single__policies {:

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

1. Agrega el siguiente fragmento sobre el código del paso 2:

.product-single__unit {
  display: none;

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Ve al final del archivo y agrega el siguiente código:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el código de tu tema de JavaScript

1. En el directorio Recursos, haz clic en el archivo theme.js.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

var prodImg;

1. Agrega el siguiente fragmento bajo el código del paso 2:

var unitPrice = null;

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento sobre el código del paso 4:

if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      settings.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

vendor: cartItem.vendor

1. Agrega el siguiente fragmento sobre el código del paso 6:

unitPrice: unitPrice,

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

productPrice: '#ProductPrice',

1. Agrega el siguiente fragmento bajo el código del paso 8:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando $(this.selectors.priceContainer, this.$container).removeClass(:

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento sobre el código del paso 12:

if (variant.unit_price_measurement) {
  var $unitPrice = $(this.selectors.unitPrice, this.$container);
  var $unitPriceBaseUnit = $(
    this.selectors.unitPriceBaseUnit,
    this.$container
  );

  $unitPrice.html(
    theme.Currency.formatMoney(variant.unit_price, moneyFormat)
  );
  $unitPriceBaseUnit.html(this.getBaseUnit(variant));

  $(this.selectors.priceContainer, this.$container).addClass(
    'price-container--unit-available'
  );
}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando this.destroyImageCarousel();:

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

1. Agrega el siguiente fragmento sobre el código del paso 14:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tus traducciones en inglés

1. En el directorio Regiones, haz clic en el archivo en.default.json.

2. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

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

1. Agrega el siguiente fragmento sobre el código del paso 2:

"unit_price_separator": "per",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:

"include_taxes": "Tax included.",

1. Agrega el siguiente fragmento bajo el código del paso 4:

"unit_price": "Unit price",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

(Opcional) Agregar traducciones para otros idiomas

1. Ve a la página Temas en tu panel de control de Shopify.

2. Haz clic en el botón ... > Editar contenido de tema predeterminado.

3. Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.

4. Introduce Unit Price en el campo de búsqueda.

5. Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.

6. Actualiza el campo Etiqueta de precio unitario en Productos / General.

7. Haz clic en Guardar.

Minimal

Pasos para Minimal

Los precios unitarios están disponibles en el tema Minimal para las versiones 11.2.0 y posteriores. Si no puedes actualizar tu tema a la última versión, puedes agregar la personalización de los precios unitarios a las versiones anteriores de Minimal.

Actualizar tus fragmentos

1. Ubica y expande la carpeta Fragmentos.

2. Selecciona Agregar un nuevo fragmento.

3. Introduce el nombre product-unit-price.

4. Copia y pega el siguiente código en 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. Haz clic en Guardar.

2. Encuentra y edita el archivo product-grid-item.liquid.

3. Reemplaza esta línea:

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

Con esta línea:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar {{ price }} y agregar este siguiente código:

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

Después de editado, el archivo product-grid-item.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

2. Ubica y edita el archivo search-result.liquid

3. Usa el acceso directo del teclado Búsqueda para ubicar {% if item.object_type == 'product' %} y agregar el siguiente código en la siguiente línea:

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

1. Ahora usa el acceso directo del teclado Búsqueda para ubicar los siguientes dos fragmentos de código:

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

Y

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

1. Agrega el siguiente bloque de código debajo de cada uno de los dos fragmentos de código que se enumeran en el paso anterior:

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

Después de editado, el archivo search-result.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar tus estilos

1. Ubica y expande la carpeta Recursos.

2. Edita el archivo theme.scss.liquid.

3. Usa el atajo de teclado Buscar para ubicar este fragmento de código:

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

1. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

font-family: $headerFontStack;

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente fragmento de código:

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

1. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente fragmento de código:

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

1. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el siguiente fragmento de código:

.cart__product-title {
  display: inline-block;

1. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

font-weight: $bodyFontWeightBold;

Después de editado, el archivo theme.scss.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

2. Ubica y edita el archivo timber.scss.liquid.

3. Usa el acceso directo del teclado Búsqueda para ubicar este código:

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

1. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

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

1. Introduce este código al final del archivo:

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

Después de editado, el archivo timber.scss.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar tus plantillas

1. Ubica y expande la carpeta Plantillas.

2. Ubica y edita el archivo customers/order.liquid.

3. Usa el acceso directo del teclado Búsqueda para ubicar el código:

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

1. Agrega este código debajo del código del paso 3:

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

Después de editado, el archivo customers/order.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar tu JavaScript

1. Ubica y edita theme.js en Recursos.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene .shopify-payment-button y remplazarla con:

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

Ese trozo de código debería tener el siguiente aspecto:

1. Busca este código:

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

1. Agrega este código debajo de él:

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

El resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar este código:

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

1. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

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

El resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar tu plantilla de carrito

1. Ubica y expande la carpeta Secciones.

2. Edita el archivo cart-template.liquid.

3. Usa el atajo de teclado Buscar para ubicar el código <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Reemplaza la línea con este código:

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

1. Encuentra la primera aparición del 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. Agrega este trozo de código sobre el código del paso 5:

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

Después de editado, el archivo cart-template.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar tu producto destacado

1. Ubica y expande la carpeta Secciones.

2. Edita el archivo featured-product.liquid.

3. Usa el acceso directo del teclado Búsqueda para ubicar la línea con itemprop="name" y remplazarla por:

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

1. Ubica el código que contiene 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. Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:

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

Después de editado, el archivo featured-product.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar tu plantilla de producto

1. Ubica y expande la carpeta Secciones.

2. Edita el archivo product-template.liquid.

3. Usa el acceso directo del teclado Búsqueda para ubicar la línea con itemprop="name" y remplazarla con:

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

1. Usa el acceso directo del teclado Búsqueda para ubicar el código:

{% 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. Agrega esta línea a continuación:

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

Después de editado, el archivo product-template.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Actualizar las regiones

1. Ubica y expande la carpeta Regiones.

2. Abre y edita el archivo en.default.json.

3. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene refresh_page y remplazarla con:

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

El resultado debería tener el siguiente aspecto:

1. Ubica la línea que contiene full_details y remplázala por:

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

El resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

(Opcional) Agregar traducciones para otros idiomas

1. Ve a la página Temas en tu panel de control de Shopify.

2. Haz clic en el botón ... > Editar contenido de tema predeterminado.

3. Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.

4. Introduce Unit Price en el campo de búsqueda.

5. Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.

6. Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.

7. Haz clic en Guardar.

Venture

Pasos para Venture

Los precios unitarios se agregaron al tema Venture para las versiones 9.4.0 y posteriores. Si no puedes actualizar tu tema a la última versión, sigue estos pasos para personalizar el precio unitario a las versiones anteriores de Venture.

Editar el archivo de idioma de tu tema

1. En el directorio Regiones, haz clic en en.default.json.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene refresh_page:

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

1. Agrega el siguiente código sobre la línea que se encuentra en el paso 2:

"unit_price_separator": "per",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene stock_unavailable:

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

1. Agrega el siguiente código sobre la línea que se encuentra en el paso 4:

"unit_price_label": "Unit price",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la hoja de estilo de tu tema

1. En el directorio Componentes, haz clic en theme.scss.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea .product-single__policies {:

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

1. Agrega el siguiente código debajo de la etiqueta de cierre } del bloque de código que se encuentra en el paso 2:

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

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

Después de editado, el archivo theme.scss.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Agrega el fragmento del precio unitario del producto

1. En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.

2. Introduce el nombre product-unit-price.

3. Agrega el siguiente código en 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. Haz clic en Guardar para confirmar tus cambios.

Editar el fragmento de tu tarjeta de producto

1. En el directorio Fragmentos, haz clic en product-card.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea <a href="{{ product.url | within: collection }}".

3. Agrega el siguiente código sobre la línea que se encuentra en el paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea <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. Agrega el siguiente código encima de la etiqueta de </div> de cierre que se ubicó en el paso 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 -%}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la plantilla de tu página del carrito

1. En el directorio Secciones, haz clic en cart-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la primera instancia 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. Agrega el siguiente código debajo de la etiqueta endif que se ubicó en el paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la segunda instancia 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. Agrega el siguiente código debajo de la segunda etiqueta de de cierre {{/if}} que se ubicó en el paso 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}}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la plantilla de tu producto destacado

1. En el directorio Secciones, haz clic en featured-product.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea {% assign current_variant = product.selected_or_first_available_variant %}.

3. Agrega el siguiente código sobre la línea que se ubicó en el paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene <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. Debajo de esta etiqueta ul, ubica el código {% if section.settings.stock_enable %}.

2. Agrega el siguiente código por encima del bloque if que se ubicó en el paso 6:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la plantilla de tu página de producto

1. En el directorio Secciones, haz clic en product-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea {% assign current_variant = product.selected_or_first_available_variant %}.

3. Agrega el siguiente código sobre la línea que se ubicó en el paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene <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. Debajo de esta etiqueta ul, ubica el código {% if section.settings.stock_enable %}.

2. Agrega el siguiente código por encima del bloque if que se ubicó en el paso 5:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la plantilla de pedido de tus clientes

1. En el directorio Templates, haz clic en customers/order.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea <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. Reemplaza el código ubicado en el paso 2 con el siguiente 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>

Después de editado, el archivo customers/order.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Edita el archivo JavaScript de tu tema

1. En el directorio Componentes, haz clic en theme.js.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea // Create item's data object and add to 'items' array.

3. Agrega el siguiente código sobre la línea que se encuentra en el paso 2:

var unitPrice = null;
if (cartItem.unit_price_measurement) {
  unitPrice = {
    addRefererenceValue:
      cartItem.unit_price_measurement.reference_value !== 1,
    price: theme.Currency.formatMoney(
      cartItem.unit_price,
      theme.moneyFormat
    ),
    reference_value: cartItem.unit_price_measurement.reference_value,
    reference_unit: cartItem.unit_price_measurement.reference_unit
  };
}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Utilice el acceso directo del teclado Búsqueda para ubicar la línea vendor: cartItem.vendor,

2. Agrega el siguiente código sobre la línea que se ubicó en el paso 4:

unitPrice: unitPrice,

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea shopifyPaymentButton: '.shopify-payment-button'.

2. Reemplaza la línea que se ubicó en el paso 6 con el siguiente código:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea _updateSKU: function(evt) {.

2. Agrega el siguiente código sobre la línea que se encuentra en el paso 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;
},

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea 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. Agrega el siguiente código debajo de la etiqueta } de cierre que se ubicó en el paso 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'
  );
}

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

(Opcional) Agregar traducciones para otros idiomas

1. Ve a la página Temas en tu panel de control de Shopify.

2. Haz clic en el botón ... > Editar contenido de tema predeterminado.

3. Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.

4. Introduce Unit Price en el campo de búsqueda.

5. Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.

6. Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.

7. Haz clic en Guardar.

Supply

Pasos para Supply

Los precios unitarios se agregaron al tema Supply para las versiones 8.3.0 y posteriores. Si no puedes actualizar tu tema a la última versión, sigue estos pasos para personalizar el precio unitario a las versiones anteriores de Supply.

Agrega el fragmento del precio unitario del producto

1. Ubica y expande la carpeta Fragmentos.

2. Selecciona Agregar un nuevo fragmento.

3. Introduce el nombre product-unit-price.

4. Copia y pega el siguiente código en el archivo y selecciona Guardar.

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

Después de editado, el archivo product-unit-price.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la plantilla de tu producto destacado

1. Ubica y expande la carpeta Secciones luego selecciona el archivo featured-product.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea {% include 'price' with price %} en el archivo:

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

1. Agrega el siguiente código bajo el </span> de cierre del fragmento del paso 2:

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

Después de editado, el archivo featured-product.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar la plantilla de tu producto

1. Ubica y expande la carpeta Secciones luego selecciona el archivo product-template.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea {% include 'price' with variant.price %} en el archivo:

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

1. Agrega el siguiente código bajo el </span> de cierre del paso 2:

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

Después de editado, el archivo product-template.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el fragmento de tu artículo de cuadrícula de producto

1. Ubica y expande la carpeta Fragmentos y luego selecciona el archivo product-grid-item.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea {% if on_sale and section.settings.product_show_saved_amount %} en el archivo:

{% 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. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo product-grid-item.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el fragmento de artículo de la lista de productos

1. Ubica y expande la carpeta Fragmentos y luego selecciona el archivo product-list-item.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea <div class="product-item--price text-center"> en el archivo:

<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. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo product-list-item.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el fragmento de la cuadrícula de resultados de búsqueda

1. Ubica y expande la carpeta Fragmentos y luego selecciona el archivo search-result-grid.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea {% if on_sale and section.settings.product_show_saved_amount %} en el archivo:

{% 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. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo search-result-grid.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu plantilla de carrito

1. Ubica y expande la carpeta Plantillas y luego selecciona el archivo cart.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea <del class="cart-original-price order-discount--cart-price"> en el archivo:

<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. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo cart.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar tu plantilla de pedido

1. Ubica y expande la carpeta Plantillas y luego selecciona el archivo customers/order.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea <td class="text-right" data-label="customer.order.price"> en el archivo:

<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. Agrega el siguiente código por encima de la </td> de cierre del paso 2:

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

Después de editado, el archivo customers/order.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el diseño de tu tema

1. Ubica y expande la carpeta Diseño y luego selecciona el archivo theme.liquid .

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene only_left: en el archivo:

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. Agrega el código de arriba only_left:{{ 'products.product.only_left' | t: count: '1' | json }} del paso 2:

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

Después de editado, el archivo theme.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar los estilos de tu tema

1. Ubica y expande la carpeta Secciones luego selecciona el archivo theme.scss.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea .product-item--price { en el archivo:

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

1. Reemplaza el código con el siguiente fragmento:

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

Después de editado, el archivo theme.scss.liquid debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el código de tu tema de JavaScript

1. Ubica y expande la carpeta Recursos y luego selecciona el archivo de theme.js.liquid.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea originalSelectorId: 'productSelect-' + sectionId, en el archivo:

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. Agrega el código arriba originalSelectorId: 'productSelect-' + sectionId, del paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea productVariantCallback: function(variant) { en el archivo:

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. Agrega el siguiente código bajo if (variant) { del paso 2:

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; en el archivo:

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. Reemplaza la línea customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; con el siguiente fragmento:

customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); en el archivo:

} 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. Agrega el siguiente código debajo del fragmento del paso 11:

},

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

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

Editar el archivo de idioma de tu tema

1. Ubica y expande la carpeta Regiones y luego selecciona el archivo en.default.json.

2. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene "refresh_page" en el archivo:

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

1. Agrega el código arriba "refresh_page" del paso 2:

"unit_price_separator": "per",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Usa el acceso directo del teclado Búsqueda para ubicar la línea que contiene "will_be_in_stock_after" en el archivo:

"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. Agrega el siguiente código después de "will_be_in_stock_after" del paso 5:

"unit_price_label": "Unit price",

Después de editado, el resultado debería tener el siguiente aspecto:

1. Haz clic en Guardar para confirmar tus cambios.

(Opcional) Agregar traducciones para otros idiomas

1. Ve a la página Temas en tu panel de control de Shopify.

2. Haz clic en el botón ... > Editar contenido de tema predeterminado.

3. Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.

4. Busca Unit Price en la barra de entrada.

5. Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.

6. Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.

7. Haz clic en Guardar.

Mostrar precios unitarios en las notificaciones de pedido

De forma predeterminada, la notificación de confirmación de pedido muestra los precios unitarios cuando la función está activa.

Si agregaste precios unitarios al producto, pero estos no aparecen en las notificaciones de confirmación de pedido, es posible que debas modificar manualmente la plantilla.

Pasos:

1. Desde tu panel de control de Shopify, ve a Configuración > Notificaciones.

2. En la sección Pedidos, haz clic en Confirmación de pedido.

3. Haz clic en Editar código.

4. Agrega el siguiente fragmento a la plantilla dentro de la clase "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. Haz clic en Guardar.

Consejo

Realiza un pedido de prueba en la tienda para confirmar si la notificación de pedido muestra el precio unitario.