Affichage des prix unitaires

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

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 :

Avertissement : sauvegardez 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.

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

La version mise à jour du fichier product-grid-item.liquid

  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 :

La version mise à jour du fichier search-result.liquid

  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 :

La version mise à jour du fichier theme.scss.liquid file - partie 1
La version mise à jour du fichier theme.scss.liquid file - partie 2
La version mise à jour du fichier theme.scss.liquid file - partie 3

  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 :

La version mise à jour du fichier Timber. scss. Liquid-partie 1
La version mise à jour du fichier Timber. scss. Liquid-partie 2

  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 :

La version mise à jour du fichier Order. Liquid

  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 :

La version mise à jour du fichier theme.js

  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 :

La version mise à jour du fichier theme.js

  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 :

La version mise à jour du fichier theme.js

  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 :

La version mise à jour du fichier cart-template.liquid

  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 :

La version mise à jour du fichier featured-product.liquid

  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 :

La version mise à jour du fichier product-template.liquid

  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 :

La version mise à jour du fichier en.default.json

  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 :

La version mise à jour du fichier en.default.json

  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 Actions > Modifier les langues.

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

Bouton de changement de langue

  1. Saisissez Unit Price dans le champ rechercher.

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

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

Champs mis à jour

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

La version mise à jour du fichier en.default.json

  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 :

La version mise à jour du fichier en.default.json

  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 :

La version mise à jour du fichier theme.scss.liquid

  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 :

La version mise à jour du fichier product-card.liquid

  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 :

La version mise à jour du fichier product-card.liquid

  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 :

La version mise à jour du fichier cart-template.liquid

  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 :

La version mise à jour du fichier cart-template.liquid

  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 :

La version mise à jour du fichier featured-product.liquid

  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 :

Version mise à jour du fichier featured-product.liquid

  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 :

Version mise à jour du fichier product-template.liquid

  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 :

Version mise à jour du fichier product-template.liquid

  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 :

Version mise à jour du fichier customers/order.liquid

  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 :

Version mise à jour du fichier theme.js

  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 :

Version mise à jour du fichier theme.js

  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 :

Version mise à jour du fichier theme.js

  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 :

Version mise à jour du fichier theme.js

  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 :

Version mise à jour du fichier theme.js

  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 Actions > Modifier les langues

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

Sélection de la langue du thème

  1. Saisissez Unit Price dans le champ rechercher.

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

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

Traductions des prix unitaires mises à jour

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

La version mise à jour du fichier Product-Unit-Price. Liquid

  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 :

La version mise à jour du fichier featured-product.liquid

  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 :

La version mise à jour du fichier product-template.liquid

  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 :

La version mise à jour du fichier product-grid-item.liquid

  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 :

La version mise à jour du fichier Product-List-Item. Liquid

  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 :

La version mise à jour du fichier Search-result-Grid. Liquid

  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 :

La version mise à jour du fichier cart.liquid

  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 :

La version mise à jour du fichier customers/order.liquid

  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 :

La version mise à jour du fichier theme.liquid

  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 :

La version mise à jour du fichier theme.scss.liquid

  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 :

La version mise à jour du fichier theme.js.liquid

  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 :

La version mise à jour du fichier theme.js.liquid

  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 :

La version mise à jour du fichier theme.js.liquid

  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 :

La version mise à jour du fichier theme.js.liquid

  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 :

La version mise à jour du fichier en.default.json

  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 :

La version mise à jour du fichier en.default.json

  1. Cliquez sur Enregistrer pour confirmer vos modifications.

(Facultatif) Ajouter des traductions pour d'autres langues

  1. Accédez à la page thèmes

  2. Cliquez sur Actions > Modifier les langues

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

Étape facultative 3

  1. Rechercher "Unit Price" dans la barre de saisie

  2. Mettre à jour le champ "unit price separator" sous "General/Accessibility"

  3. Mettre à jour le champ "unit price label" sous "Products/Product"

Étape facultative 6

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.

Prêt(e) à commencer à vendre avec Shopify ?

Essayez gratuitement