Vis SKU-numre på produktsider
Denne siden ble skrevet ut den Apr 24, 2024. Gå til https://help.shopify.com/nb/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku for nyeste versjon.
Advarsel
Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer , og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.
Merk
Hvis du bruker et gratis tema fra Shopify , kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer– .
Merk
Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.
SKU-er (lagerbeholdningsenheter) er tall, vanligvis alfanumeriske, som brukes til å identifisere og spore lagerbeholdning. Hvis en butikk bruker SKU-er, tilordnes et unikt nummer til hver individuelle produktvariant. Du kan vise SKU-numre for varianter på produktsider ved å redigere temakoden:
Seksjonerte og ikke-seksjonerte temaer
Merk
Trinnene i denne opplæringen varierer avhengig av om du bruker et kategorisert eller et ukategorisert tema. Et kategorisert tema lar deg dra og slippe for å sortere layouten på startsiden, noe du ikke kan gjøre med et ukategorisert tema.
For å finne ut om temaet ditt støtter seksjoner kan du gå til temaets Rediger kode -side. Hvis det er filer i Seksjoner -katalogen, bruker du et tema med seksjoner. Temaer uten seksjoner ble utgitt før oktoper 2016 og har ingen filer i Seksjoner -katalogen.
Hvis du bruker et tema med seksjoner, klikker du på Seksjonerte temaer -knappen og følger anvisningene. Hvis du bruker et eldre tema uten seksjoner, klikker du på Ikke-sesksjonerte temaer knappen og følger anvisningen.
Trinn for kategoriserte temaer Vis SKU-numre på produktsider
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Seksjoner -katalogen klikker du på product.liquid
eller product-template.liquid
.
Finn følgende Liquid-tagg:
{{ product . title }}
Dette er koden som gjengir produkttitlene dine på produktsiden.
På en ny linje under kodelinjen som inneholder {{ product.title }}
limer du inn følgende kode:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Klikk på Lagre .
Velg tema Trinnene for denne tilpasningen varierer avhengig av ditt valgte tema. Klikk på knappen for ditt tema og følg instruksjonene.
Steg for Boundless
I Ressurser -katalogen klikker du på theme.js.liquid
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
setTimeout ( function () {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
}, 100 );
});
Klikk på Lagre .
Trinn for Brooklyn
I Ressurser -katalogen klikker du på theme.js.liquid
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const productInfo = JSON . parse ( product . innerHTML );
const radioButtons = document . querySelector ( ' .single-option-radio ' );
let inputSelects ;
if ( radioButtons !== null ) {
inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-radio ' )];
} else {
inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector__radio ' )];
}
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
if ( radioButtons !== null ) {
inputValues . push ( input . firstElementChild . value );
} else {
inputValues . push ( input . value );
}
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . target . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . currentTarget );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Steg for Debut
I Ressurser -katalogen klikker du på theme.js
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Trinn for Express
I Oppsett -katalogen klikker du på theme.liquid
.
Finn den avsluttende </body>
-taggen.
På linjen rett over den avsluttende </body>
-taggen limer du inn følgende kode:
<script>
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [data-product-json] ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = " shopify-section- " + product . closest ( ' [data-section-id] ' ). dataset . sectionId ;
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .form__input--select ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
</script>
Klikk på Lagre .
Steg for Minimal
I Ressurser -katalogen klikker du på theme.js
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Steg for Narrative
I Ressurser -katalogen klikker du på custom.js
.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [data-product-json] ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = " shopify-section- " + product . closest ( ' [data-section-id] ' ). dataset . sectionId ;
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Steg for Simple
I Ressurser -katalogen klikker du på theme.js.liquid
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Steg for Supply
I Ressurser -katalogen klikker du på theme.js.liquid
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Steg for Venture
I Ressurser -katalogen klikker du på theme.js
.
Se etter variant.sku
:
Hvis du finner variant.sku
, har du fullført tilpasningen.
Hvis du ikke finner variant.sku
, må du gå videre til neste trinn.
Nederst i filen limer du inn følgende kode:
document . addEventListener ( ' DOMContentLoaded ' , () => {
const productJson = [... document . querySelectorAll ( ' [id^=ProductJson- ' )];
if ( productJson . length > 0 ) {
productJson . forEach (( product ) => {
const sectionId = product . id . replace ( " ProductJson- " , " shopify-section- " );
const variantSKU = document . querySelector ( ' # ' + sectionId + ' .variant-sku ' );
const inputSelects = [... document . querySelectorAll ( ' # ' + sectionId + ' .single-option-selector ' )];
const productInfo = JSON . parse ( product . innerHTML );
const inputValues = [];
const optionValues = [];
let count = 0 ;
inputSelects . forEach (( input ) => {
inputValues . push ( input . value );
optionValues . push ( count );
input . addEventListener ( ' change ' , ( evt ) => {
const currentValue = evt . currentTarget . value . toString ();
const changedIndex = inputSelects . indexOf ( evt . target );
inputValues [ changedIndex ] = currentValue ;
variantSKU . innerText = ' ' ;
productInfo . variants . forEach (( variant ) => {
if ( JSON . stringify ( variant . options ) == JSON . stringify ( inputValues )) {
variantSKU . innerText = variant . sku ;
}
});
});
count += 1 ;
});
});
}
});
Klikk på Lagre .
Legg til SKU-numre til produktvariantene fra administrator Hvis du vil at SKU-er skal vises på produktsidene, må du legge til SKU-numre i produktvariantene dine i Shopify-administrator.
Fra Shopify-administratoren går du til Produkter .
Klikk på produktet du vil redigere.
For produkter med flere varianter, legger du til SKU-numre i Varianter -seksjonen:
Klikk på Lagre .
Trinn for ukategoriserte temaer Vis SKU-numre på produktsider
Merk
Denne tilpasningen fungerer ikke for det ukategoriserte temaet Boundless. Ukategoriserte temaer ble lansert før oktober 2016, og har ingen filer i katalogen Seksjoner .
Trinn:
Fra Shopify-administrator går du til Nettbutikk > Temaer .
Finn temaet du vil redigere, klikk på … -knappen for å åpne handlingsmenyen, og klikk deretter på Rediger kode .
I Maler -katalogen klikker du på product.liquid
.
Finn følgende Liquid-tagg:
{{ product . title }}
Dette er koden som gjengir produkttitlene dine på produktsiden.
På en ny linje under kodelinjen som inneholder {{ product.title }}
, limer du inn følgende:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Klikk på Lagre .
Hvis du bruker et gratis Shopify-tema som ikke er Brooklyn eller Venture, finn følgende kodelinje:
var selectCallback = function ( variant , selector ) {
Hvis du ikke finner koden ovenfor i product.liquid
, finner du den i theme.liquid
, i Layout -katalogen.
Brooklyn og Venture: Hvis du bruker Brooklyn eller Venture, må du finne og redigere en annen kodelinje. I katalogen Materiell klikker du på theme.js.liquid
og finner følgende kodelinje:
theme . productVariantCallback = function ( variant , selector ) {
Lim inn følgende kode på en ny linje under:
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
Koden din skal se omtrent slik ut:
var selectCallback = function ( variant , selector ) {
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
self . productPage ({
money_format : theme . moneyFormat ,
variant : variant ,
selector : selector ,
translations : {
add_to_cart : theme . productStrings . addToCart ,
sold_out : theme . productStrings . soldOut ,
unavailable : theme . productStrings . unavailable
}
});
};
Klikk på Lagre .
Legg til SKU-numre til produktvariantene fra administrator Hvis du vil at SKU-er skal vises på produktsidene, må du legge til SKU-numre i produktvariantene dine i Shopify-administrator.
Fra Shopify-administratoren går du til Produkter .
Klikk på produktet du vil redigere.
For produkter med flere varianter kan du legge til SKU-numre i seksjonen Varianter : For produkter uten varianter kan du legge til SKU-nummeret i seksjonen Lagerbeholdning :
Klikk på Lagre .