Exibir números de SKU nas páginas de produto
As SKUs (unidades de manutenção de estoque) são números, em geral alfanuméricos, usados para ajudar a identificar produtos e rastrear o estoque. Se a loja usa SKUs, um número exclusivo será atribuído a cada variante de produto. É possível editar o código do tema para exibir os números de SKU das variantes nas páginas de produto:
Temas com ou sem seções
Nesta página
Etapas para temas com seções
Exibir números de SKU nas páginas de produto
- No admin da Shopify, acesse Loja virtual > Temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Seções, clique em
product.liquid
ouproduct-template.liquid
. - Encontre a seguinte tag do Liquid:
{{ product.title }}
Esse é o código que renderiza os títulos dos produtos na página do produto.
- Em uma nova linha abaixo da linha de código que inclui
{{ product.title }}
, cole o seguinte código:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
- Clique em Salvar.
Selecionar seu tema
As próximas etapas da personalização podem variar de acordo com o tema escolhido. Clique no botão de seu tema e siga as instruções.
Etapas para Boundless
- No diretório Ativos, clique em
theme.js.liquid
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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);
});
- Clique em Salvar.
Etapas para o Brooklyn
- No diretório Ativos, clique em
theme.js.liquid
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Etapas para o Debut
- No diretório Ativos, clique em
theme.js
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Etapas do Express
- No diretório Layout, clique em
theme.liquid
. -
Encontre a tag de fechamento
</body>
. - Na linha imediatamente acima da tag de fechamento
</body>
, cole este código:
<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>
- Clique em Salvar.
Etapas para o Minimal
- No diretório Ativos, clique em
theme.js
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Etapas para o Narrative
- No diretório Ativos, clique em
custom.js
. - Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Etapas para o Simple
- No diretório Ativos, clique em
theme.js.liquid
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Etapas para o Supply
- No diretório Ativos, clique em
theme.js.liquid
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Etapas para o Venture
- No diretório Ativos, clique em
theme.js
. -
Procure
variant.sku
:- Se você conseguir encontrar
variant.sku
, a personalização está concluída. - Se não foi possível encontrar
variant.sku
, siga para a próxima etapa.
- Se você conseguir encontrar
Na parte inferior do arquivo, cole o seguinte código:
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;
});
});
}
});
- Clique em Salvar.
Adicionar números de SKU às variantes do produto no admin
Adicione os números de SKU às variantes de produtos no admin da Shopify para que as SKUs apareçam nas páginas de produtos.
No admin da Shopify, acesse Produtos.
Clique no produto que você quer editar.
No caso de produtos com muitas variantes, adicione os números de SKU na seção Variantes:
Clique em Salvar.
Etapas para temas sem seções
Exibir números de SKU nas páginas de produto
Etapas:
- No admin da Shopify, acesse Loja virtual > Temas.
- Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
- No diretório Modelos, clique em
product.liquid
. - Encontre a seguinte tag do Liquid:
{{ product.title }}
Esse é o código que renderiza os títulos dos produtos na página do produto.
- Em uma nova linha abaixo da linha de código que contém
{{ product.title }}
, cole o seguinte:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
- Clique em Salvar.
- Se você estiver usando um tema gratuito da Shopify que não seja o Brooklyn nem o Venture, encontre a seguinte linha de código:
var selectCallback = function(variant, selector) {
Se não for possível localizar a linha de código acima em product.liquid
, você a encontrará em theme.liquid
, no diretório Layout.
-
Brooklyn e Venture: Se você estiver usando o Brooklyn ou Venture, precisará encontrar e editar uma linha de código diferente. No diretório Ativos, clique em
theme.js.liquid
e encontre esta linha:
theme.productVariantCallback = function (variant, selector) {
- Em uma nova linha abaixo dela, cole o seguinte código:
if (variant) {
document.querySelector('.variant-sku').innerText = variant.sku;
}
else {
document.querySelector('.variant-sku').innerText = '';
}
Seu código deve ficar assim:
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
}
});
};
- Clique em Salvar.
Adicionar números de SKU às variantes do produto no admin
Adicione os números de SKU às variantes de produtos no admin da Shopify para que as SKUs apareçam nas páginas de produtos.
No admin da Shopify, acesse Produtos.
Clique no produto que você quer editar.
Para produtos com muitas variantes, adicione os números de SKU na seção Variantes:
Para produtos sem variantes, adicione os números de SKU na seção Estoque:Clique em Salvar.