Exibir números de SKU nas páginas de produto

Esta página foi impressa em Mar 27, 2023. Para a versão mais recente, acesse https://help.shopify.com/pt-BR/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku.

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:

Exemplo de SKU da variante

Temas com ou sem seções

Exibir números de SKU nas páginas de produto

Para que o tema mostre números de SKU nas páginas de produtos:

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que deseja 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 ou product-template.liquid.
Encontre a seguinte tag do Liquid:

{{ product.title }}

This is the code that renders your product titles on the product page.

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.
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.
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.
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.
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.
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.
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.
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.

Exibir números de SKU nas páginas de produto

Para que o tema mostre números de SKU nas páginas de produtos:

No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que deseja editar, clique no botão ... para abrir o menu de ações e depois em Editar código.

No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que deseja 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 }}

This is the code that renders your product titles on the product page.

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) {

If you cannot find the above line of code in `product.liquid`, then you will find it in `theme.liquid`, in the **Layout** directory.

#### Brooklyn and Venture

If you are using Brooklyn or Venture, then you will need to find and edit a different line of code. In the **Assets** directory, click `theme.js.liquid`, and [find](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find) the following line of code:

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 = '';
    }

Your code should look something like this:

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.
No caso de produtos com muitas variantes, adicione os números de SKU na seção Variantes:
Clique em Salvar.

Tudo pronto para começar a vender com a Shopify?

Experimente de graça