Incoraggiare i clienti a scegliere un'opzione
Quando un cliente visita una pagina del prodotto sul tuo negozio online, per impostazione predefinita viene selezionata la prima variante disponibile. Puoi utilizzare questa personalizzazione per disabilitare la selezione automatica della prima variante disponibile. In questo modo prima di mostrare una variante, verrà richiesto al cliente di selezionarne una manualmente. )
Temi con sezioni e temi senza sezioni
Seleziona il tuo tema
I passaggi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema prima di seguire le istruzioni qui sotto:
Passaggi per Boundless
Segui questi passaggi per applicare la personalizzazione a Boundless:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
theme.js
o sutheme.js.liquid
.Trova il codice
initVariantSelectors
. Di seguito cerca il codice seguente:
// 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;
}
}
}
- Trova la riga di codice seguente:
$(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.
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Trova il codice seguente ed eliminalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Passaggi per Debut
Segui questi passaggi per applicare la personalizzazione a Debut:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
theme.js
o sutheme.js.liquid
.Aggiungi il seguente codice in fondo al file:
(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;
}
}
}
})();
-
Trova il codice
_updatePrice: function(variant)
. Sostituiscilo con il codice seguente:
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;
} */
-
Trova il codice
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Trova il codice
_updateImages: function(variant)
. Sostituiscilo con il codice seguente:
var currentVariantImage = this.currentVariant.featured_image || {};
with:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Appena sotto trova il codice seguente:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Replace it with:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Trova il codice
_updateSKU: function(variant)
. Sostituiscilo con il codice seguente:
if (variant.sku === this.currentVariant.sku) {
return;
}
with:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Trova il codice
_initVariants: function() {
. Sostituiscilo con il codice seguente:
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.
- Trova il codice seguente:
_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');
}
},
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{%- 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 %}
- Trova il codice seguente ed eliminalo:
{% 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 -%}
- Trova il codice seguente:
{%- 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.
- Trova il codice seguente:
{% 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 %}
- Trova il codice seguente:
{% 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>
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica il frammento del prezzo del prodotto
Per modificare il frammento del prezzo del prodotto:
Nella directory Frammenti, clicca su
product-price.liquid
.Trova il codice seguente:
{%- 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.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Passaggi per Minimal
Segui questi passaggi per applicare la personalizzazione a Minimal:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
theme.js
o sutheme.js.liquid
.Trova il codice
initProductVariant: function() {
. Di seguito cerca il codice seguente:
// 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;
}
}
}
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Trova il codice seguente ed eliminalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Trova tutte le istanze di questo codice:
{% 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 %}
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Passaggi per Narrative
Segui questi passaggi per applicare la personalizzazione a Narrative:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
custom.js
.Aggiungi il seguente codice in fondo al file:
(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;
}
}
}
})();
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{%- 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 -%}
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Passaggi per Simple
Segui questi passaggi per applicare la personalizzazione a Simple:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
theme.js
o sutheme.js.liquid
.Trova il codice
initProductVariant: function() {
. Di seguito cerca il codice seguente:
// 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;
}
}
}
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Trova il codice seguente ed eliminalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Passaggi per Supply
Segui questi passaggi per applicare la personalizzazione a Supply:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
theme.js
o sutheme.js.liquid
.Trova il codice
initProductVariant: function() {
. Di seguito cerca il codice seguente:
// 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;
}
}
}
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Trova il codice seguente ed eliminalo:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Trova tutte le istanze di questo codice:
{% 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 %}
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Passaggi per Venture
Segui questi passaggi per applicare la personalizzazione a Venture:
Modifica il file JavaScript del tema
Per modificare il file JavaScript del tema:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Risorse, clicca su
theme.js
o sutheme.js.liquid
.Aggiungi il seguente codice in fondo al file:
(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;
}
}
}
})();
- Trova il codice seguente:
this.currentVariant = this._getVariantFromOptions();
Replace it with:
this.currentVariant = this._getVariantFromOptions() || {};
-
Trova il codice
_updatePrice: function(variant)
. Sostituiscilo con il codice seguente:
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;
} */
- Clicca su Salva.
Modifica il modello della pagina del prodotto
Per modificare il modello della pagina del prodotto:
Nella directory Sezioni, clicca su
product-template.liquid
.Trova il codice seguente:
{% 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 %}
- Trova il codice seguente ed eliminalo:
{% 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 %}
- Trova tutte le istanze di questo codice:
{% unless current_variant.available %}
Replace it with:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Trova il codice seguente:
{% 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 %}
-
Trova il codice
{% schema %}
. Sopra a questo, incolla il codice seguente su una riga separata:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.
Aggiunta di prompt ai menu a discesa delle varianti
Per aggiungere prompt ai menu a discesa delle varianti:
Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
Assegna al nuovo frammento il nome
pick-an-option
.Nel file del nuovo frammento, incolla questo codice ospitato su GitHub.
Clicca su Salva.
Nella directory Layout, clicca su
theme.liquid
.Trova il tag di chiusura
</body>
in fondo al file. Su una nuova riga proprio sopra il tag di chiusura</body>
, incolla il codice seguente:
{% render 'pick-an-option' %}

Clicca su Salva.
Trova il file che contiene il modulo Aggiungi al carrello. Avrà l’attributo
action
impostato su/cart/add
.Trova questo codice nel modulo:
<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>
- Trova e sostituisci il seguente codice:
{% 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 %}
- Clicca su Salva.
Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello
Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come "Non disponibili" prima che sia effettuata una selezione.
- Dal pannello di controllo Shopify passa a Negozio online > Temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
- Nell'app Shopify tocca Negozio.
- Nella sezione Canali di vendita, tocca Negozio online.
- Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.
Nel campo Filtra, inizia a digitare
unavailable
per trovare la traduzione di "Unavailable" (Non disponibile).Sostituisci il testo Non disponibile con
Make a selection
.Clicca su Salva.