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.
Sur cette page
Ajouter des prix unitaires à votre produit
Depuis votre interface administrateur Shopify, allez à Produits.
Cliquez sur le produit que vous souhaitez modifier.
Facultatif : si votre produit comporte des variantes, cliquez sur la variante que vous souhaitez modifier dans la section Variantes.
Dans la section Tarification, sélectionnez Afficher le prix unitaire pour ce produit.
Dans le champ Dimension totale du produit, saisissez la dimension totale de votre produit, puis sélectionnez l’unité de mesure.
Facultatif : dans le champ Dimension de base, ajoutez votre dimension de base, puis sélectionnez l’unité de mesure. Par exemple, pour un produit de 1 kg, vous pouvez sélectionner une unité de base de 100 g.
Cliquez sur Enregistrer.
- Dans l'application Shopify, accédez à Produits > Tous les produits.
- Appuyez sur le produit que vous souhaitez modifier.
- Appuyez sur la zone du prix de votre produit.
- Sélectionnez Afficher le prix unitaire.
- Dans le champ Dimension totale du produit, saisissez la dimension totale de votre produit, puis sélectionnez l’unité de mesure.
- Facultatif : dans le champ Dimension de base, ajoutez votre dimension de base, puis sélectionnez l’unité de mesure. Par exemple, pour un produit de 1 kg, vous pouvez sélectionner une unité de base de 100 g.
- Appuyez sur Enregistrer.
- Dans l'application Shopify, accédez à Produits > Tous les produits.
- Appuyez sur le produit que vous souhaitez modifier.
- Appuyez sur la zone du prix de votre produit.
- Sélectionnez Afficher le prix unitaire.
- Dans le champ Dimension totale du produit, saisissez la dimension totale de votre produit, puis sélectionnez l’unité de mesure.
- Facultatif : dans le champ Dimension de base, ajoutez votre dimension de base, puis sélectionnez l’unité de mesure. Par exemple, pour un produit de 1 kg, vous pouvez sélectionner une unité de base de 100 g.
- Appuyez sur ✓.
Afficher les prix unitaires dans une boutique en ligne
La fonctionnalité du prix unitaire est déjà disponible sur tous les thèmes Online Store 2.0. Aucune action n’est requise pour afficher les prix unitaires sur votre boutique en ligne.
Si vous avez un ancien thème et que vous n’êtes pas en mesure de le mettre à niveau vers une version compatible avec la fonctionnalité des prix unitaires, vous pouvez personnaliser le code de votre thème manuellement de manière à afficher le prix unitaire.
Afficher les prix unitaires sur un ancien thème
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 :
É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
Dans le répertoire Snippets (Extraits), ouvrez le fichier
product-price.liquid.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>- 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 :
- 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>- 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 }} </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 %}- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page du panier
Dans le répertoire Sections, cliquez sur le fichier
cart-template.liquid.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 -%}- 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 }} </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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier une page de collection
Dans le répertoire Sections, cliquez sur le fichier
collection.liquid.Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant
grid-view-item__title:
{% include 'product-price' %}- Remplacez le code par l'extrait suivant :
{% include 'product-price', variant: nil %}Après vos modifications, le fichier collection.liquid devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la grille d'une carte de produit
Dans le répertoire Snippets (Extraits), ouvrez le fichier
product-card-grid.liquid.Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant
grid-view-item__title:
{% include 'product-price', variant: product %}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la liste de cartes de produits
Dans le répertoire Snippets (Extraits), ouvrez le fichier
product-card-list.liquid.Utilisez le raccourci clavier rechercher pour localiser le code suivant en recherchant
{% if product.available %}:
{% include 'product-price', variant: product %}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier votre page de commande
Dans le répertoire Templates (Modèles), cliquez sur le fichier
customers/order.liquid.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 -%}- 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 }} </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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thèmes
Dans le répertoire Assets (Ressources), cliquez sur le fichier
theme.scss.liquid.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%);
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier un code de thème javascript
Dans le répertoire Assets (Ressources), cliquez sur le fichier
theme.js.Utilisez le raccourci clavier rechercher pour localiser le code suivant :
salePrice: '[data-sale-price]'- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
productOnSale: 'price--on-sale',- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';- Remplacez le code par l'extrait suivant :
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var salePrice = '';- 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);
}- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
.replace('[$]', salePrice)- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
_updatePrice: function(evt) {- 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;
},- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var $salePrice = $(this.selectors.salePrice, $priceContainer);- Ajoutez l’extrait suivant sous le code de l’étape 14 :
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
.removeClass(this.classes.productOnSale)- Ajoutez l’extrait suivant sous le code de l’étape 16 :
.removeClass(this.classes.productUnitAvailable)- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier des traductions en anglais
Dans le répertoire Locales (Paramètres régionaux), cliquez sur le fichier
en.default.json.Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"selection_help": "press the space key then arrow keys to make a selection"- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"include_taxes": "Tax included.",- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la mise en page de votre thème
Dans le répertoire Layout (Mise en page), cliquez sur le fichier
theme.liquid.Utilisez le raccourci clavier rechercher pour localiser le code suivant :
regularPrice: {{ 'products.product.regular_price' | t | json }},- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut.
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é.
Saisissez
Unit Pricedans le champ rechercher.Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save.
É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
Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Saisissez
product-pricedans le champ du nom.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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span data-unit-price-base-unit>
{%- if variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
</div>
</div>- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page du produit en vedette
Dans le répertoire Sections, cliquez sur le fichier
featured-product.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page de votre produit
Dans le répertoire Sections, cliquez sur le fichier
product-template.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le code du panier dynamique
Dans le répertoire Snippets (Extraits), ouvrez le fichier
ajax-cart-template.liquid.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}}- 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"> {{'general.accessibility.unit_price_separator' | t}} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}Après vos modifications, le fichier ajax-cart-template.liquid devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier l’élément de grille de produit
Dans le répertoire Snippets (Extraits), ouvrez le fichier
product-grid-template.liquid.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.' -%}- 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 :
- 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>- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
</span>
{%- endcapture -%}
<span class="product-unit-price">
<span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
<span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}Après vos modifications, le résultat devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la page du panier
Dans le répertoire Templates (Modèles), cliquez sur le fichier
cart.liquid.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 -%}- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if item.unit_price_measurement.reference_value != 1 -%}
{{- item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}Après vos modifications, le fichier cart.liquid devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier votre page de commande
Dans le répertoire Templates (Modèles), cliquez sur le fichier
customers/order.liquid.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>- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
{%- endcapture -%}
<span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>
{%- endif -%}Après vos modifications, le fichier customers/order.liquid devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thème - Partie 1
Dans le répertoire Assets (Ressources), cliquez sur le fichier
theme.scss.liquid.Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant
.ajaxcart__price {:
.ajaxcart__price {
font-size: em(13px);
display: block;
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thème - Partie 2
Dans le répertoire Assets (Ressources), cliquez sur le fichier
timber.scss.liquid.Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant
.product-single__policies {:
.product-single__policies {
margin: 15px 0 25px 0;
}- 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 :
- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier un code de thème JavaScript
Dans le répertoire Assets (Ressources), cliquez sur le fichier
theme.js.liquid.Utilisez le raccourci clavier rechercher pour localiser le code suivant :
var prodImg;- Ajoutez l'extrait suivant sous le code de l'étape 2 :
var unitPrice = null;Après vos modifications, le résultat devrait ressembler à ceci :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
// Create item's data object and add to 'items' array- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
vendor: cartItem.vendor- Ajoutez l’extrait suivant sur le code de l’étape 6 :
unitPrice: unitPrice,Après vos modifications, le résultat devrait ressembler à ceci :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
productPrice: '#ProductPrice',- 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 :
- 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'
);- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
$(this.selectors.SKU).html(variant.sku);- 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 :
- Utilisez le raccourci clavier rechercher pour trouver le code suivant en recherchant
this.destroyImageCarousel();:
onUnload: function() {
this.$container.off(this.settings.namespace);
this.destroyImageCarousel();
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les traductions en anglais
Dans le répertoire Locales (Paramètres régionaux), cliquez sur le fichier
en.default.json.Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"refresh_page": "choosing a selection results in a full page refresh"- 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 :
- Utilisez le raccourci clavier rechercher pour localiser le code suivant :
"include_taxes": "Tax included.",- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut
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é.
Saisissez
Unit Pricedans le champ rechercher.Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette de prix unitaire) sous Products/General (Produits/Général).
Cliquez sur Save.
É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
Recherchez et ouvrez le dossier Snippets (Extraits).
Sélectionnez Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Saisissez le nom
product-unit-price.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>Cliquez sur Save.
Trouvez et modifiez le fichier
product-grid-item.liquid.Remplacez cette ligne :
{% capture price %}{{ featured.price | money }}{% endcapture %}Par cette ligne :
{%- assign price = featured.price | money -%}- 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 :
Cliquez sur Enregistrer pour confirmer vos modifications.
Localiser et modifier le fichier
search-result.liquidUtilisez 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 -%}- 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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour des styles
Recherchez et ouvrez le dossier Assets (Ressources).
Modifiez le fichier
theme.scss.liquid.Utilisez le raccourci clavier rechercher pour trouver cet extrait de code :
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;- Insérez le bloc de code suivant sous l’extrait de code que vous avez trouvé à l’étape précédente :
font-family: $headerFontStack;- Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :
.grid-link__sale_price {
opacity: 0.95;
filter: alpha(opacity=95);
}- 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;
}- 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;
}- 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;
}- Utilisez le raccourci clavier rechercher pour trouver l’extrait de code suivant :
.cart__product-title {
display: inline-block;- 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 :
Cliquez sur Enregistrer pour confirmer vos modifications.
Trouvez et modifiez le fichier
timber.scss.liquid.Utilisez le raccourci clavier rechercher pour trouver ce code :
.quantity-selector {
display: inline-block;
}
}- 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;
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour des modèles
Recherchez et ouvrez le dossier Templates (Modèles).
Trouvez et modifiez le fichier
customers/order.liquid.Utilisez le raccourci clavier rechercher pour localiser le code :
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour de JavaScript
Trouvez et modifiez
theme.jsdans Assets (Ressources).Utilisez le raccourci clavier rechercher pour trouver la ligne qui contient
.shopify-payment-buttonet 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 :
- Recherchez ce code :
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}- 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 :
- Utilisez le raccourci clavier rechercher pour trouver ce code :
.attr('data-zoom')
});
});- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour du modèle de panier
Recherchez et ouvrez le dossier Sections.
Modifiez le fichier
cart-template.liquid.Utilisez le raccourci clavier rechercher pour trouver le code
<span class="order-discount h5">{{ item.final_price | money }}</span>.Remplacez la ligne par ce code :
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>- 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 -%}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour de votre produit en vedette
Recherchez et ouvrez le dossier Sections.
Modifiez le fichier
featured-product.liquid.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>- 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 %}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour de votre modèle de produit
Recherchez et ouvrez le dossier Sections.
Modifiez le fichier
product-template.liquid.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>- 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 %}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Mise à jour des paramètres régionaux
Recherchez et ouvrez le dossier Locales (Paramètres régionaux).
Ouvrez et modifiez le fichier
en.default.json.Utilisez le raccourci clavier rechercher pour trouver la ligne qui contient
refresh_pageet remplacez-la par :
"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"Le résultat ressemblerait à ceci :
- Recherchez la ligne qui contient
full_detailset remplacez-la par :
"full_details": "Full details",
"unit_price_label": "Unit price"Le résultat ressemblerait à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut.
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é.
Saisissez
Unit Pricedans le champ rechercher.Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save.
É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
Dans le répertoire Locales (Paramètres régionaux), cliquez sur
en.default.json.Utilisez le raccourci clavier rechercher pour localiser la ligne qui contient
refresh_page:
"refresh_page": "choosing a selection results in a full page refresh"- 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 :
- 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."- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la feuille de style de votre thème
Dans le répertoire Assets (Ressources), cliquez sur
theme.scss.liquid.Utilisez le raccourci clavier rechercher pour localiser la ligne
.product-single__policies {:
.product-single__policies {
font-size: em($font-size-base - 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Ajouter un extrait pour le prix unitaire d'un produit
Dans le répertoire Snippets (Extraits), cliquez sur Ajouter un nouveau snippet (Ajouter un nouvel extrait).
Saisissez le nom
product-unit-price.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>- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier l’extrait de votre carte de produit
Dans le répertoire Snippets (Extraits), cliquez sur
product-card.liquid.Utilisez le raccourci clavier rechercher pour trouver la ligne
<a href="{{ product.url | within: collection }}".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 :
- 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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre page de panier
Dans le répertoire Sections, cliquez sur
cart-template.liquid.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 -%}- Ajoutez le code suivant sous la balise
endiftrouvé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 :
- 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}}- 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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{% raw %}
<span>{{{ unitPrice.price }}}</span>{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
</span>
{{/if}}Après vos modifications, le résultat devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre page de produits en vedette
Dans le répertoire Sections, cliquez sur
featured-product.liquid.Utilisez le raccourci clavier rechercher pour trouver la ligne
{% assign current_variant = product.selected_or_first_available_variant %}.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 :
- 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 %}Sous cette balise
ul, recherchez le code{% if section.settings.stock_enable %}.Ajoutez le code suivant au-dessus du bloc
iftrouvé à 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modification du modèle de la page de produits
Dans le répertoire Sections, cliquez sur
product-template.liquid.Utilisez le raccourci clavier rechercher pour trouver la ligne
{% assign current_variant = product.selected_or_first_available_variant %}.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 :
- 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 %}Sous cette balise
ul, recherchez le code{% if section.settings.stock_enable %}.Ajoutez le code suivant au-dessus du bloc
iftrouvé à 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de commande de vos clients
Dans le répertoire Templates (Modèles), cliquez sur
customers/order.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modification du fichier JavaScript de votre thème
Dans le répertoire Assets (Ressources), cliquez sur
theme.js.Utilisez le raccourci clavier rechercher pour trouver la ligne
// Create item's data object and add to 'items' array.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 :
Utilisez le raccourci clavier rechercher pour trouver la ligne
vendor: cartItem.vendor,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 :
Utilisez le raccourci clavier rechercher pour trouver la ligne
shopifyPaymentButton: '.shopify-payment-button'.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 :
Utilisez le raccourci clavier rechercher pour trouver la ligne
_updateSKU: function(evt) {.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 :
- 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);
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut.
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é.
Saisissez
Unit Pricedans le champ rechercher.Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save.
É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
Recherchez et ouvrez le dossier Snippets (Extraits).
Sélectionnez Add a new snippet (Ajouter un nouvel extrait).
Saisissez le nom
product-unit-price.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"> {{ 'general.accessibility.unit_price_separator' | t }} </span>
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
<span>
{%- if available and variant.unit_price_measurement -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}
<span data-unit-price>{{ variant.unit_price | money }}</span>
{{- unit_price_separator -}}
<span data-unit-price-base-unit>{{- unit_price_base_unit -}}</span>
</div>Après vos modifications, le fichier product-unit-price.liquid devrait ressembler à ceci :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de produit en vedette
Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier
featured-product.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre produit
Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier
product-template.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier l’extrait de la grille d’un produit
Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier
product-grid-item.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier l’extrait de l’article de liste de produits
Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier
product-list-item.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifiez votre extrait de grille de résultats de recherche
Recherchez et ouvrez le dossier Snippets (Extraits), puis sélectionnez le fichier
search-result-grid.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de votre panier
Recherchez et ouvrez le dossier Templates (Modèles), puis sélectionnez le fichier
cart.liquid.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 -%}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le modèle de commande
Recherchez et ouvrez le dossier Templates (Modèles), puis sélectionnez le fichier
customers/order.liquid.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>- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier la mise en page de votre thème
Recherchez et ouvrez le dossier Layout (Mise en page), puis sélectionnez le fichier de
theme.liquid.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 }}
},- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier les styles de thèmes
Recherchez et ouvrez le dossier Sections , puis sélectionnez le fichier
theme.scss.liquid.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;
}
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier un code de thème JavaScript
Recherchez et ouvrez le dossier Assets (Ressources), puis sélectionnez le fichier
theme.js.liquid.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'
}- 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 :
- 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');
}- 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 :
- 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>';- 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 :
- 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();
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
Modifier le fichier de langue de votre thème
Recherchez et ouvrez le dossier Locales (Paramètres régionaux), puis sélectionnez le fichier
en.default.json.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"
},- 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 :
- 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"
}- 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 :
- Cliquez sur Enregistrer pour confirmer vos modifications.
(Facultatif) Ajouter des traductions pour d'autres langues
Allez à la page Thèmes de votre interface administrateur Shopify.
Cliquez sur le bouton … > Modifier le contenu du thème par défaut.
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é.
Recherchez
Unit Pricedans la barre de saisie.Mettez à jour la zone Unit price separator (Séparateur de prix unitaire) sous General/Accessibility (Général/Accessibilité).
Mettez à jour le champ Unit price label (Étiquette du prix unitaire) sous Products/Product (Produits/Produit).
Cliquez sur Save.
Afficher les prix unitaires dans les notifications de commande
Par défaut, la notification de confirmation de commande affiche les prix unitaires lorsque la fonctionnalité est activée.
Si vous avez ajouté des prix unitaires à votre produit, mais qu’ils n’apparaissent pas dans vos notifications de confirmation de commande, vous devrez peut-être mettre à jour votre modèle manuellement.
Étapes :
Depuis votre interface administrateur Shopify, accédez à Paramètres > Notifications.
Dans la section Commandes, cliquez sur Confirmation de commande.
Cliquez sur Modifier le code.
Dans la classe
"order-list__item-price", ajoutez l’extrait suivant au modèle :
{%- if line_item.unit_price_measurement -%}
<div class="order-list__unit-price">
{{ line_item.unit_price | money }}/
{%- if line_item.unit_price_measurement.reference_value != 1 -%}
{{- line_item.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ line_item.unit_price_measurement.reference_unit }}
</div>
{%- endif -%}
5. Cliquez sur Enregistrer.