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 esta personalização para desabilitar a seleção automática e fazer com que o cliente selecione manualmente a variante para exibição. )
Temas com ou sem 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:
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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);
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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);
There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:
$(selectors.addToCartText).html('Make a Selection');
> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
- 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 %}
Replace it with:
{% 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 %}
It should look something like this:
{% 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
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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;
}
with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
If you can't find the above code, then find the following code:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Replace it with:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Encontre o código
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Encontre o código
_updateImages: function(variant)
. Substitua o seguinte código:
var currentVariantImage = this.currentVariant.featured_image || {};
with:
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;
}
Replace it with:
/* 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;
}
with:
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);
}
with:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.
- 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
})
);
},
Add the following code, on a new line, below the above code:
_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');
}
},
It should look something like this:
_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 -%}
Replace it with:
{%- 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 %}
If you can't find the code above, then find this code and delete it:
{%- 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 -%}
Replace it with:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
If you can't find the code above, then find this code:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Replace it with:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.
- Encontre o seguinte código:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Replace it with:
{% 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 %}
Replace it with:
<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 %}
It should look something like this:
{% 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
-%}
Replace it with:
{%- 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
-%}
> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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();
}
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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 %}
Replace it with:
{% 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 %}
Replace with:
{% 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 %}
It should look something like this:
{% 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
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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 -%}
Replace it with:
{%- 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 %}
It should look something like this:
{% 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
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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);
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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 %}
Replace it with:
{% 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 %}
It should look something like this:
{% 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
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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);
Add the following code on a new line below:
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;
}
}
}
It should look something like this:
// 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 %}
Replace it with:
{% 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 %}
Replace it with:
{% 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 %}
It should look something like this:
{% 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
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
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:
No admin da Shopify, acesse Loja virtual > Temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar código.
No app da Shopify, toque em Loja.
Na seção Canais de vendas, toque em Loja virtual.
Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > 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();
Replace it with:
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;
}
with:
/* 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 %}
Replace it with:
{% 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 %}
If you can't find the code above, then find this code and delete it:
{% if variant == current_variant %} selected="selected" {% endif %}
- Encontre todas as ocorrências deste código:
{% unless current_variant.available %}
Replace it with:
{% 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 %}
Replace it with:
{% 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 %}
It should look something like this:
{% 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
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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.
Adicionar avisos a menus suspensos de variantes
Para adicionar avisos aos 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
.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>
or
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Replace it with:
<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>
- Encontre e substitua o seguinte código:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Replace with:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
### Other free Shopify themesIf you use any other Shopify theme, then find this code:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- 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.
- No admin da Shopify, acesse Loja virtual > Temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
- No app da Shopify, toque em Loja.
- Na seção Canais de vendas, toque em Loja virtual.
- Toque em Gerenciar temas.
Encontre o tema que você deseja editar e, depois, clique em Ações > Editar idiomas.
Na caixa Filtro, comece a digitar
unavailable
para exibir a tradução "Indisponível".Substitua o texto Indisponível por
Make a selection
.Clique em Salvar.