Affichage des prix unitaires

Remarque

Ce guide est pertinent pour les marchands vendant en Allemagne uniquement.

Si vous vendez des produits en quantités ou en mesures, vous devrez peut-être afficher le prix unitaire de certains produits. Lorsque vous saisissez un prix unitaire pour un produit, celui-ci est affiché sur les pages de produit, les pages de collection, la page de panier, les pages de passage à la caisse et les notifications de confirmation de commande.

Ajouter des prix unitaires à votre produit

Bureau

1. Depuis votre interface administrateur Shopify, allez à Produits.

2. Cliquez sur le nom du produit que vous souhaitez modifier.

3. Cliquez sur la variante à mettre à jour.

4. Sous Pricing (Tarification), sélectionnez Show unit price for this product (Afficher le prix unitaire de ce produit).

5. Dans le champ Total measurement of product (Mesure totale de produit), saisissez le nombre d'unités de votre produit.

6. Utilisez le menu déroulant Select unit (Sélectionner l'unité) pour sélectionner l'unité de mesure de la variante. Le type d'unité que vous affichez diffère selon le type de produit que vous vendez. Par exemple, si le produit contient 2 litres de savon, sélectionnez litres.

7. Dans le champ Unit price (Prix unitaire), saisissez le prix unitaire du produit.

8. Facultatif : sélectionnez un chiffre pour l'unité de base. Par exemple, pour un produit pesant 1 kg, vous pouvez sélectionner une unité de base de 100 g.

9. Cliquez sur Save.

iPhone

1. Dans l'application Shopify, accédez à Produits > Tous les produits.

2. À l'écran Tous les produits, appuyez sur un produit :

3. Appuyez sur la variante que vous souhaitez mettre à jour.

4. Sous Pricing (Tarification), sélectionnez Show unit price for this product (Afficher le prix unitaire de ce produit).

5. Dans le champ Total measurement of product (Mesure totale de produit), saisissez le nombre d'unités de votre produit.

6. Utilisez le menu déroulant Select unit (Sélectionner l'unité) pour sélectionner l'unité de mesure de la variante. Le type d'unité que vous affichez diffère selon le type de produit que vous vendez. Par exemple, si le produit contient 2 litres de savon, sélectionnez litres.

7. Dans le champ Unit price (Prix unitaire), saisissez le prix unitaire du produit.

8. Facultatif : sélectionnez une unité de base. Par exemple, pour un produit pesant 1 kg, vous pouvez sélectionner une unité de base de 100 g.

9. Appuyez sur Enregistrer.

Android

1. Dans l'application Shopify, accédez à Produits > Tous les produits.

2. À l'écran Tous les produits, appuyez sur un produit :

3. Appuyez sur la variante que vous souhaitez mettre à jour.

4. Sous Pricing (Tarification), sélectionnez Show unit price for this product (Afficher le prix unitaire de ce produit).

5. Dans le champ Total measurement of product (Mesure totale de produit), saisissez le nombre d'unités de votre produit.

6. Utilisez le menu déroulant Select unit (Sélectionner l'unité) pour sélectionner l'unité de mesure de la variante. Le type d'unité que vous affichez diffère selon le type de produit que vous vendez. Par exemple, si le produit contient 2 litres de savon, sélectionnez litres.

7. Dans le champ Unit price (Prix unitaire), saisissez le prix unitaire du produit.

8. Facultatif : sélectionnez une unité de base. Par exemple, pour un produit pesant 1 kg, vous pouvez sélectionner une unité de base de 100 g.

9. Appuyez sur Enregistrer.

Afficher les prix unitaires dans votre boutique en ligne

Les étapes de cette personnalisation varient selon le thème choisi. Cliquez sur le bouton de votre thème avant de suivre les instructions ci-dessous :

Attention

enregistrez votre thème avant de commencer à en modifier le code. Les instructions suivantes sont avancées. Consultez la section Obtenir de l'assistance pour les personnalisations si vous avez besoin d'aide pour ajouter cette fonctionnalité à votre thème.

Debut

Étapes pour Debut

Les prix unitaires sont disponibles dans le thème Debut des versions 12.1.0 et au-delà. Si vous n’êtes pas en mesure de mettre à jour votre thème pour utiliser la dernière version, vous pouvez ajouter la personnalisation des prix unitaires aux versions antérieures de Debut.

Modifier l’extrait de prix d’un produit

1. Dans le répertoire Snippets (Extraits), ouvrez le fichier product-price.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant data-price :

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

1. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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. Ajoutez le code suivant dans la balise de fermeture </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. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la page du panier

1. Dans le répertoire Sections, cliquez sur le fichier cart-template.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier cart-template.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier une page de collection

1. Dans le répertoire Sections, cliquez sur le fichier collection.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant grid-view-item__title :

{% include 'product-price' %}

1. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier collection.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la grille d'une carte de produit

1. Dans le répertoire Snippets (Extraits), ouvrez le fichier product-card-grid.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant grid-view-item__title :

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

1. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier product-card-grid.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la liste de cartes de produits

1. Dans le répertoire Snippets (Extraits), ouvrez le fichier product-card-list.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant {% if product.available %} :

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

1. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier product-card-list.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier votre page de commande

1. Dans le répertoire Templates (Modèles), cliquez sur le fichier customers/order.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant 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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier customers/order.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier les styles de thèmes

1. Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.scss.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant .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. Ajoutez l'extrait suivant sous le code de l'étape 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;
}

Après vos modifications, le fichier theme.scss.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier un code de thème javascript

1. Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.js.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

salePrice: '[data-sale-price]'

1. Ajoutez l'extrait suivant sur le code de l'étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

productOnSale: 'price--on-sale',

1. Ajoutez l’extrait suivant après le code de l’étape 4 :

productUnitAvailable: 'price--unit-available',

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Remplacez le code par l'extrait suivant :

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

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

var salePrice = '';

1. Ajoutez l'extrait suivant sous le code de l'étape 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. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

.replace('[$]', salePrice)

1. Ajoutez l’extrait suivant sous le code de l’étape 10 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

_updatePrice: function(evt) {

1. Ajoutez l’extrait suivant avant le code de l’étape 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. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l’extrait suivant sous le code de l’étape 14 :

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

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

.removeClass(this.classes.productOnSale)

1. Ajoutez l’extrait suivant sous le code de l’étape 16 :

.removeClass(this.classes.productUnitAvailable)

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l’extrait suivant sous le code de l’étape 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);
}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier des traductions en anglais

1. Dans le répertoire Locales (Paramètres régionaux), cliquez sur le fichier en.default.json.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l'extrait suivant sur le code de l'étape 2 :

"unit_price_separator": "per",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

"include_taxes": "Tax included.",

1. Ajoutez l'extrait suivant sous le code de l'étape 4 :

"unit_price_label": "Unit price",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la mise en page de votre thème

1. Dans le répertoire Layout (Mise en page), cliquez sur le fichier theme.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l'extrait suivant sous le code de l'étape 2 :

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

Après vos modifications, le fichier theme.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

(Facultatif) Ajouter des traductions pour d'autres langues

1. Allez à la page Thèmes de votre interface administrateur Shopify.

2. Cliquez sur le bouton … > Modifier le contenu du thème par défaut.

3. Cliquez sur Modifier la langue du thème, puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.

4. Saisissez Unit Price dans le champ rechercher.

5. Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).

6. Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).

7. Cliquez sur Save.

Brooklyn

Étapes pour Brooklyn

Les prix unitaires sont disponibles dans le thème Brooklyn pour les versions 13.1.0 et supérieur. Si vous n’êtes pas en mesure de mettre à jour votre thème en installant la dernière version, vous pouvez ajouter la personnalisation des prix unitaires aux versions antérieures de Brooklyn.

Ajouter un extrait du prix d'un produit

1. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).

2. Saisissez product-price dans le champ du nom.

3. Copiez et collez le code suivant dans le fichier.

<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. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la page du produit en vedette

1. Dans le répertoire Sections, cliquez sur le fichier featured-product.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier featured-product.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la page de votre produit

1. Dans le répertoire Sections, cliquez sur le fichier product-template.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier product-template.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le code du panier dynamique

1. Dans le répertoire Snippets (Extraits), ouvrez le fichier ajax-cart-template.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant <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. Ajoutez le code suivant dans la {{/if}} de l’étape 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}}

Après vos modifications, le fichier ajax-cart-template.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier l’élément de grille de produit

1. Dans le répertoire Snippets (Extraits), ouvrez le fichier product-grid-template.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant 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. Ajoutez l’extrait suivant avant le code de l’étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant {{ 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. Ajoutez le code suivant sous le </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 -%}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la page du panier

1. Dans le répertoire Templates (Modèles), cliquez sur le fichier cart.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant <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 -%}

Remarque

si vous avez une version de thème plus ancienne, vous ne pourrez peut-être pas trouver cet extrait. Dans ce cas, ajoutez le code de l’étape 3 directement sous l’élément <span class="cart__price">.

1. Ajoutez l'extrait suivant sous le code de l'étape 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 -%}

Après vos modifications, le fichier cart.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier votre page de commande

1. Dans le répertoire Templates (Modèles), cliquez sur le fichier customers/order.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant {{ 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. Ajoutez l’extrait suivant avant le </td> de l’étape 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 -%}

Après vos modifications, le fichier customers/order.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier les styles de thème - Partie 1

1. Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.scss.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant .ajaxcart__price { :

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

1. Ajoutez l'extrait suivant sous le code de l'étape 2 :

.cart__unit-price {
    display: block;
}

Après vos modifications, le fichier theme.scss.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier les styles de thème - Partie 2

1. Dans le répertoire Assets (Ressources), cliquez sur le fichier timber.scss.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant .product-single__policies { :

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

1. Ajoutez l'extrait suivant sur le code de l'étape 2 :

.product-single__unit {
  display: none;

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Rendez-vous à la toute fin du fichier et ajoutez le code suivant :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier un code de thème JavaScript

1. Dans le répertoire Assets (Ressources), cliquez sur le fichier theme.js.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

var prodImg;

1. Ajoutez l'extrait suivant sous le code de l'étape 2 :

var unitPrice = null;

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l’extrait suivant sur le code de l’étape 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
  };
}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

vendor: cartItem.vendor

1. Ajoutez l’extrait suivant sur le code de l’étape 6 :

unitPrice: unitPrice,

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

productPrice: '#ProductPrice',

1. Ajoutez l'extrait suivant sous le code de l'étape 8 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant $(this.selectors.priceContainer, this.$container).removeClass( :

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

1. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l’extrait suivant sur le code de l’étape 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'
  );
}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant this.destroyImageCarousel(); :

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

1. Ajoutez l’extrait suivant sur le code de l’étape 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;
},

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier les traductions en anglais

1. Dans le répertoire Locales (Paramètres régionaux), cliquez sur le fichier en.default.json.

2. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

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

1. Ajoutez l'extrait suivant sur le code de l'étape 2 :

"unit_price_separator": "per",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser le code suivant :

"include_taxes": "Tax included.",

1. Ajoutez l'extrait suivant sous le code de l'étape 4 :

"unit_price": "Unit price",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

(Facultatif) Ajouter des traductions pour d'autres langues

1. Allez à la page Thèmes de votre interface administrateur Shopify.

2. Cliquez sur le bouton … > Modifier le contenu du thème par défaut

3. Cliquez sur Modifier la langue du thème, puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.

4. Saisissez Unit Price dans le champ rechercher.

5. Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).

6. Mettez à jour le champ Unit price label (Étiquette de prix unitaire) sous Products/General (Produits/Général).

7. Cliquez sur Save.

Minimal

Étapes pour Minimal

Les prix unitaires sont disponibles dans le thème Minimal des versions 11.2.0 et au-delà. Si vous n'êtes pas en mesure de mettre à jour votre thème pour utiliser la dernière version, vous pouvez ajouter la personnalisation des prix unitaires aux versions antérieures de Minimal.

Mise à jour d'extraits

1. Recherchez et ouvrez le dossier Snippets (Extraits).

2. Sélectionnez Ajouter un nouveau snippet (Ajouter un nouvel extrait).

3. Saisissez le nom product-unit-price.

4. Copiez et collez le code suivant dans 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. Cliquez sur Save.

2. Trouvez et modifiez le fichier product-grid-item.liquid.

3. Remplacez cette ligne :

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

Par cette ligne :

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

1. Utilisez le raccourci clavier rechercher pour localiser {{ price }} et ajoutez ce code ci-dessous :

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

Après vos modifications, le fichier product-grid-item.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

2. Localiser et modifier le fichier search-result.liquid

3. Utilisez le raccourci clavier rechercher pour localiser {% if item.object_type == 'product' %} et ajoutez le code suivant sur la ligne ci-dessous :

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

1. Maintenant, utilisez le raccourci clavier rechercher pour localiser les deux extraits de code suivants :

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

Et

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

1. Ajoutez le bloc de code suivant à chacun des deux extraits de code répertoriés à l’étape précédente :

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

Après vos modifications, le fichier search-result.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour des styles

1. Recherchez et ouvrez le dossier Assets (Ressources).

2. Modifiez le fichier theme.scss.liquid.

3. Utilisez le raccourci clavier rechercher pour trouver cet extrait de code :

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

1. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

font-family: $headerFontStack;

1. Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :

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

1. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

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

1. Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :

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

1. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

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

1. Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :

.cart__product-title {
  display: inline-block;

1. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

font-weight: $bodyFontWeightBold;

Après vos modifications, le fichier theme.scss.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

2. Trouvez et modifiez le fichier timber.scss.liquid.

3. Utilisez le raccourci clavier rechercher pour trouver ce code :

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

1. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

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

1. Insérez ce code à la fin du fichier :

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

Après vos modifications, le fichier timber.scss.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour des modèles

1. Recherchez et ouvrez le dossier Templates (Modèles).

2. Trouvez et modifiez le fichier customers/order.liquid.

3. Utilisez le raccourci clavier rechercher pour localiser le code :

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

1. Ajoutez ce code sous le code de l’étape 3 :

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

Après vos modifications, le fichier customers/order.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour de JavaScript

1. Trouvez et modifiez theme.js dans Assets (Ressources).

2. Utilisez le raccourci clavier rechercher pour trouver la ligne qui contient .shopify-payment-button et remplacez-la par :

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

Cet extrait de code doit ressembler à ceci :

1. Recherchez ce code :

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

1. Ajoutez ce code en dessous :

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

Le résultat ressemblerait à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver ce code :

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

1. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

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

Le résultat ressemblerait à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour du modèle de panier

1. Recherchez et ouvrez le dossier Sections.

2. Modifiez le fichier cart-template.liquid.

3. Utilisez le raccourci clavier rechercher pour trouver le code <span class="order-discount h5">{{ item.final_price | money }}</span>.

4. Remplacez la ligne par ce code :

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

1. Trouvez la première occurrence du code {%- 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. Ajoutez cet extrait de code au-dessus du code de l’étape 5 :

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

Après vos modifications, le fichier cart-template.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour de votre produit en vedette

1. Recherchez et ouvrez le dossier Sections.

2. Modifiez le fichier featured-product.liquid.

3. Utilisez le raccourci clavier rechercher pour trouver la ligne avec itemprop="name" et remplacez-la par :

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

1. Recherchez le code contenant 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. Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :

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

Après vos modifications, le fichier featured-product.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour de votre modèle de produit

1. Recherchez et ouvrez le dossier Sections.

2. Modifiez le fichier product-template.liquid.

3. Utilisez le raccourci clavier rechercher pour trouver la ligne avec itemprop="name" et remplacez-la par :

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

1. Utilisez le raccourci clavier rechercher pour localiser le code :

{% 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. Ajoutez cette ligne ci-dessous :

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

Après vos modifications, le fichier product-template.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Mise à jour des paramètres régionaux

1. Recherchez et ouvrez le dossier Locales (Paramètres régionaux).

2. Ouvrez et modifiez le fichier en.default.json.

3. Utilisez le raccourci clavier rechercher pour trouver la ligne qui contient refresh_page et remplacez-la par :

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

Le résultat ressemblerait à ceci :

1. Recherchez la ligne qui contient full_details et remplacez-la par :

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

Le résultat ressemblerait à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

(Facultatif) Ajouter des traductions pour d'autres langues

1. Allez à la page Thèmes de votre interface administrateur Shopify.

2. Cliquez sur le bouton … > Modifier le contenu du thème par défaut.

3. Cliquez sur Modifier la langue du thème, puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.

4. Saisissez Unit Price dans le champ rechercher.

5. Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).

6. Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).

7. Cliquez sur Save.

Venture

Étapes pour Venture

Les prix unitaires ont été ajoutés au thème Venture pour les versions 9.4.0 et supérieur. Si vous ne pouvez pas mettre à jour votre thème sur la dernière version, suivez ces étapes pour appliquer la personnalisation des prix unitaires aux versions antérieures d’Venture.

Modifier le fichier de langue de votre thème

1. Dans le répertoire Locales (Paramètres régionaux), cliquez sur en.default.json.

2. Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient refresh_page:

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

1. Ajoutez le code suivant au-dessus de la ligne qui se trouve à l’étape 2 :

"unit_price_separator": "per",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient stock_unavailable:

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

1. Ajoutez le code suivant au-dessus de la ligne trouvée à l’étape 4 :

"unit_price_label": "Unit price",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la feuille de style de votre thème

1. Dans le répertoire Assets (Ressources), cliquez sur theme.scss.liquid.

2. Utilisez le raccourci clavier rechercher pour localiser la ligne .product-single__policies {:

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

1. Ajoutez le code suivant en dessous de la balise de fermeture } du bloc de code trouvé à l’étape 2 :

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

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

Après vos modifications, le fichier theme.scss.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Ajouter un extrait pour le prix unitaire d'un produit

1. Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).

2. Saisissez le nom product-unit-price.

3. Ajoutez le code suivant dans 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. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier l’extrait de votre carte de produit

1. Dans le répertoire Snippets (Extraits), cliquez sur product-card.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver la ligne <a href="{{ product.url | within: collection }}".

3. Ajoutez le code suivant au-dessus de la ligne qui se trouve à l’étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne <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. Ajoutez le code suivant au-dessus de la balise de fermeture </div> trouvée à l’étape 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 -%}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de votre page de panier

1. Dans le répertoire Sections, cliquez sur cart-template.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver la première instance de <td class="cart__cell--total">:

<td class="cart__cell--total">
  {%- if item.original_line_price != item.final_line_price -%}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <del class="cart__item-total">{{ item.original_line_price | money }}</del>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    <span class="cart__item-total">{{ item.final_line_price | money }}</span>
  {%- else -%}
    <span class="cart__item-total">{{ item.original_line_price | money }}</span>
  {%- endif -%}

1. Ajoutez le code suivant sous la balise endif trouvée à l’étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver la deuxième instance de <td class="cart__cell--total">:

<td class="cart__cell--total">
  {{#if discountsApplied}}
      <span class="visually-hidden">{% endraw %}{{ 'products.product.regular_price' | t }}{% raw %}</span>
    <del class="cart__item-total">{{{originalLinePrice}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.product.sale_price' | t }}{% raw %}</span>
    <span class="cart__item-total">{{{linePrice}}}</span>
  {{else}}
    <span class="cart__item-total">{{{originalLinePrice}}}</span>
  {{/if}}
  {{#if discountsApplied}}
    <ul class="order-discount order-discount--cart order-discount--list order-discount--title" aria-label="{% endraw %}{{ 'customer.order.discount' | t }}{% raw %}">
      {{#each discounts}}
        <li class="order-discount__item">
          {% endraw %}{%- include 'icon-saletag' -%}{% raw %}{{ this.discount_application.title }} (-{{{ this.formattedAmount }}})
        </li>
      {{/each}}
    </ul>
  {{/if}}

1. Ajoutez le code suivant sous la deuxième balise de fermeture {{/if}} trouvée à l’étape 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}}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de votre page de produits en vedette

1. Dans le répertoire Sections, cliquez sur featured-product.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver la ligne {% assign current_variant = product.selected_or_first_available_variant %}.

3. Ajoutez le code suivant sous la ligne qui se trouve à l'étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient <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. Sous cette balise ul, recherchez le code {% if section.settings.stock_enable %}.

2. Ajoutez le code suivant au-dessus du bloc if trouvé à l’étape 6 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modification du modèle de la page de produits

1. Dans le répertoire Sections, cliquez sur product-template.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver la ligne {% assign current_variant = product.selected_or_first_available_variant %}.

3. Ajoutez le code suivant sous la ligne qui se trouve à l'étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient <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. Sous cette balise ul, recherchez le code {% if section.settings.stock_enable %}.

2. Ajoutez le code suivant au-dessus du bloc if trouvé à l’étape 5 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de commande de vos clients

1. Dans le répertoire Templates (Modèles), cliquez sur customers/order.liquid.

2. Utilisez le raccourci clavier rechercher pour trouver la ligne <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. Remplacez le code trouvé à l’étape 2 par le code suivant :

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

Après vos modifications, le fichier customers/order.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modification du fichier JavaScript de votre thème

1. Dans le répertoire Assets (Ressources), cliquez sur theme.js.

2. Utilisez le raccourci clavier rechercher pour trouver la ligne // Create item's data object and add to 'items' array.

3. Ajoutez le code suivant au-dessus de la ligne qui se trouve à l’étape 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
  };
}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver la ligne vendor: cartItem.vendor,

2. Ajoutez le code suivant sous la ligne qui se trouve à l'étape 4 :

unitPrice: unitPrice,

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver la ligne shopifyPaymentButton: '.shopify-payment-button'.

2. Remplacez la ligne trouvée à l’étape 6 par le code suivant :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour trouver la ligne _updateSKU: function(evt) {.

2. Ajoutez le code suivant sous la ligne qui se trouve à l’étape 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;
},

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne 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. Ajoutez le code suivant sous la balise de fermeture } trouvée à l’étape 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'
  );
}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

(Facultatif) Ajouter des traductions pour d'autres langues

1. Allez à la page Thèmes de votre interface administrateur Shopify.

2. Cliquez sur le bouton … > Modifier le contenu du thème par défaut.

3. Cliquez sur Modifier la langue du thème, puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.

4. Saisissez Unit Price dans le champ rechercher.

5. Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).

6. Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).

7. Cliquez sur Save.

Supply

Étapes pour Supply

Les prix unitaires ont été ajoutés au thème Supply pour les versions 8.3.0 et supérieur. Si vous ne parvenez pas à mettre à jour votre thème sur la dernière version, suivez ces étapes pour appliquer la personnalisation des prix unitaires aux versions précédentes de Supply.

Ajouter un extrait du prix unitaire d'un produit

1. Recherchez et ouvrez le dossier Snippets (Extraits).

2. Sélectionnez Add a new snippet (Ajouter un nouvel extrait).

3. Saisissez le nom product-unit-price.

4. Copiez et collez le code suivant dans le fichier et sélectionnez Enregistrer.

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

Après vos modifications, le fichier product-unit-price.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de produit en vedette

1. Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier featured-product.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne {% include 'price' with price %} dans le fichier:

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

1. Ajoutez le code suivant dans la </span> de fermeture de l’extrait de l’étape 2 :

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

Après vos modifications, le fichier featured-product.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de votre produit

1. Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier product-template.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne {% include 'price' with variant.price %} dans le fichier:

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

1. Ajoutez le code suivant dans la </span> de fermeture de l’étape 2 :

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

Après vos modifications, le fichier product-template.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier l’extrait de la grille d’un produit

1. Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier product-grid-item.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne {% if on_sale and section.settings.product_show_saved_amount %} dans le fichier:

{% 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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier product-grid-item.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier l’extrait de l’article de liste de produits

1. Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier product-list-item.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne <div class="product-item--price text-center"> dans le fichier:

<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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier product-list-item.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifiez votre extrait de grille de résultats de recherche

1. Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier search-result-grid.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne {% if on_sale and section.settings.product_show_saved_amount %} dans le fichier:

{% 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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier search-result-grid.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de votre panier

1. Recherchez et ouvrez le dossier Templates (Modèles), puis sélectionnez le fichier cart.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne <del class="cart-original-price order-discount--cart-price"> dans le fichier:

<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. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier cart.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le modèle de commande

1. Recherchez et ouvrez le dossier Templates (Modèles), puis sélectionnez le fichier customers/order.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne <td class="text-right" data-label="customer.order.price"> dans le fichier:

<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. Ajoutez le code suivant au-dessus de la </td> de fermeture de l’étape 2 :

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

Après vos modifications, le fichier customers/order.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier la mise en page de votre thème

1. Recherchez et ouvrez le dossier Layout (Mise en page), puis sélectionnez le fichier de theme.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne contenant only_left: dans le fichier:

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. Ajoutez le code suivant au-dessus de only_left:{{ 'products.product.only_left' | t: count: '1' | json }} de l’étape 2 :

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

Après vos modifications, le fichier theme.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier les styles de thèmes

1. Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier theme.scss.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne .product-item--price { dans le fichier:

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

1. Remplacez le code par l'extrait suivant :

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

Après vos modifications, le fichier theme.scss.liquid devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier un code de thème JavaScript

1. Recherchez et ouvrez le dossier Assets (Ressources), puis sélectionnez le fichier theme.js.liquid .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne originalSelectorId: 'productSelect-' + sectionId, dans le fichier:

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. Ajoutez le code suivant au-dessus de originalSelectorId: 'productSelect-' + sectionId, de l’étape 2 :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne productVariantCallback: function(variant) { dans le fichier:

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. Ajoutez le code suivant sous if (variant) { de l’étape 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');
}

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; dans le fichier:

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. Remplacez la ligne customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; par l’extrait suivant :

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

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); dans le fichier:

} 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. Ajoutez le code suivant sous l’extrait de l’étape 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;

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

Modifier le fichier de langue de votre thème

1. Recherchez et ouvrez le dossier Locales (Paramètres régionaux), puis sélectionnez le fichier en.default.json .

2. Utilisez le raccourci clavier rechercher pour localiser la ligne contenant "refresh_page" dans le fichier:

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

1. Ajoutez le code suivant au-dessus de "refresh_page" de l’étape 2 :

"unit_price_separator": "per",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Utilisez le raccourci clavier rechercher pour localiser la ligne contenant "will_be_in_stock_after" dans le fichier:

"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. Ajoutez le code suivant après "will_be_in_stock_after" de l’étape 5 :

"unit_price_label": "Unit price",

Après vos modifications, le résultat devrait ressembler à ceci :

1. Cliquez sur Enregistrer pour confirmer vos modifications.

(Facultatif) Ajouter des traductions pour d'autres langues

1. Allez à la page Thèmes de votre interface administrateur Shopify.

2. Cliquez sur le bouton … > Modifier le contenu du thème par défaut.

3. Cliquez sur Modifier la langue du thème, puis sélectionnez la langue que vous souhaitez modifier. Cela n'est possible que dans votre thème publié.

4. Recherchez Unit Price dans la barre de saisie.

5. Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).

6. Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).

7. Cliquez sur Save.

Afficher les prix unitaires dans les notifications de commande

Si vous avez ajouté des prix unitaires à votre produit, mais que vos prix unitaires n'apparaissent pas dans vos notifications de confirmation de commande, vous devrez peut-être mettre à jour votre modèle de notification de commande.

Étapes :

1. Depuis votre interface administrateur Shopify, accédez à Paramètres > Notifications.

2. Cliquez sur Confirmation de commande.

3. Ajoutez l'extrait suivant au modèle :

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

1. Cliquez sur Save.