Visualizzazione dei prezzi unitari

Nota

Questa guida è rilevante solo per i merchant che vendono in Francia. Se vendi i tuoi prodotti in Francia, ma il tuo negozio non ha sede in Francia, contatta l'Assistenza Shopify per attivare questa funzionalità.

Se vendi in quantità o misure, per determinati tipi di prodotto potrebbe essere necessario mostrare il prezzo unitario. Quando inserisci il prezzo unitario per un prodotto, esso verrà visualizzato nella pagina del prodotto, nelle pagine di collezione, nella pagina del carrello, nelle pagine di check-out e nelle notifiche di conferma ordine.

Aggiungi il prezzo unitario al tuo prodotto

Desktop

1. Dal pannello di controllo Shopify vai a Prodotti.

2. Clicca sul prodotto che desideri modificare.

3. Facoltativo: se il tuo prodotto ha delle varianti, nella sezione Varianti clicca sulla variante che desideri modificare.

4. Nella sezione Prezzi seleziona Mostra il prezzo unitario per questo prodotto..

5. Nel campo Misurazione totale prodotto inserisci la misura totale del prodotto e seleziona l'unità di misura.

6. Facoltativo: nel campo Misura base aggiungi la misura di base e seleziona l'unità di misura. Ad esempio, per un prodotto che pesa 1 kg, puoi selezionare un'unità di base di 100 g.

7. Clicca su Salva.

iPhone

1. Dall'app Shopify, vai su Prodotti > Tutti i prodotti.
2. Tocca il prodotto che desideri modificare.
3. Tocca l'area del prezzo del prodotto.
4. Seleziona Mostra prezzo unitario.
5. Nel campo Misurazione totale prodotto inserisci la misura totale del prodotto e seleziona l'unità di misura.
6. Facoltativo: nel campo Misura base aggiungi la misura di base e seleziona l'unità di misura. Ad esempio, per un prodotto che pesa 1 kg, puoi selezionare un'unità di base di 100 g.
7. Tocca Salva.

Android

1. Dall'app Shopify, vai su Prodotti > Tutti i prodotti.
2. Tocca il prodotto che desideri modificare.
3. Tocca l'area del prezzo del prodotto.
4. Seleziona Mostra prezzo unitario.
5. Nel campo Misurazione totale prodotto inserisci la misura totale del prodotto e seleziona l'unità di misura.
6. Facoltativo: nel campo Misura base aggiungi la misura di base e seleziona l'unità di misura. Ad esempio, per un prodotto che pesa 1 kg, puoi selezionare un'unità di base di 100 g.
7. Tocca ✓.

Visualizzazione dei prezzi unitari nel tuo negozio online

Per tutti i temi dell'Online Store 2.0 è già disponibile la funzionalità del prezzo unitario. Non è richiesta alcuna azione per mostrare i prezzi unitari nel negozio online.

Se hai un tema vintage e non puoi aggiornarlo a una versione che supporti la funzionalità del prezzo unitario, puoi personalizzare manualmente il codice del tema per visualizzare il prezzo unitario.

Visualizzazione dei prezzi unitari su un tema vintage

Attenzione

Effettua il backup del tema prima di iniziare a modificare il codice. Le istruzioni seguenti sono di livello avanzato. Se hai bisogno di aiuto per l'aggiunta della funzionalità al tuo tema, puoi scegliere di ricevere assistenza per la personalizzazione.

I passaggi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema prima di seguire le istruzioni qui sotto:

Debut

Passaggi per Debut

I prezzi unitari sono disponibili nel tema Debut per le versioni 12.1.0 e successive. Se non riesci ad aggiornare il tema alla versione più recente, puoi aggiungere la personalizzazione del prezzo unitario alle precedenti versioni di Debut.

Modifica il frammento del prezzo del prodotto

1. Nella directory Frammenti, clicca sul file product-price.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando data-price:

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

1. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando 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. Aggiungi il seguente codice sotto il tag di chiusura </div>:

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

1. Fai clic su Salva per confermare le modifiche.

Modifica la pagina del carrello

1. Nella directory Sezioni, clicca sul file cart-template.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando 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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file cart-template.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica la pagina della collezione

1. Nella directory Sezioni, clicca sul file collection.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando grid-view-item__title:

{% include 'product-price' %}

1. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file collection.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica la griglia della scheda prodotto

1. Nella directory Frammenti, clicca sul file product-card-grid.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando grid-view-item__title:

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

1. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file product-card-grid.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica l'elenco delle schede prodotto

1. Nella directory Frammenti, clicca sul file product-card-list.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando {% if product.available %}:

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

1. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file product-card-list.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica la pagina dell'ordine

1. Nella directory Modelli, clicca sul file customers/order.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando 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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file customers/order.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica gli stili del tema

1. Nella directory Risorse, clicca sul file theme.scss.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando .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. Aggiungi il seguente frammento sotto il codice del passaggio 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;
}

Dopo le modifiche, il file theme.scss.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il codice del tema JavaScript

1. Nella directory Risorse, clicca sul file theme.js.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

salePrice: '[data-sale-price]'

1. Aggiungi il seguente frammento al codice del passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

productOnSale: 'price--on-sale',

1. Aggiungi il seguente frammento dopo il codice del passaggio 4:

productUnitAvailable: 'price--unit-available',

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Sostituisci il codice con il seguente frammento:

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

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

var salePrice = '';

1. Aggiungi il seguente frammento sotto il codice del passaggio 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 il tasto di scelta rapida Trova per individuare il codice seguente:

.replace('[$]', salePrice)

1. Aggiungi il seguente frammento sotto il codice del passaggio 10:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

_updatePrice: function(evt) {

1. Aggiungi il seguente frammento prima del codice del passaggio 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 il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento sotto il codice del passaggio 14:

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

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

.removeClass(this.classes.productOnSale)

1. Aggiungi il seguente frammento sotto il codice del passaggio 16:

.removeClass(this.classes.productUnitAvailable)

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento sotto il codice del passaggio 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);
}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica le traduzioni in inglese

1. Nella directory Impostazioni locali, clicca sul file en.default.json.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento al codice del passaggio 2:

"unit_price_separator": "per",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

"include_taxes": "Tax included.",

1. Aggiungi il seguente frammento al codice del passaggio 4:

"unit_price_label": "Unit price",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica layout del tema

1. Nella directory Layout, clicca sul file theme.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento sotto il codice del passaggio 2:

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

Dopo le modifiche, il file theme.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

(Facoltativo) Aggiungi traduzioni per altre lingue

1. Vai alla pagina Temi nel pannello di controllo Shopify.

2. Clicca sul pulsante ... > Modifica contenuto tema predefinito.

3. Clicca su Cambia lingua del tema, quindi seleziona la lingua che desideri modificare. È possibile solo per il tema pubblicato.

4. Inserisci Unit Price nel campo di ricerca.

5. Aggiorna il campo Separatore prezzo unitario sotto Generali / Accessibilità.

6. Aggiorna il campo Etichetta prezzo unitario sotto Prodotti / Prodotto.

7. Clicca su Salva.

Brooklyn

Passaggi per Brooklyn

I prezzi unitari sono disponibili nel tema Brooklyn per le versioni 13.1.0 e successive. Se non riesci ad aggiornare il tema alla versione più recente, puoi aggiungere la personalizzazione del prezzo unitario alle precedenti versioni di Brooklyn.

Aggiungi un frammento del prezzo del prodotto

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Inserisci product-price nel campo nome.

3. Copia e incolla il seguente codice nel file.

<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. Fai clic su Salva per confermare le modifiche.

Modifica la pagina del prodotto in primo piano

1. Nella directory Sezioni, clicca sul file featured-product.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando 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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file featured-product.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica la pagina del prodotto

1. Nella directory Sezioni, clicca sul file product-template.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando 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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file product-template.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il carrello Ajax

1. Nella directory Frammenti, clicca sul file ajax-cart-template.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando <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. Aggiungi il seguente codice sotto {{/if}} del passaggio 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}}

Dopo le modifiche, il file ajax-cart-template.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica l'articolo della griglia del prodotto

1. Nella directory Frammenti, clicca sul file product-grid-template.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando 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. Aggiungi il seguente frammento prima del codice del passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando {{ 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. Aggiungi il seguente codice sotto </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 -%}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica la pagina del carrello

1. Nella directory Modelli, clicca sul file cart.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando <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

Se disponi di una versione precedente del tema, è possibile che tu non riesca a trovare questo frammento. In tal caso, aggiungi il codice del passaggio 3 direttamente sotto l'elemento <span class="cart__price">.

1. Aggiungi il seguente frammento sotto il codice del passaggio 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 -%}

Dopo le modifiche, il file cart.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica la pagina dell'ordine

1. Nella directory Modelli, clicca sul file customers/order.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando {{ 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. Aggiungi il seguente frammento prima di </td> del passaggio 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 -%}

Dopo le modifiche, il file customers/order.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica gli stili del tema - Parte 1

1. Nella directory Risorse, clicca sul file theme.scss.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando .ajaxcart__price {:

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

1. Aggiungi il seguente frammento sotto il codice del passaggio 2:

.cart__unit-price {
    display: block;
}

Dopo le modifiche, il file theme.scss.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica gli stili del tema - Parte 2

1. Nella directory Risorse, clicca sul file timber.scss.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando .product-single__policies {:

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

1. Aggiungi il seguente frammento al codice del passaggio 2:

.product-single__unit {
  display: none;

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Vai alla fine del file e aggiungi il seguente codice:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il codice del tema JavaScript

1. Nella directory Risorse, clicca sul file theme.js.liquid.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

var prodImg;

1. Aggiungi il seguente frammento sotto il codice del passaggio 2:

var unitPrice = null;

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento al codice del passaggio 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
  };
}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

vendor: cartItem.vendor

1. Aggiungi il seguente frammento al codice del passaggio 6:

unitPrice: unitPrice,

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

productPrice: '#ProductPrice',

1. Aggiungi il seguente frammento sotto il codice del passaggio 8:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando $(this.selectors.priceContainer, this.$container).removeClass(:

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

1. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento al codice del passaggio 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'
  );
}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente cercando this.destroyImageCarousel();:

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

1. Aggiungi il seguente frammento al codice del passaggio 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;
},

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica le tue traduzioni in inglese

1. Nella directory Impostazioni locali, clicca sul file en.default.json.

2. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

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

1. Aggiungi il seguente frammento al codice del passaggio 2:

"unit_price_separator": "per",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare il codice seguente:

"include_taxes": "Tax included.",

1. Aggiungi il seguente frammento al codice del passaggio 4:

"unit_price": "Unit price",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

(Facoltativo) Aggiungi traduzioni per altre lingue

1. Vai alla pagina Temi nel pannello di controllo Shopify.

2. Clicca sul pulsante ... > Modifica contenuto tema predefinito

3. Clicca su Cambia lingua del tema, quindi seleziona la lingua che desideri modificare. È possibile solo per il tema pubblicato.

4. Inserisci Unit Price nel campo di ricerca.

5. Aggiorna il campo Separatore prezzo unitario sotto Generali / Accessibilità.

6. Aggiorna il campo Etichetta prezzo unitario sotto Prodotti / Generali.

7. Clicca su Salva.

Minimal

Passaggi per Minimal

I prezzi unitari sono disponibili nel tema Minimal per le versioni 11.2.0 e successive. Se non riesci ad aggiornare il tuo tema alla versione più recente, puoi aggiungere la personalizzazione del prezzo unitario alle precedenti versioni di Minimal.

Aggiorna i frammenti

1. Individua ed espandi la cartella Frammenti.

2. Seleziona Aggiungi un nuovo frammento.

3. Inserisci il nome product-unit-price.

4. Copia e incolla il seguente codice in 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. Clicca su Salva.

2. Trova e modifica il file product-grid-item.liquid.

3. Sostituisci questa riga:

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

Con questa riga:

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

1. Usa il tasto di scelta rapida Trova per individuare {{ price }} e aggiungi il codice riportato qui sotto:

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

Dopo le modifiche, il file product-grid-item.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

2. Individua e modifica il file search-result.liquid

3. Usa il tasto scelta rapida Trova per individuare {% if item.object_type == 'product' %} e aggiungi il codice seguente alla riga riportata qui sotto:

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

1. A questo punto, usa il tasto di scelta rapida Trova per individuare i due frammenti di codice seguenti:

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

E

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

1. Aggiungi il seguente blocco di codice sotto ciascuno dei due frammenti di codice elencati nel passaggio precedente:

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

Dopo le modifiche, il file search-result.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna gli stili

1. Individua ed espandi la cartella Risorse.

2. Modifica il file theme.scss.liquid.

3. Usa il tasto di scelta rapida Trova per individuare questo blocco di codice:

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

1. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

font-family: $headerFontStack;

1. Usa il tasto di scelta rapida Trova per individuare il frammento di codice seguente:

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

1. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

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

1. Usa il tasto di scelta rapida Trova per individuare il frammento di codice seguente:

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

1. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

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

1. Usa il tasto di scelta rapida Trova per individuare il frammento di codice seguente:

.cart__product-title {
  display: inline-block;

1. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

font-weight: $bodyFontWeightBold;

Dopo le modifiche, il file theme.scss.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

2. Individua e modifica il file timber.scss.liquid.

3. Usa il tasto di scelta rapida Trova per individuare questo codice:

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

1. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

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

1. Inserisci questo codice alla fine del file:

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

Dopo le modifiche, il file timber.scss.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna i modelli

1. Individua ed espandi la cartella Modelli.

2. Individua e modifica il file customers/order.liquid.

3. Usa il tasto di scelta rapida Trova per individuare il codice:

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

1. Aggiungi questo codice sotto il codice del passaggio 3:

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

Dopo le modifiche, il file customers/order.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna JavaScript

1. Individua e modifica theme.js in Risorse.

2. Usa il tasto di scelta rapida Trova per individuare la riga che contiene .shopify-payment-button e sostituiscila 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)

Il blocco di codice dovrebbe essere simile a questo:

1. Cerca questo codice:

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

1. Aggiungi sotto questo codice:

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

Il risultato dovrebbe essere simile a questo:

1. Usa il tasto di scelta rapida Trova per individuare questo codice:

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

1. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

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

Il risultato dovrebbe essere simile a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna il modello del carrello

1. Individua ed espandi la cartella Sezioni.

2. Modifica il file cart-template.liquid.

3. Usa il tasto di scelta rapida Trova per individuare il codice <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Sostituisci la riga con questo codice:

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

1. Trova la prima occorrenza del codice {%- 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. Aggiungi questo blocco di codice sul codice del passaggio 5:

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

Dopo le modifiche, il file cart-template.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna il prodotto in primo piano

1. Individua ed espandi la cartella Sezioni.

2. Modifica il file featured-product.liquid.

3. Usa il tasto di scelta rapida Trova per individuare la riga con itemprop="name" e sostituiscila con:

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

1. Individua il codice che 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. Inserisci il seguente blocco di codice sotto il frammento di codice che hai individuato nel passaggio precedente:

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

Dopo le modifiche, il file featured-product.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna il modello del prodotto

1. Individua ed espandi la cartella Sezioni.

2. Modifica il file product-template.liquid.

3. Usa il tasto di scelta rapida Trova per individuare la riga con itemprop="name" e sostituiscila con:

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

1. Usa il tasto di scelta rapida Trova per individuare il codice:

{% 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. Aggiungi la riga qui sotto:

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

Dopo le modifiche, il file product-template.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiorna le impostazioni locali

1. Individua ed espandi la cartella Impostazioni locali.

2. Apri e modifica il file en.default.json.

3. Usa il tasto di scelta rapida Trova per individuare la riga che contiene refresh_page e sostituiscila con:

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

Il risultato dovrebbe essere simile a questo:

1. Individua la riga che contiene full_details e sostituiscila con:

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

Il risultato dovrebbe essere simile a questo:

1. Fai clic su Salva per confermare le modifiche.

(Facoltativo) Aggiungi traduzioni per altre lingue

1. Vai alla pagina Temi nel pannello di controllo Shopify.

2. Clicca sul pulsante ... > Modifica contenuto tema predefinito.

3. Clicca su Cambia lingua del tema, quindi seleziona la lingua che desideri modificare. È possibile solo per il tema pubblicato.

4. Inserisci Unit Price nel campo di ricerca.

5. Aggiorna il campo Separatore prezzo unitario sotto Generali / Accessibilità.

6. Aggiorna il campo Etichetta prezzo unitario sotto Prodotti / Prodotto.

7. Clicca su Salva.

Venture

Passaggi per Venture

I prezzi unitari sono stati aggiunti al tema Venture per le versioni 9.4.0 e successive. Se non sei in grado di aggiornare il tuo tema alla versione più recente, segui questi passaggi per applicare la personalizzazione del prezzo unitario alle precedenti versioni di Venture.

Modifica il file della lingua del tema

1. Nella directory Impostazioni locali clicca su en.default.json.

2. Usa il tasto di scelta rapida Trova per individuare la riga contenente refresh_page:

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

1. Aggiungi il seguente codice sulla riga al passaggio 2:

"unit_price_separator": "per",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga contenente stock_unavailable:

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

1. Aggiungi il seguente codice sulla riga al passaggio 4:

"unit_price_label": "Unit price",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il foglio di stile del tema

1. Nella directory Risorse, clicca su theme.scss.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga .product-single__policies {:

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

1. Aggiungi il seguente codice sotto il tag di chiusura } del blocco di codice al passaggio 2:

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

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

Dopo le modifiche, il file theme.scss.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Aggiungi un frammento del prezzo unitario del prodotto

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.

2. Inserisci il nome product-unit-price.

3. Aggiungi il seguente codice nel 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. Fai clic su Salva per confermare le modifiche.

Modifica il frammento della scheda prodotto

1. Nella directory Frammenti, clicca su product-card.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga <a href="{{ product.url | within: collection }}".

3. Aggiungi il seguente codice sulla riga al passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga <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. Aggiungi il seguente codice sopra il tag di chiusura </div> al passaggio 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 -%}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello della pagina del carrello

1. Nella directory Sezioni, clicca su cart-template.liquid.

2. Utilizza il tasto di scelta rapida Trova per individuare la prima istanza di <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. Aggiungi il seguente codice sotto il tag endif al passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Utilizza il tasto di scelta rapida Trova per individuare la seconda istanza di <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. Aggiungi il seguente codice sotto il secondo tag di chiusura {{/if}} al passaggio 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}}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello della pagina del prodotto in primo piano

1. Nella directory Sezioni, clicca su featured-product.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga {% assign current_variant = product.selected_or_first_available_variant %}.

3. Inserisci il seguente codice sotto la riga al passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga contenente <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. Sotto questo tag ul, trova il codice {% if section.settings.stock_enable %}.

2. Aggiungi il seguente codice sopra il blocco if al passaggio 6:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello della pagina del prodotto

1. Nella directory Sezioni, clicca su product-template.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga {% assign current_variant = product.selected_or_first_available_variant %}.

3. Inserisci il seguente codice sotto la riga al passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga contenente <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. Sotto questo tag ul, trova il codice {% if section.settings.stock_enable %}.

2. Aggiungi il seguente codice sopra il blocco if al passaggio 5:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello di ordine dei clienti

1. Nella directory Modelli, clicca su customers/order.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga <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. Sostituisci il codice del passaggio 2 con il seguente codice:

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

Dopo le modifiche, il file customers/order.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il file JavaScript del tema

1. Nella directory Risorse, clicca su theme.js.

2. Usa il tasto di scelta rapida Trova per individuare la riga // Create item's data object and add to 'items' array.

3. Aggiungi il seguente codice sulla riga al passaggio 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
  };
}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga vendor: cartItem.vendor,

2. Inserisci il seguente codice sotto la riga al passaggio 4:

unitPrice: unitPrice,

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga shopifyPaymentButton: '.shopify-payment-button'.

2. Sostituisci la riga del passaggio 6 con il seguente codice:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga _updateSKU: function(evt) {.

2. Inserisci il seguente codice sopra la riga al passaggio 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;
},

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga 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. Aggiungi il seguente codice sotto il tag di chiusura } al passaggio 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'
  );
}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

(Facoltativo) Aggiungi traduzioni per altre lingue

1. Vai alla pagina Temi nel pannello di controllo Shopify.

2. Clicca sul pulsante ... > Modifica contenuto tema predefinito.

3. Clicca su Cambia lingua del tema, quindi seleziona la lingua che desideri modificare. È possibile solo per il tema pubblicato.

4. Inserisci Unit Price nel campo di ricerca.

5. Aggiorna il campo Separatore prezzo unitario sotto Generali / Accessibilità.

6. Aggiorna il campo Etichetta prezzo unitario sotto Prodotti / Prodotto.

7. Clicca su Salva.

Supply

Passaggi per Supply

I prezzi unitari sono stati aggiunti al tema Supply per le versioni 8.3.0 e successive. Se non riesci ad aggiornare il tuo tema alla versione più recente, segui questi passaggi per applicare la personalizzazione del prezzo unitario alle precedenti versioni di Supply.

Aggiungi un frammento del prezzo unitario del prodotto

1. Individua ed espandi la cartella Frammenti.

2. Seleziona Aggiungi un nuovo frammento.

3. Inserisci il nome product-unit-price.

4. Copia e incolla il seguente codice nel file e seleziona Salva.

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

Dopo le modifiche, il file product-unit-price.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello del prodotto in primo piano

1. Individua ed espandi la cartella Sezioni, poi seleziona il file featured-product.liquid.

2. Usa il tasto di scelta rapida Trova per trovare la riga {% include 'price' with price %} nel file:

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

1. Aggiungi il seguente codice sotto </span> di chiusura dello frammento del passaggio 2:

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

Dopo le modifiche, il file featured-product.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello del prodotto

1. Individua ed espandi la cartella Sezioni, poi seleziona il file product-template.liquid.

2. Usa il tasto di scelta rapida Trova per trovare la riga {% include 'price' with variant.price %} nel file:

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

1. Aggiungi il seguente codice sotto </span> di chiusura del passaggio 2:

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

Dopo le modifiche, il file product-template.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il frammento dell'articolo della griglia prodotto

1. Individua ed espandi la cartella Frammentipoi seleziona il file product-grid-item.liquid.

2. Usa il tasto di scelta rapida Trova per trovare la riga {% if on_sale and section.settings.product_show_saved_amount %} nel file:

{% 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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file product-grid-item.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il frammento dell'articolo dell'elenco prodotti

1. Individua ed espandi la cartella Frammentipoi seleziona il file product-list-item.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga <div class="product-item--price text-center"> nel file:

<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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file product-list-item.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il frammento della griglia dei risultati di ricerca

1. Individua ed espandi la cartella Frammentipoi seleziona il file search-result-grid.liquid.

2. Usa il tasto di scelta rapida Trova per trovare la riga {% if on_sale and section.settings.product_show_saved_amount %} nel file:

{% 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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file search-result-grid.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello del carrello

1. Individua ed espandi la cartella Modelli, poi seleziona il file cart.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga <del class="cart-original-price order-discount--cart-price"> nel file:

<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. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file cart.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il modello dell'ordine

1. Individua ed espandi la cartella Modelli, poi seleziona il file customers/order.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga <td class="text-right" data-label="customer.order.price"> nel file:

<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. Aggiungi il seguente codice sopra </td> di chiusura del passaggio 2:

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

Dopo le modifiche, il file customers/order.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica layout del tema

1. Individua ed espandi la cartella Layout e seleziona il file theme.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga contenente only_left: nel file:

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. Aggiungi il seguente codice sopra only_left:{{ 'products.product.only_left' | t: count: '1' | json }} del passaggio 2:

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

Dopo le modifiche, il file theme.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica gli stili del tema

1. Individua ed espandi la cartella Sezioni, poi seleziona il file theme.scss.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga .product-item--price { nel file:

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

1. Sostituisci il codice con il seguente frammento:

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

Dopo le modifiche, il file theme.scss.liquid dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il codice del tema JavaScript

1. Individua ed espandi la cartella Risorse e seleziona il file theme.js.liquid.

2. Usa il tasto di scelta rapida Trova per individuare la riga originalSelectorId: 'productSelect-' + sectionId, nel file:

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. Aggiungi il seguente codice sopra originalSelectorId: 'productSelect-' + sectionId, del passaggio 2:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga productVariantCallback: function(variant) { nel file:

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. Aggiungi il seguente codice sotto if (variant) { del passaggio 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');
}

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; nel file:

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. Sostituisci la riga customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; con il seguente frammento:

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

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); nel file:

} 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. Aggiungi il seguente codice sotto il frammento del passaggio 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;

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

Modifica il file della lingua del tema

1. Individua ed espandi la cartella Impostazioni locali, poi seleziona il file en.default.json.

2. Usa il tasto di scelta rapida Trova per individuare la riga contenente "refresh_page" nel file:

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

1. Aggiungi il seguente codice sopra "refresh_page" del passaggio 2:

"unit_price_separator": "per",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Usa il tasto di scelta rapida Trova per individuare la riga contenente "will_be_in_stock_after" nel file:

"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. Aggiungi il seguente codice dopo "will_be_in_stock_after" del passaggio 5:

"unit_price_label": "Unit price",

Dopo le modifiche, il risultato dovrebbe assomigliare a questo:

1. Fai clic su Salva per confermare le modifiche.

(Facoltativo) Aggiungi traduzioni per altre lingue

1. Vai alla pagina Temi nel pannello di controllo Shopify.

2. Clicca sul pulsante ... > Modifica contenuto tema predefinito.

3. Clicca su Cambia lingua del tema, quindi seleziona la lingua che desideri modificare. È possibile solo per il tema pubblicato.

4. Cerca Unit Price nella barra di inserimento.

5. Aggiorna il campo Separatore prezzo unitario sotto Generali / Accessibilità.

6. Aggiorna il campo Etichetta prezzo unitario sotto Prodotti / Prodotto.

7. Clicca su Salva.

Visualizzazione dei prezzi unitari nelle notifiche degli ordini

Per impostazione predefinita, la notifica di conferma dell'ordine mostra i prezzi unitari quando la funzionalità è attiva.

Se hai aggiunto prezzi unitari al prodotto, ma i prezzi unitari non vengono visualizzati nelle notifiche di conferma dell'ordine, potrebbe essere necessario aggiornare manualmente il modello.

Passaggi:

1. Dal tuo pannello di controllo Shopify, vai su Impostazioni > Notifiche.

2. Nella sezione Ordini clicca su Conferma dell'ordine.

3. Clicca su Modifica codice.

4. Aggiungi il seguente frammento al modello all'interno della classe "order-list__item-price":

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

 5. Clicca su Salva.

Suggerimento

Effettua un ordine di prova nel tuo negozio per confermare se la notifica d'ordine mostra il prezzo unitario.