Weergave eenheidsprijzen

Opmerking

Deze handleiding is alleen relevant voor merchants die hun producten in Frankrijk verkopen. Als je je producten in Frankrijk verkoopt, maar je bedrijf zelf niet in Frankrijk is gevestigd, neem je contact op met Shopify Support om deze functie te activeren.

Als je producten in bepaalde hoeveelheden of maten verkoopt, moet je mogelijk de prijs per eenheid voor bepaalde producten weergeven. Wanneer je een eenheidsprijs voor een product invoert, wordt de eenheidsprijs weergegeven op de productpagina's, verzamelpagina's, winkelwagenpagina, checkout-pagina's en bevestigingsmeldingen voor bestellingen.

Eenheidsprijzen aan je producten toevoegen

Desktop

1. Ga vanaf je Shopify-beheercentrum naar Producten.

2. Klik op het product dat je wilt bewerken.

3. Optioneel: Als je product varianten heeft, klik je in de sectie Varianten op de variant die je wilt bewerken.

4. Selecteer Eenheidsprijs voor dit product weergeven in de sectie Prijsstelling.

5. Voer in het veld Totale productafmetingen de totale afmetingen van je product in en selecteer vervolgens de maateenheid.

6. Optioneel: Voeg de basismaat toe in het veld Basismaat en selecteer vervolgens de maateenheid. Als een product bijvoorbeeld 1 kg weegt, kun je een basismaateenheid van 100 g selecteren.

7. Klik op Opslaan.

iPhone

1. Ga vanuit de Shopify-app naar Producten > Alle producten.
2. Tik op het product dat je wilt bewerken.
3. Tik op het gedeelte met de productprijs.
4. Selecteer Eenheidsprijs weergeven.
5. Voer in het veld Totale productafmetingen de totale afmetingen van je product in en selecteer vervolgens de maateenheid.
6. Optioneel: Voeg de basismaat toe in het veld Basismaat en selecteer vervolgens de maateenheid. Als een product bijvoorbeeld 1 kg weegt, kun je een basismaateenheid van 100 g selecteren.
7. Tik op Opslaan.

Android

1. Ga vanuit de Shopify-app naar Producten > Alle producten.
2. Tik op het product dat je wilt bewerken.
3. Tik op het gedeelte met de productprijs.
4. Selecteer Eenheidsprijs weergeven.
5. Voer in het veld Totale productafmetingen de totale afmetingen van je product in en selecteer vervolgens de maateenheid.
6. Optioneel: Voeg de basismaat toe in het veld Basismaat en selecteer vervolgens de maateenheid. Als een product bijvoorbeeld 1 kg weegt, kun je een basismaateenheid van 100 g selecteren.
7. Tik op ✓.

Eenheidsprijzen weergeven in je webshop

In alle Online Store 2.0-thema's is de eenheidsprijsfunctie al beschikbaar. Je hoeft niets te doen om eenheidsprijzen in je webshop weer te geven.

Als je een vintage thema hebt en je kunt het niet updaten naar een versie die de eenheidsprijsfunctie ondersteunt, dan kun je de themacode handmatig aanpassen.

Eenheidsprijzen weergeven in een vintage thema

Let op

Maak een back-up van je thema voordat je de code gaat bewerken. De volgende instructies zijn wat ingewikkelder. Als je hulp nodig hebt om de functie aan je thema toe te voegen, kun je onze hulp bij aanpassingen raadplegen.

De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop voor je thema voordat je de onderstaande instructies volgt:

Debut

Stappen voor Debut

Eenheidsprijzen zijn beschikbaar in het Debut-thema voor versies 12.1.0 en hoger. Als je je thema niet kunt bijwerken naar de nieuwste versie, kun je aangepaste eenheidsprijzen toevoegen aan vorige versies van Debut.

Het productprijsfragment bewerken

1. Klik in de map Fragmenten op het bestand product-price.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar data-price:

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

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar price__sale:

<div class="price__sale">
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="price-item price-item--sale" data-sale-price>
      {{ money_price }}
    </span>
    <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
  </dd>
</div>

1. Voeg de volgende code toe onder de afsluitende </div> tag:

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

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je winkelwagenpagina

1. Klik in de directory Secties op het bestand cart-template.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar cart__price-wrapper:

{%- if item.original_price != item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ item.original_price | money }}
{%- endif -%}

1. Vervang de code door het volgende fragment:

<dl>
  {%- if item.original_price != item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if item.unit_price_measurement.reference_value != 1 -%}
      {{- item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Na je bewerkingen ziet het bestand cart-template.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je collectiepagina

1. Klik in de directory Secties op het bestand collection.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar grid-view-item__title:

{% include 'product-price' %}

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand collection.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je productkaartgrid

1. Klik in de map Fragmenten op het bestand product-card-grid.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar grid-view-item__title:

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

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand product-card-grid.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je productkaartlijst

1. Klik in de map Fragmenten op het bestand product-card-list.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar {% if product.available %}:

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

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand product-card-list.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je bestelpagina

1. Klik in de map Templates op het bestand customers/order.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar data-label="{{ 'customer.order.price' | t }}":

{%- if line_item.original_price != line_item.final_price -%}
  <dl>
    <dt>
      <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      <s>{{ line_item.original_price | money }}</s>
    </dd>
    <dt>
      <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="order-discount">{{ line_item.final_price | money }}</span>
    </dd>
  </dl>
{%- else -%}
  {{ line_item.original_price | money }}
{%- endif -%}

1. Vervang de code door het volgende fragment:

<dl>
  {%- if line_item.original_price != line_item.final_price -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    <s>{{ line_item.original_price | money }}</s>
  </dd>
  <dt>
    <span class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
  </dt>
  <dd>
    <span class="order-discount">{{ line_item.final_price | money }}</span>
  </dd>
  {%- else -%}
  <dt>
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  </dt>
  <dd>
    {{ line_item.original_price | money }}
  </dd>
  {%- endif -%}
  {%- if line_item.unit_price_measurement -%}
  <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
  </dt>
  <dd>
    <span class="price-unit-price">
      {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
      {%- if line_item.unit_price_measurement.reference_value != 1 -%}
      {{- line_item.unit_price_measurement.reference_value -}}
      {%- endif -%}
      {{ line_item.unit_price_measurement.reference_unit }}
      {%- endcapture -%}
      <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </dd>
  {%- endif -%}
</dl>

Na je bewerkingen ziet het bestand customers/order.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je themastijlen

1. Klik in de map Activa op het bestand theme.scss.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar .price__vendor {:

.price__vendor {
  color: $color-body-text;
  font-size: 0.9em;
  font-weight: $font-weight-body;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 5px 0 10px;
  width: 100%;
  @include flex-basis(100%);
}

1. Voeg het volgende fragment toe onder de code van stap 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;
}

Na je bewerkingen ziet het bestand theme.scss.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je JavaScript-themacode

1. Klik in de map Activa op het bestand theme.js.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden:

salePrice: '[data-sale-price]'

1. Voeg het volgende fragment toe aan de code van stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

productOnSale: 'price--on-sale',

1. Voeg het volgende fragment toe na de code van stap 4:

productUnitAvailable: 'price--unit-available',

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Vervang de code door het volgende fragment:

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

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

var salePrice = '';

1. Voeg het volgende fragment toe onder de code van stap 8:

var unitLabel = '';
var unitPrice = '';
if (variant.unit_price_measurement) {
  unitLabel = theme.strings.unitPrice;
  unitPrice =
    theme.Currency.formatMoney(variant.unit_price, theme.moneyFormat) +
    ' ' +
    theme.strings.unitPriceSeparator +
    ' ' +
    this._getBaseUnit(variant);
}

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

.replace('[$]', salePrice)

1. Voeg het volgende fragment toe onder de code van stap 10:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

_updatePrice: function(evt) {

1. Voeg het volgende fragment toe vóór de code van stap 12:

_getBaseUnit: function(variant) {
  return variant.unit_price_measurement.reference_value === 1
    ? variant.unit_price_measurement.reference_unit
    : variant.unit_price_measurement.reference_value +
        variant.unit_price_measurement.reference_unit;
},

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe onder de code van stap 14:

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

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

.removeClass(this.classes.productOnSale)

1. Voeg het volgende fragment toe onder de code van stap 16:

.removeClass(this.classes.productUnitAvailable)

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe onder de code van stap 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);
}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je Engelse vertalingen bewerken

1. Klik in de map Locales op het bestand en.default.json.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe aan de code van stap 2:

"unit_price_separator": "per",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

"include_taxes": "Tax included.",

1. Voeg het volgende fragment toe onder de code van stap 4:

"unit_price_label": "Unit price",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je thema-opmaak

1. Klik in de map Layout op het bestand theme.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe onder de code van stap 2:

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

Na je bewerkingen ziet het bestand theme.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

(Optioneel) Vertalingen voor andere talen toevoegen

1. Ga naar de pagina Thema's in je Shopify-beheercentrum.

2. Klik op de knop ... > Content van standaardthema bewerken.

3. Klik op Themataal wijzigen en selecteer vervolgens de taal die je wilt bewerken. Dit is alleen mogelijk op je gepubliceerde thema.

4. Voer Unit Price in het zoekveld in.

5. Update het veld Eenheidsprijsscheider onder Algemeen/Toegankelijkheid.

6. Update het veld Eenheidsprijslabel onder Producten/Product.

7. Klik op Opslaan.

Brooklyn

Stappen voor Brooklyn

Eenheidsprijzen zijn beschikbaar in het Brooklyn-thema voor versies 13.1.0 en hoger. Als je je thema niet kunt bijwerken naar de nieuwste versie, kun je aangepaste eenheidsprijzen toevoegen aan eerdere versies van Brooklyn.

Een productprijsfragment toevoegen

1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

2. Voer product-price in het naamveld in.

3. Kopieer en plak de volgende code in het bestand.

<div class="price-container{% if variant.unit_price_measurement %} price-container--unit-available{% endif %}" data-price-container>
  {%- if variant.compare_at_price > variant.price -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper" aria-hidden="false">
      <span id="ComparePrice" class="product-single__price--compare-at">
        {{ variant.compare_at_price | money }}
      </span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
  {%- else -%}
    <span id="PriceA11y" class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    <span class="product-single__price--wrapper hide" aria-hidden="true">
      <span id="ComparePrice" class="product-single__price--compare-at"></span>
    </span>
    <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
  {%- endif -%}
  <span id="ProductPrice"
    class="product-single__price{% if variant.compare_at_price > variant.price %} on-sale{% endif %}"
    itemprop="price"
    content="{{ variant.price | divided_by: 100.00 }}">
    {{ variant.price | money }}
  </span>
  <div class="product-single__unit">
    {%- capture unit_price_separator -%}
      <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
      <span data-unit-price-base-unit>
        {%- if variant.unit_price_measurement -%}
          {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ variant.unit_price_measurement.reference_unit }}
        {%- endif -%}
      </span>
    {%- endcapture -%}
    <span class="product-unit-price">
      <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
  </div>
</div>

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je aanbevolen productpagina

1. Klik in de directory Secties op het bestand featured-product.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if compare_at_price > price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if compare_at_price > price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ price | money }}
    </span>
</div>

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand featured-product.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je productpagina bewerken

1. Klik in de directory Secties op het bestand product-template.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar itemprop="offers":

<div data-price-container>
    {% comment %}
        Optionally show the 'compare at' or original price of the product.
    {% endcomment %}
    {% if current_variant.compare_at_price > current_variant.price %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper" aria-hidden="false">
        <span id="ComparePrice" class="product-single__price--compare-at">
            {{ current_variant.compare_at_price | money }}
        </span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span id="PriceA11y" class="visually-hidden" {% unless current_variant.available %}aria-hidden="true"{% endunless %}>{{ 'products.general.regular_price' | t }}</span>
        <span class="product-single__price--wrapper hide" aria-hidden="true">
        <span id="ComparePrice" class="product-single__price--compare-at"></span>
        </span>
        <span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
    {% endif %}
    <span id="ProductPrice"
        class="product-single__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}"
        itemprop="price"
        content="{{ current_variant.price | divided_by: 100.00 }}"
        {% unless current_variant.available %}aria-hidden="true"{% endunless %}>
        {{ current_variant.price | money }}
    </span>
</div>

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand product-template.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je Ajax-winkelwagen

1. Klik in de map Fragmenten op het bestand ajax-cart-template.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar <span class="ajaxcart__price">{{{price}}}</span>:

{{#if discountsApplied}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.regular_price' | t }}{% raw %}</span>
    <del class="ajaxcart__price">{{{price}}}</del>
    <span class="visually-hidden">{% endraw %}{{ 'products.general.sale_price' | t }}{% raw %}</span>
    <span class="ajaxcart__price">{{{discountedPrice}}}</span>
    {{else}}
    <span class="ajaxcart__price">{{{price}}}</span>
{{/if}}

1. Voeg de volgende code toe onder de {{/if}} uit stap 2:

{{#if unitPrice}}
    <span class="visually-hidden">{% endraw %}{{ 'products.general.unit_price' | t }}{% raw %}</span>
    <span class="cart__unit-price">
        {% endraw %}
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{'general.accessibility.unit_price_separator' | t}}&nbsp;</span>
        {%- endcapture -%}
        {% raw %}
        <span>{{{ unitPrice.price }}}</span>{{% endraw %}{{- unit_price_separator -}}{% raw %}{{#if unitPrice.addRefererenceValue }}{{{ unitPrice.reference_value }}}{{/if}}{{{ unitPrice.reference_unit }}}
    </span>
{{/if}}

Na je bewerkingen ziet het bestand ajax-cart-template.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je productgriditem

1. Klik in de map Fragmenten op het bestand product-grid-template.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar capture img_id_class:

{% capture img_id_class %}ProductImage-{{ product.featured_image.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_image.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

1. Voeg het volgende fragment toe voor de code van stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar {{ product.price | money_without_trailing_zeros }}:

<span class="grid-product__price">
    {% if on_sale %}
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
    {% else %}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
    {% endif %}
    {% if product.price_varies %}
        {{ product.price_min | money_without_trailing_zeros }}
        <span class="icon-fallback-text">
        <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
        <span class="fallback-text">+</span>
        </span>
    {% else %}
        {{ product.price | money_without_trailing_zeros }}
    {% endif %}
</span>

1. Voeg de volgende code toe onder </span>:

{%- if product.price_varies == false and variant.unit_price_measurement -%}
    {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
    {%- endcapture -%}
    {%- capture unit_price_base_unit -%}
        <span>
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
            {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
        </span>
    {%- endcapture -%}
    <span class="product-unit-price">
        <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
        <span>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je winkelwagenpagina

1. Klik in de map Templates op het bestand cart.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar <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 -%}

Opmerking

Als je een oudere themaversie hebt, kun je dit fragment mogelijk niet vinden. Voeg in dat geval de code van stap 3 direct onder het element <span class="cart__price"> toe.

1. Voeg het volgende fragment toe onder de code van stap 2:

{%- if item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="cart__unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if item.unit_price_measurement.reference_value != 1 -%}
            {{- item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span data-unit-price>{{ item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Na je bewerkingen ziet het bestand cart.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je bestelpagina

1. Klik in de map Templates op het bestand customers/order.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar {{ line_item.original_price | money }}:

<td class="text-right" data-label="{{ 'customer.order.price' | t }}">
    {%- if line_item.original_price != line_item.final_price -%}
        <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        <del>{{ line_item.original_price | money }}</del>
        <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        <span class="order-discount">{{ line_item.final_price | money }}</span>
    {%- else -%}
        {{ line_item.original_price | money }}
    {%- endif -%}
</td>

1. Voeg het volgende fragment toe vóór </td> uit stap 2:

{%- if line_item.unit_price_measurement -%}
    <span class="visually-hidden">{{ 'products.general.unit_price' | t }}</span>
    <span class="product-unit-price">
        {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">&nbsp;{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
        {%- endcapture -%}
        {%- capture unit_price_base_unit -%}
        {%- if line_item.unit_price_measurement.reference_value != 1 -%}
            {{- line_item.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ line_item.unit_price_measurement.reference_unit }}
        {%- endcapture -%}
        <span>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </span>
{%- endif -%}

Na je bewerkingen ziet het bestand customers/order.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je themastijlen - Deel 1

1. Klik in de map Activa op het bestand theme.scss.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar .ajaxcart__price {:

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

1. Voeg het volgende fragment toe onder de code van stap 2:

.cart__unit-price {
    display: block;
}

Na je bewerkingen ziet het bestand theme.scss.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je themastijlen - Deel 2

1. Klik in de map Activa op het bestand timber.scss.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar .product-single__policies {:

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

1. Voeg het volgende fragment toe aan de code van stap 2:

.product-single__unit {
  display: none;

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Ga helemaal naar het einde van het bestand en voeg de volgende code toe:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je JavaScript-themacode

1. Klik in de map Activa op het bestand theme.js.liquid.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden:

var prodImg;

1. Voeg het volgende fragment toe onder de code van stap 2:

var unitPrice = null;

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe aan de code van stap 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
  };
}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

vendor: cartItem.vendor

1. Voeg het volgende fragment toe aan de code van stap 6:

unitPrice: unitPrice,

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

productPrice: '#ProductPrice',

1. Voeg het volgende fragment toe onder de code van stap 8:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar $(this.selectors.priceContainer, this.$container).removeClass(:

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

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe aan de code van stap 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'
  );
}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden door te zoeken naar this.destroyImageCarousel();:

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

1. Voeg het volgende fragment toe aan de code van stap 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;
},

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je Engelse vertalingen bewerken

1. Klik in de map Locales op het bestand en.default.json.

2. Gebruik de sneltoets Zoeken om de volgende code te vinden:

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

1. Voeg het volgende fragment toe aan de code van stap 2:

"unit_price_separator": "per",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de volgende code te vinden:

"include_taxes": "Tax included.",

1. Voeg het volgende fragment toe onder de code van stap 4:

"unit_price": "Unit price",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

(Optioneel) Vertalingen voor andere talen toevoegen

1. Ga naar de pagina Thema's in je Shopify-beheercentrum.

2. Klik op de knop ... > Content van standaardthema bewerken.

3. Klik op Thema-taal wijzigen en selecteer vervolgens de taal die je wilt bewerken. Dit is alleen mogelijk op je gepubliceerde thema.

4. Voer Unit Price in het zoekveld in.

5. Update het veld Eenheidsprijsscheider onder Algemeen/Toegankelijkheid.

6. Update het veld Eenheidsprijslabel onder Producten/Algemeen.

7. Klik op Opslaan.

Minimal

Stappen voor Minimal

Eenheidsprijzen zijn beschikbaar in het Minimale thema voor versies 11.2.0 en hoger. Als je je thema niet kunt bijwerken naar de nieuwste versie, kun je aangepaste eenheidsprijzen toepassen aan eerdere versies van Minimal.

Je fragmenten bijwerken

1. Zoek en vouw de map Fragmenten uit.

2. Selecteer Een nieuw fragment toevoegen.

3. Voer de naam product-unit-price in.

4. Kopieer en plak de volgende code in product-unit-price.liquid.

{%- unless available -%}
  {%- if variant.title -%}
    {%- assign available = variant.available -%}
  {%- else -%}
    {%- assign available = true -%}
  {%- endif -%}
{%- endunless -%}
<span class="product-unit-price{% unless available and variant.unit_price_measurement %} hide{% endunless %}{% if wrapper_class != blank %} {{ wrapper_class }}{% endif %}" data-unit-price-container>
  {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}</span>
  {%- endcapture -%}
  {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
      {%- if available and variant.unit_price_measurement -%}
        {%- if variant.unit_price_measurement.reference_value != 1 -%}
          {{- variant.unit_price_measurement.reference_value -}}
        {%- endif -%}
        {{ variant.unit_price_measurement.reference_unit }}
      {%- endif -%}
    </span>
  {%- endcapture -%}
  <span class="visually-hidden">{{ 'products.product.unit_price_label' | t }}</span>
  <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
</span>

1. Klik op Opslaan.

2. Zoek en bewerk het bestand product-grid-item.liquid.

3. Vervang deze regel:

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

Met deze regel:

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

1. Gebruik de sneltoets Zoeken om {{ price }} te vinden en deze code hieronder toe te voegen:

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

Na je bewerkingen ziet het bestand product-grid-item.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

2. Het bestand zoeken en bewerken search-result.liquid

3. Gebruik de sneltoets Zoeken om {% if item.object_type == 'product' %} te vinden en de volgende code op de regel hieronder toe te voegen:

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

1. Gebruik nu de sneltoets Zoeken om de volgende twee fragmenten code te zoeken:

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

En

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

1. Voeg het volgende codeblok toe onder elk van de twee codefragmenten die in de vorige stap worden vermeld:

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

Na je bewerkingen ziet het bestand search-result.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je stijlen bijwerken

1. Zoek en vouw de map Activa uit.

2. Bewerk het bestand theme.scss.liquid.

3. Gebruik de sneltoets Zoeken om deze nieuwe code te lokaliseren:

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

1. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

font-family: $headerFontStack;

1. Zoek het volgende codefragment met behulp van de sneltoets Zoeken:

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

1. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

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

1. Zoek het volgende codefragment met behulp van de sneltoets Zoeken:

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

1. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

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

1. Zoek het volgende codefragment met behulp van de sneltoets Zoeken:

.cart__product-title {
  display: inline-block;

1. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

font-weight: $bodyFontWeightBold;

Na je bewerkingen ziet het bestand theme.scss.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

2. Zoek en bewerk het bestand timber.scss.liquid.

3. Gebruik de sneltoets Zoeken om deze code te zoeken:

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

1. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

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

1. Voeg deze code toe aan het eind van het bestand:

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

Na je bewerkingen ziet het bestand timber.scss.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je templates bijwerken

1. Zoek en vouw de map Templates uit.

2. Zoek en bewerk het bestand customers/order.liquid.

3. Zoek de code met behulp van de sneltoets Zoeken:

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

1. Voeg deze code toe onder de code van stap 3:

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

Na je bewerkingen ziet het bestand customers/order.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je JavaScript bijwerken

1. theme.js in Activa zoeken en bewerken.

2. Gebruik de sneltoets Zoeken om de regel met .shopify-payment-button te zoeken en deze te vervangen door:

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

De code moet er als volgt uitzien:

1. Zoek naar deze code:

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

1. Voeg deze code eronder toe:

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

Het resultaat zou er zo uit moeten zien:

1. Gebruik de sneltoets Zoeken om deze code te zoeken:

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

1. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

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

Het resultaat zou er zo uit moeten zien:

1. Klik op Opslaan om de wijzigingen te bevestigen.

De template Winkelwagen bijwerken

1. Zoek de map met Secties.

2. Bewerk het bestand cart-template.liquid.

3. Gebruik de sneltoets Zoeken om de code <span class="order-discount h5">{{ item.final_price | money }}</span> te vinden.

4. Vervang de regel met deze code:

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

1. Zoek het eerste exemplaar van de 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. Voeg dit stuk code toe boven de code van stap 5:

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

Na je bewerkingen ziet het bestand cart-template.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Update je aanbevolen product

1. Zoek de map met Secties.

2. Bewerk het bestand featured-product.liquid.

3. Gebruik de sneltoets Zoeken om de regel met itemprop="name" te vinden en deze te vervangen door:

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

1. Zoek de code met 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. Voeg het volgende codeblok in onder het codefragment dat je in de vorige stap hebt geplaatst:

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

Na je bewerkingen ziet het bestand featured-product.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je producttemplate bijwerken

1. Zoek de map met Secties.

2. Bewerk het bestand product-template.liquid.

3. Gebruik de sneltoets Zoeken om de regel met itemprop="name" te vinden en deze te vervangen door:

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

1. Zoek de code met behulp van de sneltoets Zoeken:

{% 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. Voeg deze regel hieronder toe:

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

Na je bewerkingen ziet het bestand product-template.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

De landinstellingen bijwerken

1. Zoek en vouw de map Locales uit.

2. Open en bewerk het bestand en.default.json.

3. Gebruik de sneltoets Zoeken om de regel met refresh_page te zoeken en deze te vervangen door:

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

Het resultaat zou er zo uit moeten zien:

1. Zoek de regel met full_details en vervang deze door:

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

Het resultaat zou er zo uit moeten zien:

1. Klik op Opslaan om de wijzigingen te bevestigen.

(Optioneel) Vertalingen voor andere talen toevoegen

1. Ga naar de pagina Thema's in je Shopify-beheercentrum.

2. Klik op de knop ... > Content van standaardthema bewerken.

3. Klik op Themataal wijzigen en selecteer vervolgens de taal die je wilt bewerken. Dit is alleen mogelijk op je gepubliceerde thema.

4. Voer Unit Price in het zoekveld in.

5. Update het veld Eenheidsprijsscheider onder Algemeen/Toegankelijkheid.

6. Update het veld Eenheidsprijslabel onder Producten/Product.

7. Klik op Opslaan.

Venture

Stappen voor Venture

Eenheidsprijzen werden toegevoegd aan het Venture-thema voor versies 9.4.0 en hoger. Volg deze stappen om de eenheidsprijsaanpassing toe te passen op eerdere versies van Venture als je je thema niet kunt bijwerken naar de nieuwste versie.

Bewerk het taalbestand van je thema

1. Klik in de map Locales op en.default.json.

2. Gebruik de sneltoets Zoeken om de regel te zoeken met refresh_page:

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

1. Voeg de volgende code toe boven de regel in stap 2:

"unit_price_separator": "per",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel te zoeken met stock_unavailable:

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

1. Voeg de volgende code toe boven de regel in stap 4:

"unit_price_label": "Unit price",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk het stijlblad van je thema

1. Klik in de directory Assets op theme.scss.liquid.

2. Gebruik de sneltoets Zoeken om de regel .product-single__policies { te zoeken:

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

1. Voeg de volgende code toe onder de afsluitende } tag van het codeblok uit stap 2:

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

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

Na je bewerkingen ziet het bestand theme.scss.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Voeg een producteenheidsprijsfragment toe

1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

2. Voer de naam product-unit-price in.

3. Voeg de volgende code toe aan 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. Klik op Opslaan om de wijzigingen te bevestigen.

Je Productkaart fragment bewerken

1. Klik op product-card.liquid in de directory Fragmenten.

2. Gebruik de sneltoets Zoeken om de regel te zoeken <a href="{{ product.url | within: collection }}".

3. Voeg de volgende code toe boven de regel in stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel <div class="product-card__price"> te zoeken:

<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. Voeg de volgende code toe boven de </div> -tag sluiten die in stap 5 is gevonden:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

De template van je winkelwagenpagina bewerken

1. Klik in de directory Secties op cart-template.liquid.

2. Gebruik de sneltoets Zoeken om het eerste exemplaar van <td class="cart__cell--total"> te zoeken:

<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. Voeg de volgende code toe onder de endif -tag in stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Zoek met behulp van de sneltoets Zoeken naar het tweede exemplaar van <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. Voeg de volgende code toe onder de tweede afsluit {{/if}} -tag in stap 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}}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je uitgelichte productpagina bewerken

1. Klik in de directory Secties op featured-product.liquid.

2. Gebruik de sneltoets Zoeken om de regel te zoeken {% assign current_variant = product.selected_or_first_available_variant %}.

3. Voeg de volgende code toe onder de regel in stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel te zoeken met <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. Zoek onder deze ul -tag de code {% if section.settings.stock_enable %}.

2. Voeg de volgende code toe boven het if blok gevonden in stap 6:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je productpaginatemplate

1. Klik in de directory Secties op product-template.liquid.

2. Gebruik de sneltoets Zoeken om de regel te zoeken {% assign current_variant = product.selected_or_first_available_variant %}.

3. Voeg de volgende code toe onder de regel in stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel te zoeken met <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. Zoek onder deze ul -tag de code {% if section.settings.stock_enable %}.

2. Voeg de volgende code toe boven het if blok gevonden in stap 5:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

De besteltemplate van je klanten bewerken

1. Klik op customers/order.liquid in de directory Templates.

2. Gebruik de sneltoets Zoeken om de regel te zoeken <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. Vervang de code in stap 2 door de volgende code:

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

Na je bewerkingen ziet het bestand customers/order.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk het JavaScript-bestand van je thema

1. Klik in de directory Assets op theme.js.

2. Gebruik de sneltoets Zoeken om de regel // Create item's data object and add to 'items' array te zoeken.

3. Voeg de volgende code toe boven de regel in stap 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
  };
}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Zoek de regel met behulp van de sneltoets Zoeken vendor: cartItem.vendor,

2. Voeg de volgende code toe onder de regel in stap 4:

unitPrice: unitPrice,

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel shopifyPaymentButton: '.shopify-payment-button' te zoeken.

2. Vervang de regel in stap 6 met de volgende code:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel _updateSKU: function(evt) { te zoeken.

2. Voeg de volgende code toe boven de regel in stap 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;
},

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel this._updateIncomingInfo(variant); te zoeken:

} 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. Voeg de volgende code toe onder de slot } -tag gevonden in stap 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'
  );
}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

(Optioneel) Vertalingen voor andere talen toevoegen

1. Ga naar de pagina Thema's in je Shopify-beheercentrum.

2. Klik op de knop ... > Content van standaardthema bewerken.

3. Klik op Themataal wijzigen en selecteer vervolgens de taal die je wilt bewerken. Dit is alleen mogelijk op je gepubliceerde thema.

4. Voer Unit Price in het zoekveld in.

5. Update het veld Eenheidsprijsscheider onder Algemeen/Toegankelijkheid.

6. Update het veld Eenheidsprijslabel onder Producten/Product.

7. Klik op Opslaan.

Supply

Stappen voor Supply

Eenheidsprijzen zijn toegevoegd aan het thema Levering voor versies 8.3.0 en hoger. Als je je thema niet kunt bijwerken naar de nieuwste versie, volg deze stappen om de eenheidsprijsaanpassing toe te passen op eerdere versies van Supply.

Voeg een producteenheidsprijsfragment toe

1. Zoek en vouw de map Fragmenten uit.

2. Selecteer Een nieuw fragment toevoegen.

3. Voer de naam product-unit-price in.

4. Kopieer en plak de volgende code in het bestand en selecteer Opslaan.

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

Na je bewerkingen ziet het bestand product-unit-price.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je uitgelichte producttemplate bewerken

1. Ga naar de map met Secties en selecteer het bestand featured-product.liquid.

2. Gebruik de sneltoets Zoeken om de regel {% include 'price' with price %} in het bestand te zoeken:

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

1. Voeg de volgende code toe onder het einde </span> van het fragment uit stap 2:

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

Na je bewerkingen ziet het bestand featured-product.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je producttemplate bewerken

1. Ga naar de map met Secties en selecteer het bestand product-template.liquid.

2. Gebruik de sneltoets Zoeken om de regel {% include 'price' with variant.price %} in het bestand te zoeken:

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

1. Voeg de volgende code toe onder de afsluitende </span> van stap 2:

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

Na je bewerkingen ziet het bestand product-template.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je productgridfragment

1. Zoek en vouw de map Fragmenten uit, selecteer vervolgens het bestand product-grid-item.liquid.

2. Gebruik de sneltoets Zoeken om de regel {% if on_sale and section.settings.product_show_saved_amount %} in het bestand te zoeken:

{% 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. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand product-grid-item.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je artikellijstitemfragment

1. Zoek en vouw de map Fragmenten uit, selecteer vervolgens het bestand product-list-item.liquid.

2. Gebruik de sneltoets Zoeken om de regel <div class="product-item--price text-center"> in het bestand te zoeken:

<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. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand product-list-item.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je zoekgridfragment

1. Zoek en vouw de map Fragmenten uit, selecteer vervolgens het bestand search-result-grid.liquid.

2. Gebruik de sneltoets Zoeken om de regel {% if on_sale and section.settings.product_show_saved_amount %} in het bestand te zoeken:

{% 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. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand search-result-grid.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je winkelwagen-template bewerken

1. Zoek en vouw de map Templates uit en selecteer vervolgens het bestand cart.liquid.

2. Gebruik de sneltoets Zoeken om de regel <del class="cart-original-price order-discount--cart-price"> in het bestand te zoeken:

<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. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand cart.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Je besteltemplate bewerken

1. Zoek en vouw de map Templates uit en selecteer vervolgens het bestand customers/order.liquid.

2. Gebruik de sneltoets Zoeken om de regel <td class="text-right" data-label="customer.order.price"> in het bestand te zoeken:

<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. Voeg de volgende code toe boven de afsluiting </td> van stap 2:

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

Na je bewerkingen ziet het bestand customers/order.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je thema-indeling

1. Zoek en vouw de man Indeling uit en selecteer vervolgens het bestand theme.liquid.

2. Zoek de regel met only_left: in het bestand met behulp van de sneltoets Zoeken:

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. Voeg de volgende code toe boven only_left:{{ 'products.product.only_left' | t: count: '1' | json }} uit stap 2:

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

Na je bewerkingen ziet het bestand theme.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je themastijlen

1. Ga naar de map met Secties en selecteer het bestand theme.scss.liquid.

2. Gebruik de sneltoets Zoeken om de regel .product-item--price { in het bestand te zoeken:

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

1. Vervang de code door het volgende fragment:

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

Na je bewerkingen ziet het bestand theme.scss.liquid er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk je JavaScript-themacode

1. Ga naar de map Activa en selecteer het bestand theme.js.liquid.

2. Gebruik de sneltoets Zoeken om de regel originalSelectorId: 'productSelect-' + sectionId, in het bestand te zoeken:

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. Voeg de volgende code toe boven originalSelectorId: 'productSelect-' + sectionId, uit stap 2:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel productVariantCallback: function(variant) { in het bestand te zoeken:

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. Voeg de volgende code toe onder if (variant) { in stap 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');
}

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; in het bestand te zoeken:

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. Vervang de regel customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>'; door het volgende fragment:

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

Na je bewerkingen zien de resultaten er als volgt uit:

1. Gebruik de sneltoets Zoeken om de regel $(this.settings.selectors.$shopifyPaymentButton, this.$container).hide(); in het bestand te zoeken:

} 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. Voeg de volgende code toe onder het fragment van stap 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;

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

Bewerk het taalbestand van je thema

1. Zoek en vouw de map Locales en selecteer vervolgens het bestand en.default.json.

2. Zoek de regel met "refresh_page" in het bestand met behulp van de sneltoets Zoeken:

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

1. Voeg de volgende code toe boven "refresh_page" uit stap 2:

"unit_price_separator": "per",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Zoek de regel met "will_be_in_stock_after" in het bestand met behulp van de sneltoets Zoeken:

"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. Voeg de volgende code toe na "will_be_in_stock_after" uit stap 5:

"unit_price_label": "Unit price",

Na je bewerkingen zien de resultaten er als volgt uit:

1. Klik op Opslaan om de wijzigingen te bevestigen.

(Optioneel) Vertalingen voor andere talen toevoegen

1. Ga naar de pagina Thema's in je Shopify-beheercentrum.

2. Klik op de knop ... > Content van standaardthema bewerken.

3. Klik op Themataal wijzigen en selecteer vervolgens de taal die je wilt bewerken. Dit is alleen mogelijk op je gepubliceerde thema.

4. Zoek naar Unit Price op de invoerbalk.

5. Update het veld Eenheidsprijsscheider onder Algemeen/Toegankelijkheid.

6. Update het veld Eenheidsprijslabel onder Producten/Product.

7. Klik op Opslaan.

Eenheidsprijzen weergeven in je bestellingmeldingen

Wanneer de functie actief is, staan standaard eenheidsprijzen in de bestelbevestigingsmelding.

Als je eenheidsprijzen aan je product hebt toegevoegd, maar deze worden niet weergegeven in je bestelbevestigingsmeldingen, werk dan je template handmatig bij.

Stappen:

1. Ga in het Shopify-beheercentrum naar Instellingen > Meldingen.

2. Klik in het gedeelte Bestellingen op Bestelbevestiging.

3. Klik op Code bewerken.

4. Voeg het volgende fragment toe aan de template binnen de klasse "order-list__item-price" :

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

 5. Klik op Opslaan.

Tip

Plaats een testbestelling in je winkel om te bevestigen of in de bestellingsmelding de eenheidsprijs wordt weergegeven.