Visa SKU-nummer på produktsidor
Den här sidan skrevs ut den Apr 23, 2024. Besök https://help.shopify.com/sv/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku för den aktuella versionen.
Varning
Vintage-teman är inte tillgängliga i temabutiken. Dessa teman har inte funktionerna som ingår i Shopifys Online Store 2.0-teman och Shopifys gratis Vintage-teman får inte uppdateringar utöver säkerhetsfixar.
Observera
Om du använder ett gratis tema från Shopify kan du kanske kontakta Shopify-support för att få hjälp med denna handledning. Det tar 15 minuter i designtid. För mer information, se Support för teman .
SKU:er (lagringsenheter) är nummer, vanligtvis alfanumeriska, som används för att hjälpa till att identifiera produkter och spåra lager. Om en butik använder SKU:er, tilldelas ett unikt nummer till varje enskild produktvariant. Du kan visa SKU-nummer för varianter på dina produktsidor genom att redigera din temakod:
Avsnitt och icke-sektionerade teman
Obs! Stegen i den här handledningen varierar beroende på om du använder ett tema med avsnitt eller ett tema utan avsnitt . Med ett tema med avsnitt kan du dra och släppa för att arrangera layouten på din startsida, men inte med ett tema utan avsnitt.
Gå till temasidan Redigera kod för att ta reda på om ditt tema stöder avsnitt. Om det finns filer i Avsnitts katalogen använder du ett avgränsat tema. Icke-sektionerade teman släpptes före oktober 2016 och har inga filer i Avsnitts katalogen.
Om du använder ett avgränsat tema klickar du på knappen Avgränsade teman -knapp och följer anvisningarna. Om du använder ett äldre, icke-avsnittsbaserat tema klickar du på knappen Icke-avgränsade teman och följer anvisningarna.
Steg för indelade teman Visa SKU-nummer på produktsidor
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på product.liquid
eller product-template.liquid
i katalogen Avsnitt .
Leta efter följande Liquid-tagg:
{{ product . title }}
Det här är den kod som återger dina produktnamn på produktsidan.
På en ny rad under kodraden som innehåller {{ product.title }}
klistrar du in följande kod:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Klicka på Spara .
Välj ditt tema Nästa steg för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema och följ anvisningarna.
Steg för Boundless
Klicka på theme.js.liquid
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 );
});
Klicka på Spara .
Steg för Brooklyn
Klicka på theme.js.liquid
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Steg för Debut
Klicka på theme.js
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Steg för Express
Klicka på theme.liquid
i Layout -registret
Leta efter den avslutande </body>
-taggen.
På raden direkt ovanför den avslutande </body>
-taggen klistrar du in följande kod:
<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>
Klicka på Spara .
Steg för Minimal
Klicka på theme.js
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Steg för Narrative
Klicka på custom.js
i registret Tillgångar .
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Steg för Simple
Klicka på theme.js.liquid
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Steg för Supply
Klicka på theme.js.liquid
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Steg för Venture
Klicka på theme.js
i registret Tillgångar .
Leta efter variant.sku
:
Om du kan hitta variant.sku
har du slutfört anpassningen.
Om du inte kan hitta variant.sku
fortsätter du till nästa steg.
Längst ner i filen klistra in följande kod:
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 ;
});
});
}
});
Klicka på Spara .
Lägg till SKU-nummer till dina produktvarianter från administratören Om du vill att SKU:er ska visas på dina produktsidor måste du lägga till SKU-nummer till dina produktvarianter från Shopify-administratören.
Gå till Produkter i din Shopify-administratör.
Klicka på den produkt som du vill redigera.
Lägg till dina SKU-nummer i avsnittet Varianter för produkter med flera varianter:
Klicka på Spara .
Steg för icke-indelade teman Visa SKU-nummer på produktsidor
Observera
Denna anpassning fungerar inte för det icke-sektionerade Boundless-temat. Teman utan avsnitt släpptes före oktober 2016 och har inga filer i katalogen Avsnitt .
Steg:
Från din Shopify-admin går du till Webbshop > Teman .
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod .
Klicka på product.liquid
i katalogen Mallar .
Leta efter följande Liquid-tagg:
{{ product . title }}
Det här är den kod som återger dina produktnamn på produktsidan.
På en ny rad under raden med koden som innehåller {{ product.title }}
klistrar du in följande:
{% assign current_variant = product . selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant . sku }} </span>
Klicka på Spara .
Leta efter följande kodrad om du använder ett gratis Shopify-tema som inte är Brooklyn eller Venture:
var selectCallback = function ( variant , selector ) {
Om du inte kan hitta ovanstående kodrad i product.liquid
hittar du den i theme.liquid
, i katalogen Layout .
Brooklyn och Venture: Om du använder Brooklyn eller Venture måste du hitta och redigera en annan kodrad. I katalogen Tillgångar klickar du på theme.js.liquid
och hitta följande kodrad:
theme . productVariantCallback = function ( variant , selector ) {
På en ny rad under klistrar du in följande kod:
if ( variant ) {
document . querySelector ( ' .variant-sku ' ). innerText = variant . sku ;
}
else {
document . querySelector ( ' .variant-sku ' ). innerText = '' ;
}
Din kod ska se ut ungefär så här:
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
}
});
};
Klicka på Spara .
Lägg till SKU-nummer till dina produktvarianter från administratören Om du vill att SKU:er ska visas på dina produktsidor måste du lägga till SKU-nummer till dina produktvarianter från Shopify-administratören.
Gå till Produkter i din Shopify-administratör.
Klicka på den produkt som du vill redigera.
Lägg till dina SKU-nummer för produkter med flera varianter i avsnittet Varianter : Lägg till ditt SKU-nummer för produkter utan varianter i avsnittet Lager :
Klicka på Spara .