Fazer com que os clientes escolham uma opção
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 a personalização Fazer com que os clientes escolham uma opção para desabilitar a seleção automática da primeira variante disponível. Dessa forma, o cliente é solicitado a selecionar manualmente antes que uma variante apareça.
Se você usar a personalização Fazer com que os clientes escolham uma opção, seu tema pode não exibir o preço do produto até que o consumidor selecione uma variante. Itens com variantes não mostram o preço em destaque, já que o valor exibido é determinado pela variante escolhida.

Temas com ou sem seções
Nesta página
Etapas para temas com seções
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
theme.js
outheme.js.liquid
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;
}
}
}
- 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');
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{% assign current_variant = product.selected_or_first_available_variant %}
Substitua por:
{% assign current_variant = product.selected_variant %}
- Encontre o seguinte código e exclua-o:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
theme.js
outheme.js.liquid
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;
}
}
}
})();
-
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;
} */
-
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);
-
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 || {};
}
- 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;
} */
-
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;
}
}
-
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);
} */
- 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');
}
},
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Substitua por:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Encontre o seguinte código e exclua-o:
{% 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:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Encontre o seguinte código:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Substitua por:
{%- 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:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Substitua por:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Encontre o seguinte código:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Substitua por:
{% 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 %}
- Encontre o seguinte código:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Substitua por:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- 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:
- No diretório Snippets, clique em
product-price.liquid
. - Encontre o seguinte código:
{%- 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
assign money_price = price | money
-%}
Substitua por:
{%- 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
assign money_price = price | money
-%}
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
theme.js
outheme.js.liquid
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;
}
}
}
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{% assign variant = product.selected_or_first_available_variant %}
Substitua por:
{% assign variant = product.selected_variant %}
- Encontre o seguinte código e exclua-o:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Encontre todas as ocorrências deste código:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Substitua por:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
custom.js
.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;
}
}
}
})();
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Substitua por:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
theme.js
outheme.js.liquid
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;
}
}
}
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{% assign current_variant = product.selected_or_first_available_variant %}
Substitua por:
{% assign current_variant = product.selected_variant %}
- Encontre o seguinte código e exclua-o:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
theme.js
outheme.js.liquid
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;
}
}
}
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{% assign variant = product.selected_or_first_available_variant %}
Substitua por:
{% assign variant = product.selected_variant %}
- Encontre o seguinte código e exclua-o:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Encontre todas as ocorrências deste código:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Substitua por:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
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
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você quer editar, clique no botão … para abrir o menu de ações e, depois, em Editar código.
No diretório Ativos, clique em
theme.js
outheme.js.liquid
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;
}
}
}
})();
- Encontre o seguinte código:
this.currentVariant = this._getVariantFromOptions();
Substitua por:
this.currentVariant = this._getVariantFromOptions() || {};
-
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;
} */
- Clique em Salvar.
Editar seu modelo de página de produto
Para editar o modelo de página do seu produto:
- No diretório Seções, clique em
product-template.liquid
. - Encontre o seguinte código:
{% assign current_variant = product.selected_or_first_available_variant %}
Substitua por:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Encontre o seguinte código e exclua-o:
{% 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:
{% if variant == current_variant %} selected="selected" {% endif %}
- Encontre todas as ocorrências deste código:
{% unless current_variant.available %}
Substitua por:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Encontre o seguinte código:
{% 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:
{% 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 %}
-
Encontre o código
{% schema %}
. Acima dele, cole este código em sua própria linha:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
Ele deve ficar assim:
{% if current_variant == blank %}
<script>
var productOptions = [];
{% for option in product.options -%}
var optionObj = {};
optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
productOptions.push(optionObj);
{%- endfor %}
</script>
{% endif %}
{% schema %}
- Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
Clique em Salvar.
Etapas para temas sem seções
Adicionar avisos a menus suspensos de variantes
- No diretório Snippets, clique em Adicionar um novo snippet de código.
- Nomeie seu novo snippet de código
pick-an-option
. - Em seu novo arquivo de snippet de código, cole este código hospedado no GitHub.
- Clique em Salvar.
- No diretório Layout, clique em
theme.liquid
. -
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:
{% render 'pick-an-option' %}
- Clique em Salvar.
-
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
- o modelo
Encontre este código dentro do formulário:
<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 encontre este código no formulário:
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Substitua o código pelo seguinte bloco de código:
<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>
Se você usa os temas Minimal, Pop ou Supply, encontre todas as ocorrências deste código:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Substitua o código pelo seguinte bloco de código:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Se você usa outro tema vintage da Shopify, encontre este código:
{% assign current_variant = product.selected_or_first_available_variant %}
Substitua o código pelo seguinte bloco de código:
{% assign current_variant = product.selected_variant %}
Clique em Salvar.
Alterar as configurações de idioma do botão Adicionar ao carrinho
É possível alterar as configurações de idioma do botão Adicionar ao carrinho para que produtos não apareçam como Indisponível antes que uma seleção seja feita.
Etapas:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você vai editar e depois clique em ... > Editar conteúdo do tema padrão.
Na barra de pesquisa Filtrar itens, comece a digitar indisponível para exibir a tradução Indisponível.
Substitua o texto Indisponível por Fazer uma seleção.
Clique em Salvar.