Mostrar precios unitarios
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.
En esta página
Agrega precios unitarios a tus productos
Escritorio
Desde tu panel de control de Shopify, ve a Productos.
Haz clic en el producto que deseas editar.
Opcional: Si el producto tiene variantes, en la sección Variantes, haz clic en la variante que desees editar.
En la sección Precios, selecciona Mostrar precio unitario para este producto.
En el campo Medida total del producto, introduce la medida total del producto y luego selecciona la unidad de medida.
Opcional: si deseas cambiar la medida base predeterminada, en el campo Medida base, agrega tu nueva medida y luego selecciona una unidad de medida. Por ejemplo, para un producto de prueba de 200 g, puedes seleccionar una unidad base de 1 kg.
Haz clic en Guardar.
iPhone
- Desde la app de Shopify, ve a Productos > Todos los productos.
- Toca el producto que deseas editar.
- Toca la sección de precio del producto.
- Selecciona Mostrar precio unitario.
- En el campo Medida total del producto, introduce la medida total del producto y luego selecciona la unidad de medida.
- Opcional: si deseas cambiar la medida base predeterminada, en el campo Medida base, agrega tu nueva medida y luego selecciona una unidad de medida. Por ejemplo, para un producto de prueba de 200 g, puedes seleccionar una unidad base de 1 kg.
- Toca Guardar.
Android
- Desde la app de Shopify, ve a Productos > Todos los productos.
- Toca el producto que deseas editar.
- Toca la sección de precio del producto.
- Selecciona Mostrar precio unitario.
- En el campo Medida total del producto, introduce la medida total del producto y luego selecciona la unidad de medida.
- Opcional: si deseas cambiar la medida base predeterminada, en el campo Medida base, agrega tu nueva medida y luego selecciona una unidad de medida. Por ejemplo, para un producto de prueba de 200 g, puedes seleccionar una unidad base de 1 kg.
- 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
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
En el directorio Fragmentos, haz clic en el archivo
product-price.liquid
.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>
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- 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>
- 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 }} </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 %}
- Haz clic en Guardar para confirmar tus cambios.
Editar tu página del carrito
En el directorio Secciones, haz clic en el archivo
cart-template.liquid
.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 -%}
- 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 }} </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 las ediciones, el archivo cart-template.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu página de colección
En el directorio Secciones, haz clic en el archivo
collection.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando
grid-view-item__title
:
{% include 'product-price' %}
- Reemplaza el código con el siguiente fragmento:
{% include 'product-price', variant: nil %}
Después de las ediciones, el archivo collection.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu cuadrícula de tarjetas de productos
En el directorio Fragmentos, haz clic en el archivo
product-card-grid.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando
grid-view-item__title
:
{% include 'product-price', variant: product %}
- Reemplaza el código con el siguiente fragmento:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Después de las ediciones, el archivo product-card-grid.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu lista de tarjetas de productos
En el directorio Fragmentos, haz clic en el archivo
product-card-list.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código buscando
{% if product.available %}
:
{% include 'product-price', variant: product %}
- Reemplaza el código con el siguiente fragmento:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Después de las ediciones, el archivo product-card-list.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu página de pedido
En el directorio Plantillas, haz clic en el archivo
customers/order.liquid
.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 -%}
- 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 }} </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 las ediciones, el archivo customers/order.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar los estilos de tu tema
En el directorio Recursos, haz clic en el archivo
theme.scss.liquid
.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%);
}
- 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 las ediciones, el archivo theme.scss.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el código de tu tema JavaScript
En el directorio Recursos, haz clic en el archivo
theme.js
.Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
salePrice: '[data-sale-price]'
- Agrega el siguiente fragmento sobre el código del paso 2:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
productOnSale: 'price--on-sale',
- Agrega el siguiente fragmento después del código del paso 4:
productUnitAvailable: 'price--unit-available',
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- Reemplaza el código con el siguiente fragmento:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
var salePrice = '';
- 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);
}
- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
.replace('[$]', salePrice)
- Agrega el siguiente fragmento bajo el código del paso 10:
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
_updatePrice: function(evt) {
- 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;
},
- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- Agrega el siguiente fragmento bajo el código del paso 14:
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
.removeClass(this.classes.productOnSale)
- Agrega el siguiente fragmento bajo el código del paso 16:
.removeClass(this.classes.productUnitAvailable)
- 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)
);
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tus traducciones en inglés
En el directorio Regiones, haz clic en el archivo
en.default.json
.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"
- Agrega el siguiente fragmento sobre el código del paso 2:
"unit_price_separator": "per",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
"include_taxes": "Tax included.",
- Agrega el siguiente fragmento bajo el código del paso 4:
"unit_price_label": "Unit price",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el diseño de tu tema
En el directorio Diseño, haz clic en el archivo
theme.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
regularPrice: {{ 'products.product.regular_price' | t | json }},
- 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 las ediciones, el archivo theme.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
(Opcional) Agregar traducciones para otros idiomas
Ve a la página Temas en tu panel de control de Shopify.
Haz clic en el botón ... > Editar contenido de tema predeterminado.
Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.
Introduce
Unit Price
en el campo de búsqueda.Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.
Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.
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
En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.
Introduce
product-price
en el campo del nombre.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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>
- Haz clic en Guardar para confirmar tus cambios.
Editar la página de tu producto destacado
En el directorio Secciones, haz clic en el archivo
featured-product.liquid
.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>
- Reemplaza el código con el siguiente fragmento:
{% include 'product-price', variant: current_variant %}
Después de las ediciones, el archivo featured-product.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu página de producto
En el directorio Secciones, haz clic en el archivo
product-template.liquid
.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>
- Reemplaza el código con el siguiente fragmento:
{% include 'product-price', variant: current_variant %}
Después de las ediciones, el archivo product-template.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu carrito Ajax
En el directorio Fragmentos, haz clic en el archivo
ajax-cart-template.liquid
.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}}
- 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"> {{'general.accessibility.unit_price_separator' | t}} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Después de las ediciones, el archivo ajax-cart-template.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu artículo de la cuadrícula de producto
En el directorio Fragmentos, haz clic en el archivo
product-grid-template.liquid
.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.' -%}
- Agrega el siguiente fragmento antes del código del paso 2:
{%- assign variant = product.selected_or_first_available_variant -%}
Después de las ediciones, el resultado debería mostrarse de esta manera:

- 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>
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu página del carrito
En el directorio Plantillas, haz clic en el archivo
cart.liquid
.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 -%}
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Después de las ediciones, el archivo cart.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu página de pedido
En el directorio Plantillas, haz clic en el archivo
customers/order.liquid
.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>
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}
Después de las ediciones, el archivo customers/order.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tus estilos de tema - Parte 1
En el directorio Recursos, haz clic en el archivo
theme.scss.liquid
.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;
}
- Agrega el siguiente fragmento bajo el código del paso 2:
.cart__unit-price {
display: block;
}
Después de las ediciones, el archivo theme.scss.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tus estilos de tema - Parte 2
En el directorio Recursos, haz clic en el archivo
timber.scss.liquid
.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;
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Ve al final del archivo y agrega el siguiente código:
.product-unit-price {
color: $colorTextBody;
display: block;
}
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el código de tu tema de JavaScript
En el directorio Recursos, haz clic en el archivo
theme.js.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
var prodImg;
- Agrega el siguiente fragmento bajo el código del paso 2:
var unitPrice = null;
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
// Create item's data object and add to 'items' array
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
vendor: cartItem.vendor
- Agrega el siguiente fragmento sobre el código del paso 6:
unitPrice: unitPrice,
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
productPrice: '#ProductPrice',
- Agrega el siguiente fragmento bajo el código del paso 8:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Después de las ediciones, el resultado debería mostrarse de esta manera:

- 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'
);
- Reemplaza el código con el siguiente fragmento:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
$(this.selectors.SKU).html(variant.sku);
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- 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();
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tus traducciones en inglés
En el directorio Regiones, haz clic en el archivo
en.default.json
.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"
- Agrega el siguiente fragmento sobre el código del paso 2:
"unit_price_separator": "per",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente código:
"include_taxes": "Tax included.",
- Agrega el siguiente fragmento bajo el código del paso 4:
"unit_price": "Unit price",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
(Opcional) Agregar traducciones para otros idiomas
Ve a la página Temas en tu panel de control de Shopify.
Haz clic en el botón ... > Editar contenido de tema predeterminado.
Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.
Introduce
Unit Price
en el campo de búsqueda.Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.
Actualiza el campo Etiqueta de precio unitario en Productos / General.
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
Ubica y expande la carpeta Fragmentos.
Selecciona Agregar un nuevo fragmento.
Introduce el nombre
product-unit-price
.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>
Haz clic en Guardar.
Encuentra y edita el archivo
product-grid-item.liquid
.Reemplaza esta línea:
{% capture price %}{{ featured.price | money }}{% endcapture %}
Con esta línea:
{%- assign price = featured.price | money -%}
- 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 las ediciones, el archivo product-grid-item.liquid
debería mostrarse de esta manera:

Haz clic en Guardar para confirmar tus cambios.
Ubica y edita el archivo
search-result.liquid
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 -%}
- 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>
- 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 las ediciones, el archivo search-result.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Actualizar tus estilos
Ubica y expande la carpeta Recursos.
Edita el archivo
theme.scss.liquid
.Usa el atajo de teclado Buscar para ubicar este fragmento de código:
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;
- Inserta el siguiente bloque de código debajo del fragmento de código que ubicaste en el paso anterior:
font-family: $headerFontStack;
- 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);
}
- 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;
}
- 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;
}
- 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;
}
- Usa el acceso directo del teclado Búsqueda para ubicar el siguiente fragmento de código:
.cart__product-title {
display: inline-block;
- 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 las ediciones, el archivo theme.scss.liquid
debería mostrarse de esta manera:



Haz clic en Guardar para confirmar tus cambios.
Ubica y edita el archivo
timber.scss.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar este código:
.quantity-selector {
display: inline-block;
}
}
- 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;
}
- 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 las ediciones, el archivo timber.scss.liquid
debería mostrarse de esta manera:


- Haz clic en Guardar para confirmar tus cambios.
Actualizar tus plantillas
Ubica y expande la carpeta Plantillas.
Ubica y edita el archivo
customers/order.liquid
.Usa el acceso directo del teclado Búsqueda para ubicar el código:
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- 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 las ediciones, el archivo customers/order.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Actualizar tu JavaScript
Ubica y edita
theme.js
en Recursos.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 fragmento de código debería mostrarse de esta manera:

- Busca este código:
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}
- 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 mostrarse de esta manera:

- Usa el acceso directo del teclado Búsqueda para ubicar este código:
.attr('data-zoom')
});
});
- 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 mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Actualizar tu plantilla de carrito
Ubica y expande la carpeta Secciones.
Edita el archivo
cart-template.liquid
.Usa el atajo de teclado Buscar para ubicar el código
<span class="order-discount h5">{{ item.final_price | money }}</span>
.Reemplaza la línea con este código:
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
- Busca 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 -%}
- 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 las ediciones, el archivo cart-template.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Actualizar tu producto destacado
Ubica y expande la carpeta Secciones.
Edita el archivo
featured-product.liquid
.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>
- 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 %}
- 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 las ediciones, el archivo featured-product.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Actualizar tu plantilla de producto
Ubica y expande la carpeta Secciones.
Edita el archivo
product-template.liquid
.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>
- 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 %}
- Agrega esta línea a continuación:
{% include 'product-unit-price', variant: variant, available: true %}
Después de las ediciones, el archivo product-template.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Actualizar las regiones
Ubica y expande la carpeta Regiones.
Abre y edita el archivo
en.default.json
.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 mostrarse de esta manera:

- 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 mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
(Opcional) Agregar traducciones para otros idiomas
Ve a la página Temas en tu panel de control de Shopify.
Haz clic en el botón ... > Editar contenido de tema predeterminado.
Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.
Introduce
Unit Price
en el campo de búsqueda.Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.
Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.
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
En el directorio Regiones, haz clic en
en.default.json
.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"
- Agrega el siguiente código sobre la línea que se encuentra en el paso 2:
"unit_price_separator": "per",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- 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."
- Agrega el siguiente código sobre la línea que se encuentra en el paso 4:
"unit_price_label": "Unit price",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la hoja de estilo de tu tema
En el directorio Componentes, haz clic en
theme.scss.liquid
.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);
}
- 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 las ediciones, el archivo theme.scss.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Agrega el fragmento del precio unitario del producto
En el directorio Fragmentos, haz clic en Agregar un nuevo fragmento.
Introduce el nombre
product-unit-price
.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>
- Haz clic en Guardar para confirmar tus cambios.
Editar el fragmento de tu tarjeta de producto
En el directorio Fragmentos, haz clic en
product-card.liquid
.Usa el acceso directo del teclado de Búsqueda para ubicar la línea
<a href="{{ product.url | within: collection }}"
.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 las ediciones, el resultado debería mostrarse de esta manera:

- 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>
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la plantilla de tu página del carrito
En el directorio Secciones, haz clic en
cart-template.liquid
.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 -%}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- 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}}
- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la plantilla de tu producto destacado
En el directorio Secciones, haz clic en
featured-product.liquid
.Usa el acceso directo del teclado de Búsqueda para ubicar la línea
{% assign current_variant = product.selected_or_first_available_variant %}
.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 las ediciones, el resultado debería mostrarse de esta manera:

- 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 %}
Debajo de esta etiqueta
ul
, ubica el código{% if section.settings.stock_enable %}
.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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la plantilla de tu página de producto
En el directorio Secciones, haz clic en
product-template.liquid
.Usa el acceso directo del teclado de Búsqueda para ubicar la línea
{% assign current_variant = product.selected_or_first_available_variant %}
.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 las ediciones, el resultado debería mostrarse de esta manera:

- 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 %}
Debajo de esta etiqueta
ul
, ubica el código{% if section.settings.stock_enable %}
.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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la plantilla de pedido de tus clientes
En el directorio Templates, haz clic en
customers/order.liquid
.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>
- 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 las ediciones, el archivo customers/order.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Edita el archivo JavaScript de tu tema
En el directorio Componentes, haz clic en
theme.js
.Usa el acceso directo del teclado Búsqueda para ubicar la línea
// Create item's data object and add to 'items' array
.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 las ediciones, el resultado debería mostrarse de esta manera:

Utilice el acceso directo del teclado de Búsqueda para ubicar la línea
vendor: cartItem.vendor,
Agrega el siguiente código sobre la línea que se ubicó en el paso 4:
unitPrice: unitPrice,
Después de las ediciones, el resultado debería mostrarse de esta manera:

Usa el acceso directo del teclado Búsqueda para ubicar la línea
shopifyPaymentButton: '.shopify-payment-button'
.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 las ediciones, el resultado debería mostrarse de esta manera:

Usa el acceso directo del teclado Búsqueda para ubicar la línea
_updateSKU: function(evt) {
.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 las ediciones, el resultado debería mostrarse de esta manera:

- 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);
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
(Opcional) Agregar traducciones para otros idiomas
Ve a la página Temas en tu panel de control de Shopify.
Haz clic en el botón ... > Editar contenido de tema predeterminado.
Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.
Introduce
Unit Price
en el campo de búsqueda.Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.
Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.
Haz clic en Guardar.
Supply
Pasos para Supply
Se agregaron precios unitarios 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 aplicar la personalización del precio unitario a las versiones anteriores de Supply.
Agrega el fragmento del precio unitario del producto
Ubica y expande la carpeta Fragmentos.
Selecciona Agregar un nuevo fragmento.
Introduce el nombre
product-unit-price
.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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>
Después de las ediciones, el archivo product-unit-price.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la plantilla de tu producto destacado
Ubica y expande la carpeta Secciones luego selecciona el archivo
featured-product.liquid
.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>
- Agrega el siguiente código bajo el
</span>
de cierre del fragmento del paso 2:
{% include 'product-unit-price' variant: variant %}
Después de las ediciones, el archivo featured-product.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar la plantilla de tu producto
Ubica y expande la carpeta Secciones luego selecciona el archivo
product-template.liquid
.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>
- Agrega el siguiente código bajo el
</span>
de cierre del paso 2:
{% include 'product-unit-price', variant: variant %}
Después de las ediciones, el archivo product-template.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el fragmento de tu artículo de cuadrícula de producto
Ubica y expande la carpeta Fragmentos y luego selecciona el archivo
product-grid-item.liquid
.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>
- 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 las ediciones, el archivo product-grid-item.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el fragmento de artículo de la lista de productos
Ubica y expande la carpeta Fragmentos y luego selecciona el archivo
product-list-item.liquid
.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>
- 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 las ediciones, el archivo product-list-item.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el fragmento de la cuadrícula de resultados de búsqueda
Ubica y expande la carpeta Fragmentos y luego selecciona el archivo
search-result-grid.liquid
.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>
- 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 las ediciones, el archivo search-result-grid.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu plantilla de carrito
Ubica y expande la carpeta Plantillas y luego selecciona el archivo
cart.liquid
.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 -%}
- 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 las ediciones, el archivo cart.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar tu plantilla de pedido
Ubica y expande la carpeta Plantillas y luego selecciona el archivo
customers/order.liquid
.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>
- 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 las ediciones, el archivo customers/order.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el diseño de tu tema
Ubica y expande la carpeta Diseño y luego selecciona el archivo
theme.liquid
.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 }}
},
- 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 las ediciones, el archivo theme.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar los estilos de tu tema
Ubica y expande la carpeta Secciones luego selecciona el archivo
theme.scss.liquid
.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;
}
}
- 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 las ediciones, el archivo theme.scss.liquid
debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el código de tu tema de JavaScript
Ubica y expande la carpeta Recursos y luego selecciona el archivo de
theme.js.liquid
.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'
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- 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');
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- 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>';
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- 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();
}
- 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 las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
Editar el archivo de idioma de tu tema
Ubica y expande la carpeta Regiones y luego selecciona el archivo
en.default.json
.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"
},
- Agrega el código arriba
"refresh_page"
del paso 2:
"unit_price_separator": "per",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- 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"
}
- Agrega el siguiente código después de
"will_be_in_stock_after"
del paso 5:
"unit_price_label": "Unit price",
Después de las ediciones, el resultado debería mostrarse de esta manera:

- Haz clic en Guardar para confirmar tus cambios.
(Opcional) Agregar traducciones para otros idiomas
Ve a la página Temas en tu panel de control de Shopify.
Haz clic en el botón ... > Editar contenido de tema predeterminado.
Haz clic en Cambiar el idioma del tema y luego selecciona el idioma que deseas editar. Esto solo es posible en tu tema publicado.
Busca
Unit Price
en la barra de entrada.Actualiza el campo del Separador de precio unitario bajo General / Accesibilidad.
Actualiza el campo Etiqueta de precio unitario bajo Productos / Producto.
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 a tus productos, pero estos no aparecen en las notificaciones de confirmación de pedido, es posible que debas actualizar manualmente la plantilla.
Pasos:
Desde el panel de control de Shopify, ve a Configuración > Notificaciones.
En la sección Pedidos, haz clic en Confirmación de pedido.
Haz clic en Editar código.
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.