Vise enhetspriser
Hvis du selger produkter etter antall eller mål, må du kanskje vise prisen per enhet for enkelte produkter. Når du angir en enhetspris for et produkt, vises enhetsprisen på produktsidene, samlingssidene, handlekurvsidene, kassesidene og bestillingsbekreftelsene.
På denne siden
Legg til enhetspris til produktet ditt
Fra Shopify-administratoren går du til Produkter.
Klikk på produktet du vil redigere.
Valgfritt: Hvis produktet ditt har varianter, klikker du på varianten du vil redigere i seksjonen Varianter.
Velg Vis enhetspris for dette produktet i seksjonen Prissetting.
Angi produktets totale mål og velg deretter måleenhet i feltet Totale produktmål.
Valgfritt: Legg til grunnmålet i feltet Grunnmål, og velg deretter måleenhet. For et produkt som veier 1 kg, velger du for eksempel kanskje grunnenheten 100 g.
Klikk på Lagre.
- Fra Shopify-appen går du til Produkter > Alle produkter.
- Trykk på produktet du vil redigere.
- Trykk på produktets prisområde.
- Velg Vis enhetspris.
- Angi produktets totale mål og velg deretter måleenhet i feltet Totale produktmål.
- Valgfritt: Legg til grunnmålet i feltet Grunnmål, og velg deretter måleenhet. For et produkt som veier 1 kg, velger du for eksempel kanskje grunnenheten 100 g.
- Trykk på Lagre.
- Fra Shopify-appen går du til Produkter > Alle produkter.
- Trykk på produktet du vil redigere.
- Trykk på produktets prisområde.
- Velg Vis enhetspris.
- Angi produktets totale mål og velg deretter måleenhet i feltet Totale produktmål.
- Valgfritt: Legg til grunnmålet i feltet Grunnmål, og velg deretter måleenhet. For et produkt som veier 1 kg, velger du for eksempel kanskje grunnenheten 100 g.
- Trykk ✓.
Vis enhetspriser i nettbutikken
Alle Online Store 2.0-temaer har funksjonen for enhetspriser tilgjengelig allerede. Det kreves ingen handling for å vise enhetspriser i nettbutikken.
Hvis du har et eldre tema og ikke kan oppdatere det til en versjon som støtter funksjonen for enhetspris, kan du tilpasse temakoden manuelt for å vise enhetsprisen.
Vis enhetspriser i et eldre tema
Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for temaet ditt før du følger anvisningene nedenfor:
Steg for Debut
Enhetspriser er tilgjengelige i Debut-temaet for versjon 12.1.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du legge til enhetspristilpasning til tidligere versjoner av Debut.
Endre produktpriskodebiten
I Kodebiter-katalogen klikker du på
product-price.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
data-price
:
<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}" data-price>
- Erstatt koden med følgende kodebit:
<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>
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
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>
- Legg til følgende kode under den avsluttende
</div>
-taggen:
{% 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 %}
- Klikk på Lagre for å bekrefte endringene.
Rediger handlekurvsiden
I Deler-katalogen klikker du på
cart-template.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
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 -%}
- Erstatt koden med følgende kodebit:
<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>
Etter redigeringene dine skal cart-template.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere samlingssiden
I Deler-katalogen klikker du på
collection.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
grid-view-item__title
:
{% include 'product-price' %}
- Erstatt koden med følgende kodebit:
{% include 'product-price', variant: nil %}
Etter redigeringene dine skal collection.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere rutenettet for produktkort
I Kodebiter-katalogen klikker du på
product-card-grid.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
grid-view-item__title
:
{% include 'product-price', variant: product %}
- Erstatt koden med følgende kodebit:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Etter redigeringene dine skal product-card-grid.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere listen for produktkort
I Kodebiter-katalogen klikker du på
product-card-list.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
{% if product.available %}
:
{% include 'product-price', variant: product %}
- Erstatt koden med følgende kodebit:
{% include 'product-price', variant: product.selected_or_first_available_variant %}
Etter redigeringene dine skal product-card-list.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger bestillingssiden
I Maler-katalogen klikker du på
customers/order.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
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 -%}
- Erstatt koden med følgende kodebit:
<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>
Etter redigeringene dine skal customers/order.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere temastilene
I Eiendeler-katalogen klikker du på
theme.scss.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
.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%);
}
- Legg til følgende kodesnutt under koden fra steg 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;
}
Etter redigeringene dine skal theme.scss.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere JavaScript-temakoden
I Eiendeler-katalogen klikker du på
theme.js
-filen.Bruk finn-hurtigtasten til å finne følgende kode:
salePrice: '[data-sale-price]'
- Legg til følgende kodesnutt over koden fra steg 2:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
productOnSale: 'price--on-sale',
- Legg til følgende kodebit etter koden fra trinn 4:
productUnitAvailable: 'price--unit-available',
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]';
- Erstatt koden med følgende kodebit:
var liveRegionText = '[Availability] [Regular] [$$] [Sale] [$]. [UnitPrice] [$$$]';
- Bruk finn-hurtigtasten til å finne følgende kode:
var salePrice = '';
- Legg til følgende kodesnutt under koden fra steg 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);
}
- Bruk finn-hurtigtasten til å finne følgende kode:
.replace('[$]', salePrice)
- Legg til følgende kodebit under koden fra trinn 10:
.replace('[UnitPrice]', unitLabel)
.replace('[$$$]', unitPrice)
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
_updatePrice: function(evt) {
- Legg til følgende kodebit før koden fra trinn 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;
},
- Bruk finn-hurtigtasten til å finne følgende kode:
var $salePrice = $(this.selectors.salePrice, $priceContainer);
- Legg til følgende kodebit under koden fra trinn 14:
var $unitPrice = $(this.selectors.unitPrice, $priceContainer);
var $unitPriceBaseUnit = $(
this.selectors.unitPriceBaseUnit,
$priceContainer
);
- Bruk finn-hurtigtasten til å finne følgende kode:
.removeClass(this.classes.productOnSale)
- Legg til følgende kodebit under koden fra trinn 16:
.removeClass(this.classes.productUnitAvailable)
- Bruk finn-hurtigtasten til å finne følgende kode:
else {
// Regular price
$regularPrice.html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
}
- Legg til følgende kodebit under koden fra trinn 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);
}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger engelske oversettelser
I Lokaler-katalogen klikker du på
en.default.json
-filen.Bruk finn-hurtigtasten til å finne følgende kode:
"selection_help": "press the space key then arrow keys to make a selection"
- Legg til følgende kodesnutt over koden fra steg 2:
"unit_price_separator": "per",
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
"include_taxes": "Tax included.",
- Legg til følgende kodesnutt under koden fra steg 4:
"unit_price_label": "Unit price",
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere temaoppsett
I Oppsett-katalogen klikker du på
theme.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode:
regularPrice: {{ 'products.product.regular_price' | t | json }},
- Legg til følgende kodesnutt under koden fra steg 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Etter redigeringene dine skal theme.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
(Valgfritt) Legg til oversettelser for andre språk
Gå til Temaer-siden i Shopify-administratoren.
Klikk på knappen … > Rediger innhold i standardtema.
Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.
Angi
Unit Price
i søkefeltet.Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.
Oppdater feltet Enhetsprisetikett under Produkter / Produkt.
Klikk på Lagre.
Trinn for Brooklyn
Enhetspriser er tilgjengelige i Brooklyn-temaet for versjon 13.1.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du legge til enhetspristilpasning til tidligere versjoner av Brooklyn.
Legg til et produktprisutdrag
I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
Angi
product-price
i navnefeltet.Kopier og lim inn følgende kode i filen.
<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>
- Klikk på Lagre for å bekrefte endringene.
Rediger den utvalgte produktsiden
I Deler-katalogen klikker du på
featured-product.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
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>
- Erstatt koden med følgende kodebit:
{% include 'product-price', variant: current_variant %}
Etter redigeringene dine skal featured-product.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere produktsiden
I Deler-katalogen klikker du på
product-template.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
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>
- Erstatt koden med følgende kodebit:
{% include 'product-price', variant: current_variant %}
Etter redigeringene dine skal product-template.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger ajax-handlekurven din
I Kodebiter-katalogen klikker du på
ajax-cart-template.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
<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}}
- Legg til følgende kode under
{{/if}}
fra trinn 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}}
Etter redigeringene dine skal ajax-cart-template.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger elementet i produktrutenettet
I Kodebiter-katalogen klikker du på
product-grid-template.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
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.' -%}
- Legg til følgende utdrag før koden fra trinn 2:
{%- assign variant = product.selected_or_first_available_variant -%}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
{{ 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>
- Legg til følgende kode under
</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 -%}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger handlekurvsiden
I Maler-katalogen klikker du på
cart.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
<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 -%}
- Legg til følgende kodesnutt under koden fra steg 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 -%}
Etter redigeringene dine skal cart.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger bestillingssiden
I Maler-katalogen klikker du på
customers/order.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
{{ 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>
- Legg til følgende kodebit før
</td>
fra trinn 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 -%}
Etter redigeringene dine skal customers/order.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere temastilene – del 1
I Eiendeler-katalogen klikker du på
theme.scss.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
.ajaxcart__price {
:
.ajaxcart__price {
font-size: em(13px);
display: block;
}
- Legg til følgende kodesnutt under koden fra steg 2:
.cart__unit-price {
display: block;
}
Etter redigeringene dine skal theme.scss.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere temastilene – del 2
I Eiendeler-katalogen klikker du på
timber.scss.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
.product-single__policies {
:
.product-single__policies {
margin: 15px 0 25px 0;
}
- Legg til følgende kodesnutt over koden fra steg 2:
.product-single__unit {
display: none;
.price-container--unit-available & {
display: block;
}
}
Etter redigeringene dine skal resultatet se slik ut:
- Gå helt til slutten av filen og legg til følgende kode:
.product-unit-price {
color: $colorTextBody;
display: block;
}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger JavaScript-temakode
I Eiendeler-katalogen klikker du på
theme.js.liquid
-filen.Bruk finn-hurtigtasten til å finne følgende kode:
var prodImg;
- Legg til følgende kodesnutt under koden fra steg 2:
var unitPrice = null;
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
// Create item's data object and add to 'items' array
- Legg til følgende kodebit over koden fra trinn 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
};
}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
vendor: cartItem.vendor
- Legg til følgende kodebit over koden fra trinn 6:
unitPrice: unitPrice,
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
productPrice: '#ProductPrice',
- Legg til følgende kodesnutt under koden fra steg 8:
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
$(this.selectors.priceContainer, this.$container).removeClass(
:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden'
);
- Erstatt koden med følgende kodebit:
$(this.selectors.priceContainer, this.$container).removeClass(
'visibility-hidden price-container--unit-available'
);
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
$(this.selectors.SKU).html(variant.sku);
- Legg til følgende kodebit over koden fra trinn 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'
);
}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode ved å søke etter
this.destroyImageCarousel();
:
onUnload: function() {
this.$container.off(this.settings.namespace);
this.destroyImageCarousel();
}
- Legg til følgende kodebit over koden fra trinn 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;
},
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger engelske oversettelser
I Lokaler-katalogen klikker du på
en.default.json
-filen.Bruk finn-hurtigtasten til å finne følgende kode:
"refresh_page": "choosing a selection results in a full page refresh"
- Legg til følgende kodesnutt over koden fra steg 2:
"unit_price_separator": "per",
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne følgende kode:
"include_taxes": "Tax included.",
- Legg til følgende kodesnutt under koden fra steg 4:
"unit_price": "Unit price",
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
(Valgfritt) Legg til oversettelser for andre språk
Gå til Temaer-siden i Shopify-administratoren.
Klikk på knappen … > Rediger innhold i standardtema
Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.
Angi
Unit Price
i søkefeltet.Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.
Oppdater feltet Enehetsprisetikett under Produkter/Generelt.
Klikk på Lagre.
Steg for Minimal
Enhetspriser er tilgjengelige i Minimal-temaet for versjon 11.2.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du legge til enhetspristilpasning til tidligere versjoner av Minimal.
Oppdatere kodebitene
Finn og utvid Utdrag-mappen.
Velg Legg til en ny kodebit.
Angi navnet
product-unit-price
.Kopier og lim inn følgende kode i
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>
Klikk på Lagre.
Finn og rediger filen
product-grid-item.liquid
.Erstatt denne linjen:
{% capture price %}{{ featured.price | money }}{% endcapture %}
Med denne linjen:
{%- assign price = featured.price | money -%}
- Bruk finn-hurtigtasten til å finne
{{ price }}
og legg til denne koden nedenfor:
{%- 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 -%}
Etter redigeringene dine skal product-grid-item.liquid
-filen se slik ut:
Klikk på Lagre for å bekrefte endringene.
Finn og rediger filen
search-result.liquid
Bruk finn-hurtigtasten til å finne
{% if item.object_type == 'product' %}
og legg til følgende kode på linjen under:
{%- assign variant = item.selected_or_first_available_variant -%}
- Nå bruker du finn-hurtigtasten til å finne følgende to kodebiter:
<s><small>{{ item.compare_at_price_max | money }}</small></s>
Og
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<span itemprop="price">
{{ item.price | money }}
</span>
- Legg til følgende kodeblokk under hver av de to kodebitene som er oppført i forrige trinn:
{%- if variant.available and variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: variant %}
{%- endif -%}
Etter redigeringene dine skal search-result.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdater stilene dine
Finn og utvid mappen Ressurser.
Rediger filen
theme.scss.liquid
.Bruk finn-hurtigtasten til å finne denne kodebiten:
.grid-link__title,
.grid-link__meta {
position: relative;
margin-bottom: 5px;
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
font-family: $headerFontStack;
- Bruk finn-hurtigtasten til å finne følgende kodebit:
.grid-link__sale_price {
opacity: 0.95;
filter: alpha(opacity=95);
}
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
.grid-link__unit-price {
font-size: 1em;
}
- Bruk finn-hurtigtasten til å finne følgende kodebit:
.order-discount--list {
margin: 0.8em 0 0.6em 1.3em;
list-style: none;
padding: 0;
}
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
.order-discount--price {
margin-bottom: 0;
}
- Bruk finn-hurtigtasten til å finne følgende kodebit:
.cart__product-title {
display: inline-block;
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
font-weight: $bodyFontWeightBold;
Etter redigeringene dine skal theme.scss.liquid
-filen se slik ut:
Klikk på Lagre for å bekrefte endringene.
Finn og rediger filen
timber.scss.liquid
.Bruk finn-hurtigtasten til å finne denne koden:
.quantity-selector {
display: inline-block;
}
}
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
.product-single__title {
font-weight: $bodyFontWeightBold;
}
- Sett inn denne koden på slutten av filen:
.product-unit-price {
color: rgba($colorTextBody, 0.6);
display: block;
font-family: $headerFontStack;
font-size: em(12px);
}
Etter redigeringene dine skal timber.scss.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdatere malene dine
Finn og utvid Maler-mappen.
Finn og rediger filen
customers/order.liquid
.Bruk finn-hurtigtasten til å finne koden:
{%- else -%}
{{ line_item.original_price | money }}
{%- endif -%}
- Legg til denne koden under koden fra trinn 3:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Etter redigeringene dine skal customers/order.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdatere JavaScript
Finn og rediger
theme.js
i Ressurser.Bruk finn-hurtigtasten til å finne linjen som inneholder
.shopify-payment-button
og erstatt den med:
$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)
Den delen av koden skal se slik ut:
- Se etter denne koden:
else {
this.selectors.$comparePrice.addClass('hide').html('');
this.selectors.$comparePriceA11y.attr('aria-hidden', 'true');
}
- Legg til denne koden under den:
// 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');
}
Resultatet skal se slik ut:
- Bruk finn-hurtigtasten til å finne denne koden:
.attr('data-zoom')
});
});
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
},
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;
Resultatet skal se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdatere handlekurvmalen
Finn og utvid Deler-mappen.
Rediger filen
cart-template.liquid
.Bruk finn-hurtigtasten til å finne koden
<span class="order-discount h5">{{ item.final_price | money }}</span>
.Erstatt linjen med denne koden:
<span class="order-discount order-discount--price h5">{{ item.final_price | money }}</span>
- Finn den første forekomsten av koden
{%- 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 -%}
- Legg til denne koden over koden fra trinn 5:
{%- if item.variant.available and item.variant.unit_price_measurement -%}
{% include 'product-unit-price', variant: item, available: item.variant.available %}
{%- endif -%}
Etter redigeringene dine skal cart-template.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdatere det utvalgte produktet ditt
Finn og utvid Deler-mappen.
Rediger filen
featured-product.liquid
.Bruk finn-hurtigtasten til å finne linjen med
itemprop="name"
og erstatte den med:
<h1 class="product-single__title" itemprop="name">{{ title }}</h1>
- Finn koden som inneholder
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 %}
- Sett inn følgende kodeblokk under kodebiten du lokaliserte i forrige trinn:
{% include 'product-unit-price', variant: variant, available: true %}
Etter redigeringene dine skal featured-product.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdatere produktmalen
Finn og utvid Deler-mappen.
Rediger filen
product-template.liquid
.Bruk finn-hurtigtasten til å finne linjen med
itemprop="name"
og erstatt den med:
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
- Bruk finn-hurtigtasten til å finne koden:
{% 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 %}
- Legg til denne linjen nedenfor:
{% include 'product-unit-price', variant: variant, available: true %}
Etter redigeringene dine skal product-template.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Oppdatere lokalene
Finn og utvid Lokaler-mappen.
Åpne og rediger
en.default.json
-filen.Bruk finn-hurtigtasten til å finne linjen som inneholder
refresh_page
og erstatt den med:
"refresh_page": "choosing a selection results in a full page refresh",
"unit_price_separator": "per"
Resultatet skal se slik ut:
- Finn linjen som inneholder
full_details
og erstatt den med:
"full_details": "Full details",
"unit_price_label": "Unit price"
Resultatet skal se slik ut:
- Klikk på Lagre for å bekrefte endringene.
(Valgfritt) Legg til oversettelser for andre språk
Gå til Temaer-siden i Shopify-administratoren.
Klikk på knappen … > Rediger innhold i standardtema.
Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.
Angi
Unit Price
i søkefeltet.Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.
Oppdater feltet Enhetsprisetikett under Produkter / Produkt.
Klikk på Lagre.
Steg for Venture
Enhetspriser ble lagt til i Venture-temaet for versjon 9.4.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du følge dise trinnene for å tilføre enhetspristilpasningen til tidligere versjoner av Venture.
Rediger temaets språkfil
I Lokaler -katalogen klikker du
en.default.json
.Bruk finn-hurtigtasten til å finne linjen som inneholder
refresh_page
:
"refresh_page": "choosing a selection results in a full page refresh"
- Legg til følgende kode over linjen du fant i trinn 2:
"unit_price_separator": "per",
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen som inneholder
stock_unavailable
:
"stock_unavailable": "The item could not be added to your cart because there are not enough in stock."
- Legg til følgende kode over linjen du fant i trinn 4:
"unit_price_label": "Unit price",
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger temaets stilark
I Ressurser-katalogen klikker du på
theme.scss.liquid
.Bruk finn-hurtigtasten til å finne linjen
.product-single__policies {
:
.product-single__policies {
font-size: em($font-size-base - 1);
}
- Legg til følgende kode under den avsluttende
}
-taggen i kodeblokken du fant i trinn 2:
.product-unit-price {
font-size: em(12);
color: $color-body-text;
}
.product-card__unit-price {
display: block;
}
Etter redigeringene dine skal theme.scss.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Legg til en kodebit for produktenhetspris
I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
Angi navnet
product-unit-price
.Legg til følgende kode i
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>
- Klikk på Lagre for å bekrefte endringene.
Rediger kodesnutten for produktkortet
I Kodesnutter-katalogen klikker du på
product-card.liquid
.Bruk finn-hurtigtasten til å finne koden
<a href="{{ product.url | within: collection }}"
.Legg til følgende kode over linjen du fant i trinn 2:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen
<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>
- Legg til følgende kode over den avsluttende
</div>
-taggen som ble funnet i steg 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 -%}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger sidemalen for handlekurven
I Deler-katalogen klikker du på
cart-template.liquid
.Bruk finn-hurtigtasten til å finne den første forekomsten av
<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 -%}
- Legg til følgende kode under
endif
-taggen som ble funnet i trinn 2:
{%- if item.unit_price_measurement -%}
{% include 'product-unit-price', product_variant: item %}
{%- endif -%}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne den andre forekomsten av
<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}}
- Legg til følgende kode under den andre avsluttende
{{/if}}
-taggen som ble funnet i steg 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}}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere den utvalgte produktmalen
I Deler-katalogen klikker du på
featured-product.liquid
.Bruk finn-hurtigtasten til å finne koden
{% assign current_variant = product.selected_or_first_available_variant %}
.Legg til følgende kode under linjen du fant i trinn 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen som inneholder
<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 %}
Under denne
ul
-taggen finner du koden{% if section.settings.stock_enable %}
.Legg til følgende kode over
if
-blokken som ble funnet i trinn 6:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Bruk finn-hurtigtasten til å finne koden
{% assign current_variant = product.selected_or_first_available_variant %}
.Legg til følgende kode under linjen du fant i trinn 2:
{% assign variants_with_unit_price = product.variants | where: "unit_price_measurement" %}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen som inneholder
<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 %}
Under denne
ul
-taggen finner du koden{% if section.settings.stock_enable %}
.Legg til følgende kode over
if
-blokken som ble funnet i steg 5:
{%- if variants_with_unit_price.size > 0 -%}
<li>
{% include 'product-unit-price', product_variant: current_variant %}
</li>
{%- endif -%}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger bestillingsmalen for kundene dine
I Maler -katalogen klikker du på
customers/order.liquid
.Bruk finn-hurtigtasten til å finne koden
<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>
- Erstatt koden som ble funnet i steg 2 med følgende kode:
<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>
Etter redigeringene dine skal customers/order.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger temaets JavaScript-fil
I Ressurser-katalogen klikker du på
theme.js
.Bruk finn-hurtigtasten til å finne linjen
// Create item's data object and add to 'items' array
:Legg til følgende kode over linjen du fant i trinn 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
};
}
Etter redigeringene dine skal resultatet se slik ut:
Bruk finn-hurtigtasten til å finne koden
vendor: cartItem.vendor,
Legg til følgende kode under linjen du fant i trinn 4:
unitPrice: unitPrice,
Etter redigeringene dine skal resultatet se slik ut:
Bruk finn-hurtigtasten til å finne linjen
shopifyPaymentButton: '.shopify-payment-button'
:Erstatt linjen som ble funnet i steg 6 med følgende kode:
shopifyPaymentButton: '.shopify-payment-button',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
unitPriceContainer: '[data-unit-price-container]'
Etter redigeringene dine skal resultatet se slik ut:
Bruk finn-hurtigtasten til å finne linjen
_updateSKU: function(evt) {
:Legg til følgende kode over linjen du fant i trinn 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;
},
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen
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);
}
- Legg til følgende kode under den avsluttende
}
-taggen som ble funnet i steg 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'
);
}
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
(Valgfritt) Legg til oversettelser for andre språk
Gå til Temaer-siden i Shopify-administratoren.
Klikk på knappen … > Rediger innhold i standardtema.
Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.
Angi
Unit Price
i søkefeltet.Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.
Oppdater feltet Enhetsprisetikett under Produkter / Produkt.
Klikk på Lagre.
Steg for Supply
Enhetspriser ble lagt til i Supply-temaet for versjon 8.3.0 og nyere. Hvis du ikke har muligheten til å oppdatere temaet til den nyeste versjonen, kan du følge dise trinnene for å tilføre enhetspristilpasningen til tidligere versjoner av Supply.
Legg til en kodebit for produktenhetspris
Finn og utvid Utdrag-mappen.
Velg Legg til en ny kodebit.
Angi navnet
product-unit-price
.Kopier og lim inn følgende kode i filen og velg Lagre.
{%- 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>
Etter redigeringene dine skal product-unit-price.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere den utvalgte produktmalen
Finn og utvid Deler-mappen og velg
featured-product.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
{% include 'price' with price %}
i filen:
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with price %}
</span>
</li>
- Legg til følgende kode under den avsluttende
</span>
-koden i kodebiten fra trinn 2:
{% include 'product-unit-price' variant: variant %}
Etter redigeringene dine skal featured-product.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere produktmalen
Finn og utvid Deler-mappen og velg
product-template.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
{% include 'price' with variant.price %}
i filen:
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
</li>
- Legg til følgende kode under den avsluttende
</span>
-koden fra trinn 2:
{% include 'product-unit-price', variant: variant %}
Etter redigeringene dine skal product-template.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere elementkodebiten for produktrutenettet
Finn og utvid Kodebiter-mappen og velg
product-grid-item.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
{% if on_sale and section.settings.product_show_saved_amount %}
i filen:
{% 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>
- Erstatt koden med følgende kodebit:
{%- 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 %}
Etter redigeringene dine skal product-grid-item.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger elementkodebiten for produktlisten
Finn og utvid Kodebiter-mappen og velg
product-list-item.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
<div class="product-item--price text-center">
i filen:
<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>
- Erstatt koden med følgende kodebit:
<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>
Etter redigeringene dine skal product-list-item.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger kodebiten for søkeresultatrutenettet
Finn og utvid Kodebiter-mappen og velg
search-result-grid.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
{% if on_sale and section.settings.product_show_saved_amount %}
i filen:
{% 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>
- Erstatt koden med følgende kodebit:
{%- 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 %}
Etter redigeringene dine skal search-result-grid.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere handlekurvmalen
Finn og utvid Maler-mappen og velg
cart.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
<del class="cart-original-price order-discount--cart-price">
i filen:
<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 -%}
- Erstatt koden med følgende kodebit:
<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 -%}
Etter redigeringene dine skal cart.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger bestillingsmalen
Finn og utvid Maler-mappen og velg
customers/order.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
<td class="text-right" data-label="customer.order.price">
i filen:
<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>
- Legg til følgende kode over den avsluttende
</td>
-koden fra trinn 2:
{%- if line_item.unit_price_measurement -%}
{% include 'product-unit-price', variant: line_item, available: true %}
{%- endif -%}
Etter redigeringene dine skal customers/order.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere temaoppsett
Finn og utvid Oppsett-mappen og velg
theme.liquid
-filen.Bruk finn-hurtigtasten for å finne linjen som inneholder
only_left:
-koden i filen:
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 }}
},
- Legg til følgende kode over
only_left:{{ 'products.product.only_left' | t: count: '1' | json }}
fra trinn 2:
unitPrice: {{ 'products.product.unit_price_label' | t | json }},
unitPriceSeparator: {{ 'general.accessibility.unit_price_separator' | t | json }},
Etter redigeringene dine skal theme.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Redigere temastilene
Finn og utvid Deler-mappen og velg
theme.scss.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
.product-item--price {
i filen:
.product-item--price {
@include clearfix;
.h1 {
margin-bottom: $gutter/2;
}
span {
line-height: 22px;
}
small {
white-space: nowrap;
}
}
- Erstatt koden med følgende kodebit:
.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;
}
}
Etter redigeringene dine skal theme.scss.liquid
-filen se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger JavaScript-temakode
Finn og utvid Ressurser-mappen og velg
theme.js.liquid
-filen.Bruk finn-hurtigtasten til å finne linjen
originalSelectorId: 'productSelect-' + sectionId,
i filen:
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'
}
- Legg til følgende kode over
originalSelectorId: 'productSelect-' + sectionId,
fra trinn 2:
unitPriceContainer: '[data-unit-price-container]',
unitPrice: '[data-unit-price]',
unitPriceBaseUnit: '[data-unit-price-base-unit]',
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen
productVariantCallback: function(variant) {
i filen:
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');
}
- Legg til følgende kode under
if (variant) {
fra trinn 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');
}
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
i filen:
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>';
- Erstatt linjen
customPriceFormat += ' <span aria-hidden="true"><s>' + comparePrice + '</s></span>';
med følgende kodebit:
customPriceFormat += ' <span aria-hidden="true"><small><s>' + comparePrice + '</s></small></span>';
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten til å finne linjen
$(this.settings.selectors.$shopifyPaymentButton, this.$container).hide();
i filen:
} 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();
}
- Legg til følgende kode under kodebiten fra steg 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;
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
Rediger temaets språkfil
Finn og utvid Lokaler-mappen og velg
en.default.json
-filen.Bruk finn-hurtigtasten for å finne linjen som inneholder
"refresh_page"
-koden i filen:
"accessibility": {
"refresh_page": "choosing a selection results in a full page refresh"
},
- Legg til følgende kode over
"refresh_page"
fra trinn 2:
"unit_price_separator": "per",
Etter redigeringene dine skal resultatet se slik ut:
- Bruk finn-hurtigtasten for å finne linjen som inneholder
"will_be_in_stock_after"
-koden i filen:
"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"
}
- Legg til følgende kode etter
"will_be_in_stock_after"
fra steg 5:
"unit_price_label": "Unit price",
Etter redigeringene dine skal resultatet se slik ut:
- Klikk på Lagre for å bekrefte endringene.
(Valgfritt) Legg til oversettelser for andre språk
Gå til Temaer-siden i Shopify-administratoren.
Klikk på knappen … > Rediger innhold i standardtema.
Klikk på Endre temaspråk, og velg deretter språket du vil redigere. Dette er bare mulig på det publiserte temaet.
Søk etter
Unit Price
i tekstfeltet.Oppdater feltet Enhetsskiller under Generelt / Tilgjengelighet.
Oppdater feltet Enhetsprisetikett under Produkter / Produkt.
Klikk på Lagre.
Vis enhetspriser i bestillingsvarsler
Som standard viser varselet for bestillingsbekreftelse enhetspriser når funksjonen er aktiv.
Hvis du har lagt til enhetspriser for produktet, men enhetsprisene ikke vises i varsler for bestillingsbekreftelse, kan det hende du må oppdatere malen manuelt.
Trinn:
Fra Shopify-administrator går du til Innstillinger > Varsler.
Klikk på Bestillingsbekreftelse i Bestillinger-seksjonen.
Klikk på Rediger kode.
Legg til følgende kodebit i malen i
"order-list__item-price"
-klassen:
{%- 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. Klikk på Lagre.