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

Aviso

Os temas vintage não estão disponíveis na Theme Store. Esses temas não têm os recursos incluídos nos temas da Online Store 2.0 da Shopify, e os temas vintage gratuitos só recebem atualizações para correções de segurança.

Observação

Se você usa um tema gratuito da Shopify, entre em contato com o Atendimento ao cliente da Shopify para solicitar ajuda com o tutorial, que requer 15 minutos para o design. Para saber mais, consulte a Política de design da Shopify.

Observação

Esta personalização se aplica a temas vintage da Shopify, e não aos temas da Online Store 2.0.

• Descubra a versão da arquitetura do tema da loja
• Conheça as personalizações para temas da Online Store 2.0.

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

Observação

As etapas do tutorial são diferentes para temas com seções e sem seções. Um tema com seções permite arrastar e soltar elementos para organizar o layout da página inicial, mas um tema sem seções, não.

Para descobrir se seu tema é compatível com seções, acesse a página Editar código do tema. Se houver arquivos no diretório Seções, você usa um tema com seções. Os temas sem seções foram lançados antes de outubro de 2016 e não têm arquivos no diretório Seções.

Se você estiver usando um tema secionado, clique no botão Temas secionados e siga as instruções. Se você estiver usando um tema antigo não secionado, clique no botão Temas não secionados e siga as instruções.

Etapas para temas com seções

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

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
3. No diretório Seções, clique em product.liquid ou product-template.liquid.
4. Encontre a seguinte tag do Liquid:

{{ product.title }}

Esse é o código que renderiza os títulos dos produtos na página do produto.

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

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

Boundless

Etapas para Boundless

1. No diretório Ativos, clique em theme.js.liquid.

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

3. 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);
});

1. Clique em Salvar.

Brooklyn

Etapas para o Brooklyn

1. No diretório Ativos, clique em theme.js.liquid.

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

3. 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;
      });
    });
  }
});

1. Clique em Salvar.

Debut

Etapas para o Debut

1. No diretório Ativos, clique em theme.js.

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

3. 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;
      });
    });
  }
});

1. Clique em Salvar.

Express

Etapas do Express

1. No diretório Layout, clique em theme.liquid.
2. Encontre a tag de fechamento </body>.
3. 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>

1. Clique em Salvar.

Minimal

Etapas para o Minimal

1. No diretório Ativos, clique em theme.js.

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

3. 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;
      });
    });
  }
});

1. Clique em Salvar.

Narrative

Etapas para o Narrative

1. No diretório Ativos, clique em custom.js.
2. 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;
      });
    });
  }
});

1. Clique em Salvar.

Simple

Etapas para o Simple

1. No diretório Ativos, clique em theme.js.liquid.

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

3. 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;
      });
    });
  }
});

1. Clique em Salvar.

Supply

Etapas para o Supply

1. No diretório Ativos, clique em theme.js.liquid.

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

3. 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;
      });
    });
  }
});

1. Clique em Salvar.

Venture

Etapas para o Venture

1. No diretório Ativos, clique em theme.js.

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

3. 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;
      });
    });
  }
});

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.

1. No admin da Shopify, acesse Produtos.

2. Clique no produto que você quer editar.

3. No caso de produtos com muitas variantes, adicione os números de SKU na seção Variantes:

4. Clique em Salvar.

Etapas para temas sem seções

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

Observação

Esta personalização não funcionará para o tema Boundless sem seções. Os temas sem seções foram lançados antes de outubro de 2016 e não têm arquivos no diretório Seções.

Etapas:

1. No admin da Shopify, acesse Loja virtual > Temas.
2. Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
3. No diretório Modelos, clique em product.liquid.
4. Encontre a seguinte tag do Liquid:

{{ product.title }}

Esse é o código que renderiza os títulos dos produtos na página do produto.

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

1. Clique em Salvar.
2. 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) {

1. 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
          }
        });
      };

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.

1. No admin da Shopify, acesse Produtos.

2. Clique no produto que você quer editar.

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

   

4. Clique em Salvar.