Fazer com que os clientes escolham uma opção

Observação

Se você usa um tema gratuito da Shopify, é possível que consiga ajuda em relação a esse tutorial por meio do Atendimento ao cliente da Shopify. Vale lembrar que o tempo de design é de 15 minutos. Para saber mais, consulte o Atendimento para temas.

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.

Quando um cliente visita uma página de produto na loja virtual, a primeira variante disponível é selecionada por padrão. No entanto, é possível usar esta personalização para desabilitar a seleção automática e fazer com que o cliente selecione manualmente a variante para exibição.)

Aviso

Como esta personalização impede a seleção de uma variante-padrão, é possível que o tema mostre o preço do produto apenas depois que o cliente escolher uma opção. Esse é o comportamento normal, pois os produtos com variantes não mostram o preço em destaque, já que o valor exibido é determinado pela variante especificada.

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.

Sectioned themes

Selecionar seu tema

As etapas para essa personalização variam dependendo do seu tema. Clique no botão do seu tema antes de seguir as instruções abaixo:

Boundless

Etapas para Boundless

Siga estas etapas para aplicar a personalização ao Boundless:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Encontre o código initVariantSelectors. Abaixo dele, encontre o seguinte código:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Adicione o seguinte código em uma nova linha abaixo:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Ele deve ficar assim:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Encontre a seguinte linha de código:

$(selectors.addToCartText).html(theme.strings.soldOut);

Existem duas instâncias dessa linha de código, ambas encontradas dentro da função productVariantCallback. Substitua apenas a segunda instância por:

$(selectors.addToCartText).html('Make a Selection');

Aviso

Algumas versões do Boundless não incluem a linha de código a ser substituída nesta etapa. Se você não conseguir encontrar o código, pule para a próxima etapa.

1. Clique em Salvar.

Editar seu modelo de página de produto

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Substitua por:

   liquid {% assign current_variant = product.selected_variant %}

3. Encontre o seguinte código e exclua-o:

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

4. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Debut

Etapas para o Debut

Siga estas etapas para aplicar a personalização ao Debut:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Adicione o seguinte código ao final do arquivo:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Encontre o código _updatePrice: function(variant). Substitua o seguinte código:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

com:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Caso você não consiga localizar o código acima, encontre este código:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Substitua por:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Encontre o código this.currentVariant = variant;

   Abaixo dele, adicione o seguinte código:

this._updatePaymentButton(variant);

O resultado deve ficar assim:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Encontre o código _updateImages: function(variant). Substitua o seguinte código:

var currentVariantImage = this.currentVariant.featured_image || {};

com:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Logo abaixo, encontre o seguinte código:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Substitua por:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Encontre o código _updateSKU: function(variant). Substitua o seguinte código:

if (variant.sku === this.currentVariant.sku) {
  return;
}

com:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. Encontre o código _initVariants: function() {. Substitua o seguinte código:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

com:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Aviso

Esse código só precisa ser substituído na versão 17.5.0 ou outra posterior do Debut.

1. Encontre o seguinte código:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Abaixo do código mostrado acima, adicione este código em uma nova linha:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Ele deve ficar assim:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. Clique em Salvar.

Editar seu modelo de página de produto

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {%- assign current_variant = product.selected_or_first_available_variant -%}

   Substitua por:

   liquid {%- if product.variants.size > 1 -%} {%- assign current_variant = product.selected_variant -%} {%- else %} {%- assign current_variant = product.first_available_variant -%} {%- endif %}

3. Encontre o seguinte código e exclua-o:

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

   Caso você não consiga localizar o código acima, encontre e exclua este código:

   liquid {%- if variant == current_variant %} selected="selected" {%- endif -%}

4. Encontre o seguinte código:

   liquid {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

   Substitua por:

   liquid {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

   Caso você não consiga localizar o código acima, encontre este código:

   liquid {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

   Substitua por:

   liquid {%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Aviso

Algumas versões do Debut não incluem a linha de código a ser substituída nesta etapa. Se você não conseguir encontrar o código, pule para a próxima etapa.

1. Encontre o seguinte código:

   liquid {% unless current_variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

   Substitua por:

   liquid {% if current_variant == blank %} {{ 'products.product.unavailable' | t }} {% elsif current_variant.available %} {{ 'products.product.add_to_cart' | t }} {% else %} {{ 'products.product.sold_out' | t }} {% endif %}

2. Encontre o seguinte código:

   liquid {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %}

   Substitua por:

   liquid <div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}"> {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %} </div>

3. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Editar um snippet de código do código de preço do produto

   Editar o snippet de preço do produto:

   1. No diretório Snippets, clique em product-price.liquid.

   2. Encontre o seguinte código:

      liquid {%- liquid if variant.title assign compare_at_price = variant.compare_at_price assign price = variant.price assign available = variant.available else assign compare_at_price = 1999 assign price = 1999 assign available = true endif</p><p>assign money_price = price | money -%}

      Substitua por:

      liquid {%- liquid if variant.title assign compare_at_price = variant.compare_at_price assign price = variant.price assign available = variant.available elsif product.title assign compare_at_price = product.compare_at_price assign price = product.price assign available = product.available else assign compare_at_price = 1999 assign price = 1999 assign available = true endif</p><p>assign money_price = price | money -%}

   Aviso

   Algumas versões do Debut não incluem a linha de código a ser substituída nesta etapa. Se você não conseguir encontrar o código, pule para a próxima etapa.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Minimal

Etapas para o Minimal

Siga estas etapas para aplicar a personalização ao Minimal:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Encontre o código initProductVariant: function() {. Abaixo dele, encontre o seguinte código:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Adicione o seguinte código em uma nova linha abaixo:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Ele deve ficar assim:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Clique em Salvar.

Editar seu modelo de página de produto:

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Substitua por:

   liquid {% assign variant = product.selected_variant %}

3. Encontre o seguinte código e exclua-o:

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

4. Encontre todas as ocorrências deste código:

   liquid {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

   Substitua por:

   liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

5. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Narrative

Etapas para o Narrative

Siga estas etapas para aplicar a personalização ao Narrative:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Adicione o seguinte código ao final do arquivo:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Clique em Salvar.

Editar seu modelo de página de produto

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {%- assign current_variant = product.selected_or_first_available_variant -%}

   Substitua por:

   liquid {%- if product.variants.size > 1 -%} {%- assign current_variant = product.selected_variant -%} {%- else -%} {%- assign current_variant = product.first_available_variant -%} {%- endif -%}

3. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Simple

Etapas para o Simple

Siga estas etapas para aplicar a personalização ao Simple:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Encontre o código initProductVariant: function() {. Abaixo dele, encontre o seguinte código:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Adicione o seguinte código em uma nova linha abaixo:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Ele deve ficar assim:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Clique em Salvar.

Editar seu modelo de página de produto

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Substitua por:

   liquid {% assign current_variant = product.selected_variant %}

3. Encontre o seguinte código e exclua-o:

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

4. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Supply

Etapas para o Supply

Siga estas etapas para aplicar a personalização ao Supply:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Encontre o código initProductVariant: function() {. Abaixo dele, encontre o seguinte código:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Adicione o seguinte código em uma nova linha abaixo:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Ele deve ficar assim:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Clique em Salvar.

Editar seu modelo de página de produto

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Substitua por:

   liquid {% assign variant = product.selected_variant %}

3. Encontre o seguinte código e exclua-o:

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

4. Encontre todas as ocorrências deste código:

   liquid {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

   Substitua por:

   liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

5. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Venture

Etapas para o Venture

Siga estas etapas para aplicar a personalização ao Venture:

Editar o arquivo JavaScript do seu tema

Para editar o arquivo JavaScript do tema:

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

2. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

iPhone

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

Android

1. No app da Shopify, toque em Loja.

2. Na seção Canais de vendas, toque em Loja virtual.

3. Toque em Gerenciar temas.

4. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.

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

2. Adicione o seguinte código ao final do arquivo:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Encontre o seguinte código:

this.currentVariant = this._getVariantFromOptions();

Substitua por:

this.currentVariant = this._getVariantFromOptions() || {};

1. Encontre o código _updatePrice: function(variant). Substitua o seguinte código:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

com:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Clique em Salvar.

Editar seu modelo de página de produto

Para editar o modelo de página do seu produto:

1. No diretório Seções, clique em product-template.liquid.

2. Encontre o seguinte código:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Substitua por:

   liquid {% if product.variants.size > 1 %} {% assign current_variant = product.selected_variant %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %}

3. Encontre o seguinte código e exclua-o:

   liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

   Caso você não consiga localizar o código acima, encontre e exclua este código:

   liquid {% if variant == current_variant %} selected="selected" {% endif %}

4. Encontre todas as ocorrências deste código:

   liquid {% unless current_variant.available %}

   Substitua por:

   liquid {% unless current_variant.available or product.variants.size == 1 and variant.available %}

5. Encontre o seguinte código:

   liquid {% unless current_variant.available or product.variants.size == 1 and variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %}

   Substitua por:

   liquid {% if current_variant == blank %} {{ 'products.product.unavailable' | t }} {% else %} {% unless current_variant.available or product.variants.size == 1 and variant.available %} {{ 'products.product.sold_out' | t }} {% else %} {{ 'products.product.add_to_cart' | t }} {% endunless %} {% endif %}

6. Encontre o código {% schema %}. Acima dele, cole este código em sua própria linha:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Ele deve ficar assim: ```liquid {% if current_variant == blank %} {% endif %}

   {% schema %} ```

   1. Clique em Salvar.

   Alterar as configurações de idioma do botão Adicionar ao carrinho

   Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

   Desktop

   1. No admin da Shopify, acesse Loja virtual > Temas.

   iPhone

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   Android

   1. No app da Shopify, toque em Loja.
   2. Na seção Canais de vendas, toque em Loja virtual.
   3. Toque em Gerenciar temas.

   1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

   2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

   3. Substitua o texto Indisponível por Make a selection.

   4. Clique em Salvar.

Non-sectioned themes

Adicionar avisos a menus suspensos de variantes

Para adicionar avisos aos menus suspensos de variantes:

1. No diretório Snippets, clique em Adicionar um novo snippet de código.

2. Nomeie seu novo snippet de código pick-an-option.

   

3. Em seu novo arquivo de snippet de código, cole este código hospedado no GitHub.

4. Clique em Salvar.

5. No diretório Layout, clique em theme.liquid.

6. Encontre a tag de fechamento </body> perto da parte inferior do arquivo. Em uma nova linha logo acima da tag de fechamento </body>, cole o seguinte código:

   liquid {% render 'pick-an-option' %}

   

7. Clique em Salvar.

8. Encontre o arquivo que contém o formulário de adicionar ao carrinho. Ele terá um atributo de action definido como /cart/add.

   Deve estar em um desses quatro arquivos:

- o modelo product.liquid em Modelos - o layout theme.liquid em Layout - o snippet de código product.liquid em Snippets - o snippet de código single-product.liquid em Snippets

1. Encontre este código dentro do formulário:

   liquid <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

   ou

   liquid <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

   Substitua por:

   liquid <option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

2. Encontre e substitua o seguinte código:

Minimal, Pop ou Supply

Se você usa os temas Minimal, Pop ou Supply, encontre todas as ocorrências deste código:

liquid {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Substitua por:

liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Outros temas gratuitos da Shopify

Se você usa qualquer outro tema da Shopify, encontre este código:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Substitua por:

liquid {% assign current_variant = product.selected_variant %}

1. Clique em Salvar.

Alterar as configurações de idioma do botão Adicionar ao carrinho

Você pode alterar as configurações de idioma do botão Adicionar ao carrinho para que os produtos não apareçam como "Indisponível" antes que uma seleção seja feita.

Desktop

1. No admin da Shopify, acesse Loja virtual > Temas.

iPhone

1. No app da Shopify, toque em Loja.
2. Na seção Canais de vendas, toque em Loja virtual.
3. Toque em Gerenciar temas.

Android

1. No app da Shopify, toque em Loja.
2. Na seção Canais de vendas, toque em Loja virtual.
3. Toque em Gerenciar temas.

1. Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.

2. Na caixa Filtro, comece a digitar unavailable para exibir a tradução "Indisponível".

3. Substitua o texto Indisponível por Make a selection.

4. Clique em Salvar.