Visualizzazione dei numeri SKU sulle pagine del prodotto
Le SKU (Stock Keeping Unit) sono numeri, in genere alfanumerici, utilizzati per facilitare l'identificazione dei prodotti e il monitoraggio delle scorte. Se un negozio utilizza le SKU, a ogni singola variante di prodotto viene assegnato un numero univoco. Puoi mostrare i numeri SKU delle varianti sulle pagine del prodotto modificando il codice del tema:

Temi con sezioni e temi senza sezioni
Su questa pagina
Passaggi per i Temi con sezioni
Visualizzazione dei numeri SKU sulle pagine del prodotto
Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Sezioni clicca su
product.liquid
o suproduct-template.liquid
.Trova il tag Liquid seguente:
{{ product.title }}
Questo è il codice che esegue il rendering dei titoli del prodotto sulla pagina del prodotto.
- Su una nuova riga, sotto quella del codice che contiene
{{ product.title }}
, incolla il codice seguente:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
- Clicca su Salva.
Seleziona il tuo tema
I passaggi successivi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema e segui le istruzioni.
Boundless
Passaggi per Boundless
- Nella directory Risorse, clicca su
theme.js.liquid
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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);
});
- Clicca su Salva.
Brooklyn
Passaggi per Brooklyn
- Nella directory Risorse, clicca su
theme.js.liquid
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Debut
Passaggi per Debut
- Nella directory Risorse, clicca su
theme.js
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Express
Passaggi per Express
- Nella directory Layout, clicca su
theme.liquid
. -
Trova il tag di chiusura
</body>
. - Sulla riga immediatamente sopra il tag di chiusura
</body>
incolla il codice seguente:
<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>
- Clicca su Salva.
Minimal
Passaggi per Minimal
- Nella directory Risorse, clicca su
theme.js
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Narrative
Passaggi per Narrative
- Nella directory Risorse, clicca su
custom.js
. - In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Simple
Passaggi per Simple
- Nella directory Risorse, clicca su
theme.js.liquid
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Supply
Passaggi per Supply
- Nella directory Risorse, clicca su
theme.js.liquid
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Venture
Passaggi per Venture
- Nella directory Risorse, clicca su
theme.js
. -
Cerca
variant.sku
:- Se riesci a trovare
variant.sku
, hai completato la personalizzazione. - Se non riesci a trovare
variant.sku
, prosegui con il passaggio successivo.
- Se riesci a trovare
In fondo al file, incolla il seguente codice:
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;
});
});
}
});
- Clicca su Salva.
Aggiunta di numeri SKU alle varianti di prodotto dal pannello di controllo
Per fare in modo che le SKU vengano visualizzate sulle pagine del prodotto, devi aggiungere i numeri SKU alle varianti di prodotto dal pannello di controllo Shopify.
Dal pannello di controllo Shopify vai a Prodotti.
Clicca sul prodotto che desideri modificare.
Per i prodotti con più varianti, aggiungi i numeri SKU nella sezione Varianti:
Clicca su Salva.
Passaggi per i Temi senza sezioni
Visualizzazione dei numeri SKU sulle pagine del prodotto
Passaggi:
Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Modelli, clicca su
product.liquid
.Trova il tag Liquid seguente:
{{ product.title }}
Questo è il codice che esegue il rendering dei titoli del prodotto sulla pagina del prodotto.
- Su una nuova riga, sotto quella del codice che contiene
{{ product.title }}
, incolla quanto segue:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
- Clicca su Salva.
- Se utilizzi un tema gratuito di Shopify diverso da Brooklyn o Venture, trova la riga di codice seguente:
var selectCallback = function(variant, selector) {
Se non trovi la riga di codice riportata sopra in product.liquid
, la troverai in theme.liquid
, nella directory Layout.
-
Brooklyn and Venture: se utilizzi Brooklyn o Venture, dovrai trovare e modificare una riga di codice diversa. Nella directory Assets (Risorse) clicca su
theme.js.liquid
e trova la riga di codice seguente:
theme.productVariantCallback = function (variant, selector) {
- Su una nuova riga sotto incolla il codice seguente:
if (variant) {
document.querySelector('.variant-sku').innerText = variant.sku;
}
else {
document.querySelector('.variant-sku').innerText = '';
}
Il codice dovrebbe avere un aspetto simile a questo:
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
}
});
};
- Clicca su Salva.
Aggiunta di numeri SKU alle varianti di prodotto dal pannello di controllo
Per fare in modo che le SKU vengano visualizzate sulle pagine del prodotto, devi aggiungere i numeri SKU alle varianti di prodotto dal pannello di controllo Shopify.
Dal pannello di controllo Shopify vai a Prodotti.
Clicca sul prodotto che desideri modificare.
Per i prodotti con più varianti, nella sezione Varianti, aggiungi i numeri SKU:
Per i prodotti senza varianti, nella sezione Scorte, aggiungi il numero SKU:Clicca su Salva.