Exibir o estoque restante de uma variante 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 a equipe de Atendimento ao cliente da Shopify para receber ajuda relacionada ao tutorial, que requer 15 minutos para o design. Saiba mais sobre 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.

É possível adicionar uma mensagem à página do produto ou na seção de produtos em destaque que mostra o número de itens disponíveis quando o estoque de uma variante estiver baixo. Para essa mensagem ser exibida, ative o acompanhamento de estoque do produto.

As etapas da personalização variam, dependendo do tema. Clique no botão de seu tema e siga as instruções.

Dica

Os temas Supply e Venture da Shopify já incluem uma configuração Exibir mensagem de quantidade restante. Você pode ativar essa configuração no editor de temas.

Debut

Etapas para o Debut

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique no botão … > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

<script>
  var variantStock = {};
</script>

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{ current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

As alterações necessárias nesses arquivos dependem da versão do Debut que você está usando.

Versões 17.8.0 e anteriores

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre _updateAddToCart: function(evt) {. Imediatamente abaixo, adicione o seguinte código:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Encontre if (variant.available) {. Antes da instrução } else {, adicione o seguinte código:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Versões 17.9.0 e posteriores

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre _setProductState: function(evt) {. Imediatamente abaixo, adicione o seguinte código:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Na mesma função, encontre if (!variant) {. Após o colchete de fechamento }, adicione o seguinte código:

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Brooklyn

Etapas para o Brooklyn

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique no botão … > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

<script>
  var variantStock = {};
</script>

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre if (variant.available) {. Antes da instrução } else {, adicione o seguinte código:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Simple

Etapas para o Simple

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique no botão … > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

<script>
  var variantStock = {};
</script>

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre if (variant.available) {. Antes da instrução } else {, adicione o seguinte código:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Minimal

Etapas para o Minimal

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique no botão … > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

<script>
  var variantStock = {};
</script>

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

1. Abra theme.js.liquid ou theme.js.
2. Encontre theme.Product = (function(). Abaixo de this.selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre if (variant.available) {. Antes da instrução } else {, adicione o seguinte código:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Boundless

Etapas para Boundless

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique no botão … > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

<script>
  var variantStock = {};
    </script>

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% form 'product'. Acima dessa tag, adicione o seguinte código:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clique em Salvar.

Edite theme.js.liquid ou theme.js

1. Abra ‘theme.js.liquid’ *ou *‘theme.js’.
2. Encontre theme.Product = (function(). Abaixo de var selectors = {, adicione o seguinte código:

inventoryHtml: '.inventoryWrapper',

1. No mesmo arquivo, encontre $(selectors.SKU, this.$container).html(variant.sku);. Imediatamente abaixo, adicione o seguinte código:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.

Narrative

Etapas para o Narrative

Editar theme.liquid

1. No seu admin da Shopify, vá para loja virtual > temas.
2. Encontre o tema que você quer editar e clique no botão … > Editar código.
3. No diretório Layout, abra theme.liquid.
4. Encontre a tag de fechamento </head> no código. Em uma nova linha acima da tag de fechamento </head>, cole o seguinte código:

<script>
      var variantStock = {};
    </script>

1. Clique em Salvar.

Edite product-template.liquid ou featured-product.liquid

1. No diretório Seções, abra product-template.liquid ou featured-product.liquid:

   • Abra product-template.liquid para adicionar o recurso às páginas de produto.
   • Abra featured-product.liquid para adicionar o recurso à seção de produtos em destaque na página inicial.

2. Encontre {% include 'product-form' %}. Acima dessa tag, adicione o seguinte código:

    <div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua {{current_variant.inventory_quantity }} nas tags <p>.

1. Na parte inferior do arquivo, cole o seguinte código:

    <script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clique em Salvar.

Editar custom.js

1. Abra custom.js.
2. Na parte inferior do arquivo, cole o seguinte código:

var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

O código acima gera Stock: x. É possível alterar o texto ajustando o conteúdo nas tags <p>. Inclua ${variantStock[variant.id]} nas tags <p>.

1. Clique em Salvar.